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开发者_StackOverflow中文版 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!
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/
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/
Try display:inline-block
try
position:relative float:left
Have you had a look e.g. here: How to float 3 divs side by side using CSS
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,
G
精彩评论