Search code examples
csshtmlalignment

Improving div alignment

The goal is to align two divs next to each other.

HTML:

<div class="test1>Text 1</div>
<div class="test2>Text 2</div>

CSS:

.test1 {
    float: left;
}
.test2 {
    float: left;
}

It works as long as the browser window is wider than the two divs. The moment the browser window width can no longer accommodate two divs next to each other, test2 is pushed below test1.

How to prevent this behaviour? So they will always be next to each other (if their total width is greater than the browser width, show a horizontal scrolling bar?).

Solution

  • Wrap them in a containing div and give that containing div a fixed width in pixels. Once the browser window becomes smaller than that width, it will display the scroll bar.