CODEWITHSUNDEEP
htmlcss
Nawal
Nawal

Reputation: 381

Two divs side by side, in a scrollable fixed-size box

I have managed to put two divs side by side using a <div class="clear"></div> as explained elsewhere.

I now want to put two divs side by side, inside a fixed-size box that can scroll horizontally. Vertical space isn't a problem, but the two divs must be side by side and can expand vertically when needed. If space is needed horizontally, they must expand inside the box with fixed width but whose insides can scroll horizontally.

The following code does this with tables, but I was wondering if it can be done with divs as well, to keep the page semantically correct. The div version fails, because it keeps the second pane under the first one, even with a <div class="clear">.

Cheers for any advice!

PS: I can't seem to insert a block of html code in here, so I saved the file here: http://husnoo.com/scroll1.html (tested with chrome and safari, open the source code to see what I mean).

Upvotes: 1

Views: 3326

Answers (2)

Loktar
Loktar

Reputation: 35309

http://jsfiddle.net/loktar/Mbs3q/1/

div#wider {
    background-color: #ddd;
    width: 700px;
    float:left;
}

.second_pane{
  background-color: #eee;
  width: 300px;
  float: left;
}

Is that what your looking for? Floats them both to the left so they stick to each other, and are inline.

Upvotes: 2

david.wosnitza
david.wosnitza

Reputation: 763

give the right box float:right;and it will stick to the right side :)

Upvotes: 2

Related Questions