469,626 Members | 1,820 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,626 developers. It's quick & easy.

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

Greetings. I have a couple of questions concerning CSS layouts, as
apposed to the old <tablemethod for creating layouts [1]. Even after
spending the last few days searching all over Google Groups, I haven't
not been able to find a solution to my collective dilemma, and I hope
some of you fine folks here in these neck of the UseNet woods might be
able to share some wisdom with a fellow coder.

My questions are in regard to what are the proper techniques for what I
want to accomplish, and also I urge anyone who is wishes, to critique of
my code at will. I welcome this. Even as a programmer and technologist
for some time [2], I am not afraid to admit there are still many things
I have yet to learn :-)
Consider this skeleton code I have written:
Skeleton Code, re-formatted for 72 column viewing
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>Div Test</title>

<style type="text/css">
body { text-align: center;
color: #000000;
background-color: #FFFFFF; }

#wrap { padding: 10px;
border: #000000 2px solid; }

#header { text-align: center;
border: #CCCCCC 2px solid;
padding: 3px; }

#body { ; }

#footer { text-align: center;
border: #CCCCCC 2px solid;
padding: 3px; }

#content { border: #CCCCCC 2px solid;
padding: 10px; }

#content .item { text-align: left;
border: #000000 1px solid;
padding: 3px;
overflow: auto; }

#left { ; }

..sidebar { border: #CCCCCC 2px solid;
padding: 10px;
overflow: auto; }

..sidebar .menu { border: #000000 1px solid;
padding: 4px 10px 4px 10px; }

..sidebar .menu .item { text-align: center;
border: #CCCCCC 0px solid;
border-bottom-width: 2px;
padding: 3px; }

..sidebar .menu .item-last { text-align: center;
border: #CCCCCC 0px solid;
padding: 3px; }

..spacer-v { padding: 10px; }
</style>

</head>

<body>

<div id="wrap">

<div id="header">
Title
</div>

<div class="spacer-v"><!-- No Content --></div>

<div id="body" align="left">

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

<div id="main-menu" class="menu">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item-last">Item 3</div>
</div>

</div>

<div id="content" style="margin-left: 175px;">

<div class="item">
Some Content.....
</div>

<div class="spacer-v"><!-- No Content --></div>

<div class="item">
Some more<br>
content
</div>

</div>

</div>

<div class="spacer-v"><!-- No Content --></div>

<div id="footer">
Footer
</div>

</div>

</body>

</html>
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
Now, these are my questions:
1) Currently, as written, the #content <divsits 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>?

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 <divinstead of push it's
space worth like it does as written above.

In other words, I want essentially how it is currently, but
with the #left and #content lined up vertically.

2) Secondly, I am also having great difficulty try to find a way,
using CSS, to cause the #left and #content to expand downward to
consume all available space, just like a two column <tablewould.

In other words:

(Figure 1)
+---------------------------+
| +-----------------------+ |
| | Title | |
| +-----------------------+ |
| |
| +-----+ +---------------+ |
| | M | | contents... | |
| | E | | ... | |
| | N | | ... | |
| | U | | ... | |
| | | | ... | |
| | | | ... | |
| | | | ... | |
| | | | end content | |
| +-----+ +---------------+ |
| |
| +-----------------------+ |
| | Footer | |
| +-----------------------+ |
+---------------------------+
As well as this:
(Figure 2)
+---------------------------+
| +-----------------------+ |
| | Title | |
| +-----------------------+ |
| |
| +-----+ +---------------+ |
| | M | | contents... | |
| | E | | ... | |
| | N | | end content | |
| | U | | | |
| | | | | |
| | etc | | | |
| | etc | | | |
| | ... | | | |
| +-----+ +---------------+ |
| |
| +-----------------------+ |
| | Footer | |
| +-----------------------+ |
+---------------------------+
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.
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.)

Thanks immensely for any help and guidance.
* * * * * * * * * * * * * * * * * *

