Aligning div's horizontally

[schyffe]

Hi, I'd like to have a 3 divs aligned horizontally like this:

| <-         div1         -> | |-div2-| |-div3-|

All 3 of them should together be 100% in width. div2 and div3 has a fixed size, and I'd like div1 to expand to make the total width 100%. If anyone know how to make div1 have a dynamic width (not setting the width in percentages), I'd like to know. An example would be really nice.

However I try to make this, I get them aligned up like this:

|-div1-| |-div2-| |-div3-|

, div1 isn't expanding.

Thanks

[Kenny]

a div will always be 100% of the available width and, always break on closing.
You'll have to use them in a table and, why bother when you can ID the table cell.

<TABLE BORDER="1" style="width:100%">
<TBODY>
<TR>
<TD> @ </TD>
<TD style="width:100px"> @ </TD>
<TD style="width:100px"> @ </TD>
</TR>
</TBODY>
</TABLE>

[schyffe]

So there is no way to accomplish this using divs? Since tables shouldn't be used for design, and this is not tabular data, I assumed there was a way to do this with divs.

[Kenny]

I don't see any other way to do it.

<div style="border:1px solid blue;text-align:right;">one
<div style="border:1px solid yellow;text-align:right;">two
<div style="border:1px solid red;text-align:right;width:300px">three
<div style="border:1px solid green;text-align:right;width:150px">four
</div>
</div>
</div>
</div>

[mwinter]

Hi, I'd like to have a 3 divs aligned horizontally like this:

| <-         div1         -> | |-div2-| |-div3-|

All 3 of them should together be 100% in width. div2 and div3 has a fixed size, and I'd like div1 to expand to make the total width 100%.

You can either float the second and third elements to the right, or you can absolutely-position them and use the right box offset property. The latter is probably the more practical option as I'd expect these would occur later in the document. In either case, add a right margin to the first element, the width of which spans the two right-most elements.

A skeleton example:

body {
    margin: 0;
    padding: 0;
}
.a, .b, .c {
    border: 1px solid;
}
.a {
    margin-right: 11em; /* 5em * 2 + 0.5em * 2 */
}
.b, .c {
    position: absolute;
    top: 0;
    width: 5em;
}
.b {
    right: 5.5em;
}
.c {
    right: 0;
}

<div class="a">1</div>
<div class="b">2</div>
<div class="c">3</div>

Do be sure to use better class names: 'content' not 'a', for example; 'navigation' not 'b', perhaps.

Mike

[Kenny]

Hey, that's pretty good. Where can I learn more about "em" and other things like that?

[mwinter]

Where can I learn more about "em" and other things like that?

Any decent CSS tutorial should the different length units. The example I posted doesn't have to use em lengths, but they are usually preferable when setting the dimensions of elements that contain text. The em unit is proportional to the font size - 1em equals the height of the font - allowing the element to resize with different font sizes. Not everyone will be viewing the document with text at the same size - any user can override such things - and a fixed size can cause problems such as overflow.

You might try HTML Dog, though I don't go much on their approach to HTML - XHTML is not suitable for the Web in general - and their suggested PHP is broken in that regard. Still, no tutorial site I've seen is perfect.

The CSS 2 Specification also describes the properties, their values, and other such details.

Mike