how does with:auto work with variable child's?

[alfredo_uy]

Hi All,

I’m trying to achieve the following layout without luck:

on the left: left-sidebar.
on the right: a content box using the rest of the screen with a header and another content box inside.

The issue is that I want the header to place all the width that the below content box has, can you guys help me with that?

Here is what I’m trying to do: http://jsfiddle.net/o78eodLf/

The issue is that the #header width that is 100% is not being assigned to the width of its container that is auto (but much bigger).

[Paulie_D]

It’s not clear to me what you are trying to do.

Why such large widths?

[Senff]

Having a width:auto assigned to it, any element will either be 0 wide (if it doesn’t contain anything), or take up as much space as there’s available on the screen.

It will not “grow” (in width) outside the viewport based on it’s contents…unless you give it a specific width.

So on a screen that’s 1000 wide, rightContent (and right-content-viewport) will simply take up 800 pixels, even if its contents are wider than that. That width will be the “100%” baseline.

So if rightContent contains anything that’s more than 100%, then the 100% header will still be 800.

I see your problem though, and I believe there’s not much to do about that than to use some Javascript/jQuery. Detect the widest element in your right variable content, and assign that width to right-content-viewport.

[Author]

Posts