divs of 100% width next to one another

Question

I have up to 4 divs on the page that will have to 'sit next to' each other horizontally. Each div will have 100% width.

All, but the first one, will therefore appear off the page until I style it otherwise (ultimately using jQuery).

How can I style the divs in order to achieve this?

Markup:

<div class="wrapper">
    <div class="panel">
    </div>
    <div class="panel">
    </div>
    <div class="panel">
    </div>
    <div class="panel">
    </div>
</div>

What I've Tried

I've tried floating all of the divs left and setting the overflow of 'wrapper' to hidden. I've tried setting the display to inline-block of all the divs. I've tried position absolute on all the divs. I'm trying a combination of different things just hoping it'll work but there has to be a proper approach to this.

This might help: http://stackoverflow.com/questions/6597889/2-divs-both-100-next-to-each-other?rq=1 — chriz, Oct 30 '13 at 16:24
Heres a fiddle for you http://jsfiddle.net/chriz123/3CpL8/3/ — chriz, Oct 30 '13 at 16:28

score 1 · Answer 1 · answered Oct 30 '13 at 16:22

1

Tell me if some like this is what you want i use display:inline-block

http://jsfiddle.net/fdXLb/

Then i can do a better explanation.

answered Oct 30 '13 at 16:22

DaniP

37,813
8
65
74

score 0 · Answer 2 · answered Oct 30 '13 at 16:16

0

if one div has a width of 100% there will be no space for another div to align next to this one.

so I would say to align them use only 20% width.

25% works also for 4 divs but then you can not use any borders, margin or padding.

also you can set a min-width in px.

have a look at this example: http://jsfiddle.net/3CpL8/ may it helps

.wrapper > div {
    width:20%;
    background-color:orange;
    height:60px;
    float:left;
    min-width:100px;
    margin:5px;
}

answered Oct 30 '13 at 16:16

caramba

21,963
19
86
127

Thanks a lot for your suggestion, but I need each div to fill the screen width-wise or for it to at least appear as though it does. – Oct 30 '13 at 16:17
@deemac well then 25% and inside go for 100% http://jsfiddle.net/3CpL8/1/ does that the job? – caramba Oct 30 '13 at 16:21

score 0 · Answer 3 · answered Oct 30 '13 at 16:25

A nice trick is to use white-space: nowrap; to prevent divs moving to the next line. This is what your css would look like:

.wrapper {
  white-space: nowrap;
  overflow-x: hidden;
}

.wrapper > div {
  width:100%;
  background-color:red;
  height:60px;
  display: inline-block;
  min-width:100px;
  margin:5px;
}

Check out this Fiddle and use your browser's inspector it to see that the divs are still there, but off screen at the width you want. I assumed you'd want to continue using overflow-x: hidden; on the parent div so there wouldn't be an ugly scrollbar when doing the javascript side :)

divs of 100% width next to one another

3 Answers3