Re: Question about CSS layouts (with a sidebar) and <div> heights...

#1

Els wrote:

Quote:

Stan R. wrote:

Skeleton Code, re-formatted for 72 column viewing
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

[snip - original avaialble here: http://tinyurl.com/po2p7 ]
[Or external version that corrasponds with original post:
http://dev.hmrprint.com/tests/html/css_layout_test_0001.htm ]

Quote:

div id="wrap"

div id="header"
Title
/div

div class="spacer-v"></div

You could replace that spacer by a top margin on the next div.
Or a bottom margin on the previous div.

True, I could of done that and will consider doing it as you suggest.
This is just my rough-draft, if you will :-)

Quote:

div id="body" align="left"

align="left" is not CSS, and not part of Strict HTML afaik.
If you don't set a text-align on <body> nor a left margin on div#body,
there is no need to align it left.

The only reason I even had it in there was for the sake of my example,
as wit hout the float declaration on #left, #left would appear centered
in IE6 for some reason, rather than being aligned to the left, as is the
case of Mozilla (1.8b) and FF (1.5.0.6)

Quote:

div id="left" class="sidebar" style="width: 141px;"

Move that style into the style block in the <head>, so that you can
change it for all pages at once if needed. Add float:left; to those
styles.

Yes that was my plan. I had some styles inlined for ease of testing, but
it is a good tip nevertheless.

[snip]

Quote:

Now, these are my questions:

1) Currently, as written, the #content <div> sits on the vertical
plane just after the bottom of the #left <div>, though #content,
through the use of margin-left, is offset to the right of #left.

The question here is what is the best way to get #left and
#content's top sides to be equal on the vertical plane (so
that are lined up, effectively side by side, kind of like a
two column <table>?

Float the left column left. the right column will then automagically
go up to sit next to the left column.

I've considered using { float: left; } but this seems problematic
as when #content's height is less than that of #left, then #left
ends up over lapping the #footer <div> instead of push it's
space worth like it does as written above.

That's solved by giving the footer the clear property: clear:both;

Thank you, that works perfectly. I re-floated #left, well, left, and
added the clear declaration to #footer and no more over lapping :-) Much
appreciated.

[snip]

Quote:

In a nut shell: In fig. 1, #content has a greater height then
#left since #content has more, well, content

In fig. 2, it's the opposite, #left has the greater height.

So, hat I want to happen is the bottoms to "push" downward as
much as possible to fill any void between them and #footer.

I take it you want different background colours for the different
columns, and to extend them all the way to the footer. There are
several ways to fake that, each with its own (dis)advantages. Search
Google for 'equal height columns'.

Will do, than kyou.

Quote:

Those are my questions. Again, any critiques of my base code I have
written are more than welcome, as pure-CSS is sort of a new step for
me, at least in the layout department (like many, I have been using
CSS for years for many formatting purposes more and more.)

Some comments are inline in your code :-)

Use a validator to check for obvious errors: http://validator.w3.org/
- it would have found the align="left" on your div ;-)

Thank you. I only put that in when testing because for some reason,
without the float, IE6 would center the #left <div>, while Mozilla and
Firefox would aligned it to the left.

--
Stan

#2

Stan R. wrote:

[align="left"]

Quote:

Thank you. I only put that in when testing because for some reason,
without the float, IE6 would center the #left <div>, while Mozilla and
Firefox would aligned it to the left.

IE centers block content (divs, paragraphs..) when giving the parent
'text-align:center'.
It shouldn't, of course, but it does.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

#3

Stan R. wrote:

Quote:

Els wrote:
Stan R. wrote:

[big snip - original avaialble here: http://tinyurl.com/po2p7 ]

Quote:

In a nut shell: In fig. 1, #content has a greater height then
#left since #content has more, well, content

In fig. 2, it's the opposite, #left has the greater height.

So, hat I want to happen is the bottoms to "push" downward as
much as possible to fill any void between them and #footer.

I take it you want different background colours for the different
columns, and to extend them all the way to the footer. There are
several ways to fake that, each with its own (dis)advantages. Search
Google for 'equal height columns'.

Will do, thank you.

Ok I have been searching and searching and searching the bajesus out of
the Google Groups archives, but one of the road blocks I keep running
into is many people post potential solutions in external links, but so
many of them are broken [1].

It seems to me that there is no easy way to do this (arguably an
advantage for <table>-based layouts, despite how improper a use it is -
actually if IE supported display:table* properties, I uspect this
wouldn't be as much a problem.)

So, I once again find my self asking if the expects here can offer any
good solution to this dilema.

And once again, my humble thanks for any assistance.

* * * * * * * * * * * * * * * * * *

[1] Especially links in posts over a couple years old. I don't
mind being given a link, but isn't it infinately more
beneficial in the long run to also provide solutions in the
post them selves instead of only supply externa links? I
think having both might be more useful.

* * * * * * * * * * * * * * * * * *

--
Stan

* If emailing a reply, please use stan^blz/hmrprint/com,
* after properly converting it into a legal address :-)

#4

Stan R. wrote:

[equal height columns]

Quote:

It seems to me that there is no easy way to do this (arguably an
advantage for <table>-based layouts, despite how improper a use it is -
actually if IE supported display:table* properties, I uspect this
wouldn't be as much a problem.)

So, I once again find my self asking if the expects here can offer any
good solution to this dilema.

One of the easier ones to implement (imo of course):
http://www.pixy.cz/blogg/clanky/css-3col-layout/

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Re: Question about CSS layouts (with a sidebar) and <div> heights...

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)

Re: Question about CSS layouts (with a sidebar) and <div> heights... - 08-23-2006 , 03:08 AM

Re: Question about CSS layouts (with a sidebar) and <div> heights... - 08-23-2006 , 03:43 AM

Re: Question about CSS layouts (with a sidebar) and <div> heights... - 08-24-2006 , 03:57 AM

Re: Question about CSS layouts (with a sidebar) and <div> heights... - 08-24-2006 , 04:37 AM