CSS, display inline and three divs

Question

I have this HTML code:

<body>
    <div id="div0" style="display:inline; background-color:green; width:100%">
        <div id="div1" style="display:inline; background-color:aqua;width:33%">&nbsp;</div>
        <div id="div2" style="display:inline; background-color:red;width:33%">&nbsp;</div>
        <div id="div3" style="display:inline; background-color:yellow;width:33%">&nbsp;</div>
    </div>
</body>

I want to fill the page with div1, div2 and div3 but they don't fill the entire width.

What it's happening?

score 14 · Accepted Answer · edited May 23 '17 at 10:29

Taken from display declaration:

display: inline means that the element is displayed inline, inside the current block on the same line. Only when it's between two blocks does the element form an 'anonymous block', that however has the smallest possible width.

You cannot give an inline element set width or height dimensions, they will be ignored. An element must have a display type of block to do that. Setting display: block however will not achieve what you want since each element will fill the entire width. float: left will cause them to stack to the left and also forces display: block.

<head>
<style type="text/css">
#wrap {
    width:100%;
}
#wrap:after {
    /* Prevent wrapper from shrinking height, 
    see http://www.positioniseverything.net/easyclearing.html */
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
#wrap .container {
    float: left;
    width:33%;
}
</style>
</head>
<body>
    <div id="wrap">
        <div class="container"> </div>
        <div class="container"> </div>
        <div class="container"> </div>
    </div>
</body>

Mmmmm, semantics

See answer from Phunky for further comments on floating.

Is it just me or does this answer results in exactly the same display as the code in the original question? I copied the text above into a text editor and saved the file as an HTML file after adding colours so we can see the different div's. It still does not fill the entire width of the window. — Gineer, Apr 30 '09 at 10:41
I'm new to css and your answer include many helpful references! Thanks! — Bush, Jul 27 '13 at 09:01
what about a fix as simple as changing `display: inline` to `display: inline-block`..... — Dan, Mar 07 '17 at 19:12

score 4 · Answer 2 · answered Apr 24 '09 at 09:53

Use relative positioning on the outer <div> and float the inner <div>s. Don't use display: inline.

<body>
  <div id="div0" style="border: 1px solid red; background-color: green; width: 100%; position: relative;">
    <div id="div1" style="background-color: aqua; width: 33.33%; float: left;">a</div>
    <div id="div2" style="background-color: red; width: 33.33%; float: left;">b</div>
    <div id="div3" style="background-color: yellow; width: 33.33%; float: left;">c</div>
  </div>
</body>

score 3 · Answer 3 · answered Apr 24 '09 at 09:51

3

display:inline shrink wraps the content. You might want to try float:left instead.

answered Apr 24 '09 at 09:51

annakata

74,572
17
113
180

score 3 · Answer 4 · answered Apr 25 '09 at 20:05

Rory Fitzpatrick more or less has the ideal answer for you, although there is no need to set pos:rel on the #wrapper as it is already a relative block element and will span the full width by default.

When you float a block element it mimics the alignment functionality of display:inline and in an ideal world we would have access to the very useful display:inline-block which would have done exactly what you was expecting it to do.

But one thing you should remember when floating elements is that they will only take up the space they require (this includes margin and padding) unless you set a fixed width.

This is why Rory used width:33%; as that is the best you are ever going to get :)

Ideally this would have been a comment on Rorys post, but i've not got a high enough post count yet.

Removed pos:rel and linked to this answer for you :) – roryf Apr 30 '09 at 08:08 — roryf, Apr 30 '09 at 08:08

Ólafur Waage · Answer 5 · 2009-04-24T09:55:07.667

1

<body>
    <div id="div0" style="float: left; background-color:green; width:100%">
        <div id="div1" style="float: left; background-color:aqua;width:33%">&nbsp;</div>
        <div id="div2" style="float: left; background-color:red;width:33%">&nbsp;</div>
        <div id="div3" style="float: left; background-color:yellow;width:33%">&nbsp;</div>
    </div>
</body>

This should work for you. And the reason IIRC is that display: inline does not take % width.

edited Apr 24 '09 at 09:55

answered Apr 24 '09 at 09:49

Ólafur Waage

68,817
22
142
198

You might also want float: left on div0 – Greg Apr 24 '09 at 09:51

score 0 · Answer 6 · answered Jan 03 '14 at 18:02

Instead of using float you could use flexbox for a more responsive resizing. Also this forces the elements to remain in a row.

Example:

<head>
    <style type="text/css">
    #wrap {
        width:100%;
        display:inline-flex;
    }
    #wrap:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
        display: inline-flex;
        flex-direction: row;    
    }
    .container1 {
        width:20%;
    }
    .container2{
        width:80%;
    }
    </style>
</head>
<body>
<div id="wrap">
    <div class="container1"> </div>
    <div class="container2"> </div>
</div>

score -1 · Answer 7 · edited May 23 '17 at 12:18

The best way to accomplish this, contrary to all the answers given before, can be found referencing the answer to this question:

3 inline-block divs with exactly 33% width not fitting in parent

The quickest and easiest way is not the prettiest to look at (putting your div's on the same line to remove the automatic single white space provided normally), but will work tremendously for what you want. The answer I am referencing list plenty of other way that, in my opinion, are better than any provided before, and address the true problem you are having.

Here is the code working exactly how you'd like, and a link to the fiddle!

<body>
<div id="div0" style="float: left; background-color:green; width: 100%;">
    <div id="div1" style="margin: 0px; display: inline-block; background-color:aqua;width:33.33%">&nbsp;</div><div id="div2" style="margin: 0px; display: inline-block; background-color:red;width:33.33%">&nbsp;</div><div id="div3" style="margin: 0px; display: inline-block; background-color:yellow;width:33.33%">&nbsp;</div> 
</div>

https://jsfiddle.net/stopitdan/uz1zLvhx/

CSS, display inline and three divs

7 Answers7