3

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!

Singleton
  • 3,701
  • 3
  • 24
  • 37
greenimpala
  • 3,777
  • 3
  • 31
  • 39

6 Answers6

2

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/

Bazzz
  • 26,427
  • 12
  • 52
  • 69
  • This is not safe cross browser. – davidbuttar Dec 09 '10 at 11:47
  • Just for me as a learning opportunity, can you tell me in which browser this doesn't work as intended? Thank you. – Bazzz Dec 09 '10 at 12:19
  • Support in IE is dodgy, not supported in firefox 3.0 or lower. I'm not saying you can't use it but you need to be careful and make sure it works on all browsers you support otherwise you'll need to use floats, and make sure you don't have any users using older versions of Firefox. – davidbuttar Dec 09 '10 at 12:30
1

Try display:inline-block

Ives.me
  • 2,359
  • 18
  • 24
1

try

position:relative float:left

Padmanabha Vn
  • 624
  • 1
  • 14
  • 33
1

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/

davidbuttar
  • 676
  • 4
  • 12
  • No a div will automatically fill to 100% the width of it's parent which in this case is 505px; You could just set it to something so big it will always have enough room for your divs. – davidbuttar Dec 09 '10 at 11:46
  • That's what I've gone for, seems a bit messy to oversize the container but it's working. – greenimpala Dec 09 '10 at 11:53
  • It is I suppose but that's how's done, take a look at http://sorgalla.com/jcarousel/ for example. You could use javascript to size the container to just enough for it's contained divs if you really wanted to. – davidbuttar Dec 09 '10 at 12:00
  • Yeah good point, when I get round to the .js I'll most likely add that in. – greenimpala Dec 09 '10 at 12:22
0

Have you had a look e.g. here: How to float 3 divs side by side using CSS

Community
  • 1
  • 1
auralbee
  • 8,741
  • 4
  • 29
  • 36
0

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

dartacus
  • 654
  • 1
  • 5
  • 16