Reputation: 3976

Stacking Divs side by side in CSS

I didn't want to resort to asking here but after hours of frustration I feel I have to!

I have two (could be more) divs that I want side by side. Their parent div has a fixed width and overflow:hidden so we can see at most one div at a time. The problem being is that they will not stack side by side! I've tried float:left and display:inline to no avail.

there is a JSFiddle example I made here

Any help would be much appreciated!

Upvotes: 3

Answers (6)

davidbuttar

Reputation: 676

You needed to have div

#tab_container{
    width:2000px;
}

Which then gives your floats enough space to float side by side, currently they don't have enough room and so default float behaviour forces them to the next line.

http://jsfiddle.net/QBhmF/10/

Upvotes: 1

Bazzz

Reputation: 26942

Each of them divs needs display:inline-block and the parent needs: white-space:nowrap so they stay all on one line.

Example:

http://jsfiddle.net/QBhmF/15/

Upvotes: 2

dartacus

Reputation: 644

A boilerplate solution for this Ioff the top of my head) could be as follows:

<div class = 'container'>

<div class = 'floater'>Some text</div>
<div class = 'floater'>Some other text</div>

<div class = 'clearout'></div>

</div>

div.container {

width: 400px;
border: 1px solid blue;

}

div.floater {

float: left; 
width: 48%;
border: 1px solid red;
margin: 2px;

}

div.clearout {

clear: both; 
height: 0px; 
visibility: hidden; 
width: 100%;

}

Any margins applied to floaters could mess up the layout. Floaters could also have absolute dimensions rather than percentages, if you can predict their size.

HTH,

Upvotes: 0