[1] Like the all too well known 90-100-ish% width <table>/page
wrapper, which is what I had grown accustomed to over the
years since I first started HTML in 1997, as it was
commonly employed back in those days, albiet I do
understand the reason.

[2] I like to think of my self as some what experienced, having
learned a lot since first diving into programming in the mid
1990's, in addition to having grown up with computers.

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

--
Stan

* If emailing a reply, please use stan^blz/hmrprint/com,
* after properly converting it into a legal address :-)
Aug 23 '06 #1
5 1616
Els
Stan R. wrote:
Skeleton Code, re-formatted for 72 column viewing
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>Div Test</title>

<style type="text/css">
body { text-align: center;
color: #000000;
background-color: #FFFFFF; }

#wrap { padding: 10px;
border: #000000 2px solid; }

#header { text-align: center;
border: #CCCCCC 2px solid;
padding: 3px; }

#body { ; }

#footer { text-align: center;
border: #CCCCCC 2px solid;
padding: 3px; }

#content { border: #CCCCCC 2px solid;
padding: 10px; }

#content .item { text-align: left;
border: #000000 1px solid;
padding: 3px;
overflow: auto; }

#left { ; }

.sidebar { border: #CCCCCC 2px solid;
padding: 10px;
overflow: auto; }

.sidebar .menu { border: #000000 1px solid;
padding: 4px 10px 4px 10px; }

.sidebar .menu .item { text-align: center;
border: #CCCCCC 0px solid;
border-bottom-width: 2px;
padding: 3px; }

.sidebar .menu .item-last { text-align: center;
border: #CCCCCC 0px solid;
padding: 3px; }

.spacer-v { padding: 10px; }
</style>

</head>

<body>

<div id="wrap">

<div id="header">
Title
</div>

<div class="spacer-v"><!-- No Content --></div>
You could replace that spacer by a top margin on the next div.
Or a bottom margin on the previous div.
<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 <bodynor a left margin on div#body,
there is no need to align it left.
<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.
<div id="main-menu" class="menu">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item-last">Item 3</div>
</div>

</div>

<div id="content" style="margin-left: 175px;">

<div class="item">
Some Content.....
</div>

<div class="spacer-v"><!-- No Content --></div>
This spacer should be replaced by a bottom margin on the previous div,
or a top margin on the next div.
<div class="item">
Some more<br>
content
</div>

</div>

</div>

<div class="spacer-v"><!-- No Content --></div>
This spacer should be... (etc)
<div id="footer">
Footer
</div>

</div>

</body>

</html>
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

Now, these are my questions:

1) Currently, as written, the #content <divsits 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 <divinstead of push it's
space worth like it does as written above.
That's solved by giving the footer the clear property: clear:both;
In other words, I want essentially how it is currently, but
with the #left and #content lined up vertically.

2) Secondly, I am also having great difficulty try to find a way,
using CSS, to cause the #left and #content to expand downward to
consume all available space, just like a two column <tablewould.
[snip]
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'.
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 ;-)

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/
Aug 23 '06 #2
Els wrote:
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/c..._test_0001.htm ]
><div id="wrap">

<div id="header">
Title
</div>

<div class="spacer-v"><!-- No Content --></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 :-)

> <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 <bodynor 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)
> <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]
>Now, these are my questions:

1) Currently, as written, the #content <divsits 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 <divinstead 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]
>
> 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.
>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
Aug 23 '06 #3
Els
Stan R. wrote:

[align="left"]
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/
Aug 23 '06 #4
Stan R. wrote:
Els wrote:
>Stan R. wrote:
[big snip - original avaialble here: http://tinyurl.com/po2p7 ]
>> 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 :-)
Aug 24 '06 #5
Els
Stan R. wrote:

[equal height columns]
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/
Aug 24 '06 #6

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

8 posts views Thread by Daniel Hansen | last post: by
61 posts views Thread by Toby Austin | last post: by
1 post views Thread by Mel | last post: by
19 posts views Thread by Kim André Akerø | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.