responsive html

A simple CSS layout using floated columns that stack on mobile screens using a media query. Supports full-width, narrow (30%), and wide (70%) column variants.

CSS

.columnfull  { float: left; width: 50%; padding: 0 10px; }
.columnsmall { float: left; width: 30%; padding: 0 10px; }
.columnbig   { float: left; width: 70%; padding: 0 10px; }

/* Clearfix for the row container */
.rownew:after { content: ""; display: table; clear: both; }

/* Stack columns on screens narrower than 600px */
@media screen and (max-width: 600px) {
    .columnfull, .columnsmall, .columnbig {
        width: 100%;
        text-align: center;
    }
}

Example HTML

<div class="rownew">
    <div class="columnfull">
        <h3>Column 1</h3>
        <p>Content here</p>
    </div>
    <div class="columnfull">
        <h3>Column 2</h3>
        <p>Content here</p>
    </div>
</div>

Notes

• For modern layouts, prefer CSS Grid or Flexbox over floats.
• The .rownew:after clearfix prevents the parent from collapsing around floated children.
• Adjust the max-width breakpoint to match your design's mobile threshold.

Horizontal scrollbars caused by elements wider than the viewport are a common layout issue. This CSS snippet prevents overflow on the entire page.

CSS

html, body {
    overflow-x: hidden;
}

When to Use

• When a fixed-width element or miscalculated padding is causing a horizontal scrollbar.
• As a quick fix while debugging layout issues — the root cause (an oversized element) should ultimately be identified and fixed.

Notes

• Setting overflow-x: hidden on body can break position: sticky elements — use with caution.
• To find the offending element, use browser DevTools and inspect elements wider than the viewport width.