ansaurus

Question

Answer 1

+1 A:

<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.

Ólafur Waage 2009-04-24 09:49:49

You might also want float: left on div0

Greg 2009-04-24 09:51:46

Done :) Thanks.

Ólafur Waage 2009-04-24 09:53:36

Answer 2

+2 A:

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

annakata 2009-04-24 09:51:00

Answer 3

+1 A:

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>

Tomalak 2009-04-24 09:53:56

Answer 4

+4 A:

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.

roryf 2009-04-24 10:44:00

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 2009-04-30 10:41:12

What browser? Works fine for me in FF3 and IE7.

roryf 2009-04-30 15:59:43

Answer 5

+1 A:

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.

Phunky 2009-04-25 20:05:14

Removed pos:rel and linked to this answer for you :)

roryf 2009-04-30 08:08:51

ansaurus

tags:

views:

answers:

CSS, display inline and three divs

related questions