Stylesheets - full height columns

Author

full height columns

Jeff

2007-10-22, 6:18 pm

Nearly identical post in alt.www.webmaster, where it is languishing.

I'd like a column that flows the full height of a page, even if you
scroll down.

If I did this:

<div style="width: 100px;height=100%;background-color: red">
side bar
</div>
<div style="float: left; background-color: #fff">
main content, enough to have vertical scroll bars on the browser
</div>

I'd have problems after I scrolled down with content wrapping around.

What do I need to do? Seems like I should know this, but... I'm
drawing a blank.

What's the support level of inline-block these days?

Jeff

Ben C

2007-10-22, 6:18 pm

On 2007-10-22, Jeff <dont_bug_me@all.uk> wrote:
> Nearly identical post in alt.www.webmaster, where it is languishing.

I did see it but couldn't really understand what you were asking.

> I'd like a column that flows the full height of a page, even if you
> scroll down.
>
> If I did this:
>
><div style="width: 100px;height=100%;background-color: red">
> side bar
></div>
><div style="float: left; background-color: #fff">
> main content, enough to have vertical scroll bars on the browser
></div>

This puts the main content after the sidebar, which is what I don't
get-- surely the sidebar is supposed to be at the side?

> I'd have problems after I scrolled down with content wrapping around.
>
> What do I need to do? Seems like I should know this, but... I'm
> drawing a blank.

Probably put the sidebar inside a container that contains both it and
the main content. The container's height will grow to fit the content.
Then you just have to make the sidebar fill its container, which can be
done with absolute positioning (position: relative on the container,
position: absolute; top: 0; bottom: 0 on the sidebar).

Height: 100% of an auto-height container is no good-- it will be
ignored. But you can locate a positioned box to the top and bottom edges
of an auto-height container.

> What's the support level of inline-block these days?

Supported in Opera, Konqueror/Safari. OKish in IE7 I heard so long as
you set widths on the inline-blocks. Completely and utterly broken in
Firefox.

Jeff

2007-10-22, 6:18 pm

Ben C wrote:

> On 2007-10-22, Jeff <dont_bug_me@all.uk> wrote:
>
>
>
> I did see it but couldn't really understand what you were asking.

Two columns. Right column doesn't wrap below left column. Exactly what
you would have with this:

<table>
<tr>
<td>left column</td>
<td>content here that doesn't wrap below left column</td>
</tr></table>
>
>
>
>
> This puts the main content after the sidebar, which is what I don't
> get-- surely the sidebar is supposed to be at the side?

Sorry, left out the float: left
>
>
>
>
> Probably put the sidebar inside a container that contains both it and
> the main content. The container's height will grow to fit the content.
> Then you just have to make the sidebar fill its container, which can be
> done with absolute positioning (position: relative on the container,
> position: absolute; top: 0; bottom: 0 on the sidebar).

Not sure what you mean. Are you talking about positioning relative both
coolumns? The sidebar at left: 0px, and the main at say left: 100px and
putting both those in a container div?

Jeff
>
> Height: 100% of an auto-height container is no good-- it will be
> ignored. But you can locate a positioned box to the top and bottom edges
> of an auto-height container.
>
>
>
>
> Supported in Opera, Konqueror/Safari. OKish in IE7 I heard so long as
> you set widths on the inline-blocks. Completely and utterly broken in
> Firefox.

Jeff

2007-10-22, 6:18 pm

Ben C wrote:

Well, I haven't read this group for sometime and see that is a big
mistake.

The solution is just three threads up!

Sorry to have failed my net etiquitte!

Jeff

> On 2007-10-22, Jeff <dont_bug_me@all.uk> wrote:
>
>
>
> I did see it but couldn't really understand what you were asking.
>
>
>
>
> This puts the main content after the sidebar, which is what I don't
> get-- surely the sidebar is supposed to be at the side?
>
>
>
>
> Probably put the sidebar inside a container that contains both it and
> the main content. The container's height will grow to fit the content.
> Then you just have to make the sidebar fill its container, which can be
> done with absolute positioning (position: relative on the container,
> position: absolute; top: 0; bottom: 0 on the sidebar).
>
> Height: 100% of an auto-height container is no good-- it will be
> ignored. But you can locate a positioned box to the top and bottom edges
> of an auto-height container.
>
>
>
>
> Supported in Opera, Konqueror/Safari. OKish in IE7 I heard so long as
> you set widths on the inline-blocks. Completely and utterly broken in
> Firefox.

dorayme

2007-10-22, 10:18 pm

In article <13hpnkseeqsmk60@corp.supernews.com>,
Jeff <dont_bug_me@all.uk> wrote:

> Ben C wrote:
>
> Well, I haven't read this group for sometime and see that is a big
> mistake.
>
> The solution is just three threads up!
>
> Sorry to have failed my net etiquitte!
>
> Jeff

Ben C did not write this. Try to quote properly. If you have
found a solution to a problem, share it with others, "three
threads up" is not a good reference.

--
dorayme

Jeff

2007-10-23, 6:17 pm

dorayme wrote:
> In article <13hpnkseeqsmk60@corp.supernews.com>,
> Jeff <dont_bug_me@all.uk> wrote:
>
>
>
>
> Ben C did not write this. Try to quote properly.

Sorry, I don't know what happened there.

> If you have
> found a solution to a problem, share it with others, "three
> threads up" is not a good reference.

Well, I really didn't feel the need for a message ID, and even that
solution (and you are posting in that thread) has problems.

You'd think this was CIWAH. Lighten up.

Jeff
>

Jonathan N. Little

2007-10-23, 6:17 pm

Jeff wrote:
> dorayme wrote:

>
>
> Well, I really didn't feel the need for a message ID, and even that
> solution (and you are posting in that thread) has problems.

Well actually that would make sense. See: http://message-id.net/

Depending on ones news server, client, settings, etc., the thread could
be 3 up, 3 down or not present at all! That is why folks get on your
case about quoting and references.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com