HaydnH
asked on
CSS - match height of menu div with content div??
Hi All,
I'm trying to create a 2 column layout where the height of the left hand div stretches to match the height of the right hand div's contents. Could somebody explain how I can do this?
Here's an example to explain what I mean:
<HTML>
<HEAD>
<TITLE>Some Title</TITLE>
<STYLE>
HTML, BODY {
max-width: 750px;
min-width: 530px;
margin: 0px;
padding: 0px;
background-color: #FFFFFF;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
#header {
border-bottom: #000000 2px solid;
width: 100%;
height: 75px;
background-color: #3333CC;
}
#menu {
float: left;
border-right: #000000 2px solid;
width: 100px;
background-color: #CC3333;
}
#content {
float: left;
}
</STYLE>
</HEAD>
<BODY>
<DIV ID="header">
header
</DIV>
<DIV ID="menu">
menu
</DIV>
<DIV ID="content">
Content line 1<BR>
Content line 2<BR>
<---- Menu DIV should stretch down here due to content length!
</DIV>
</BODY>
</HTML>
Haydn.
I'm trying to create a 2 column layout where the height of the left hand div stretches to match the height of the right hand div's contents. Could somebody explain how I can do this?
Here's an example to explain what I mean:
<HTML>
<HEAD>
<TITLE>Some Title</TITLE>
<STYLE>
HTML, BODY {
max-width: 750px;
min-width: 530px;
margin: 0px;
padding: 0px;
background-color: #FFFFFF;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
#header {
border-bottom: #000000 2px solid;
width: 100%;
height: 75px;
background-color: #3333CC;
}
#menu {
float: left;
border-right: #000000 2px solid;
width: 100px;
background-color: #CC3333;
}
#content {
float: left;
}
</STYLE>
</HEAD>
<BODY>
<DIV ID="header">
header
</DIV>
<DIV ID="menu">
menu
</DIV>
<DIV ID="content">
Content line 1<BR>
Content line 2<BR>
<---- Menu DIV should stretch down here due to content length!
</DIV>
</BODY>
</HTML>
Haydn.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
OOPS sorry:
<script type="text/javascript">
function sizeRows() {
H = Math.max(document.getEleme ntById('co ntent').of fsetHeight );
document.getElementById('c ontent').s tyle.heigh t = H+'px';
}
</script>
Should be:
<script type="text/javascript">
function sizeRows() {
H = Math.max(document.getEleme ntById('co ntent').of fsetHeight );
document.getElementById('m enu').styl e.height = H+'px';
}
</script>
MaB
<script type="text/javascript">
function sizeRows() {
H = Math.max(document.getEleme
document.getElementById('c
}
</script>
Should be:
<script type="text/javascript">
function sizeRows() {
H = Math.max(document.getEleme
document.getElementById('m
}
</script>
MaB
The link to that Q:
https://www.experts-exchange.com/questions/20934500/Accessing-row-heights-with-the-DOM.html
MaB
https://www.experts-exchange.com/questions/20934500/Accessing-row-heights-with-the-DOM.html
MaB
ASKER
I've seen the "using a background image" method before - but surely there has to be a nicer solution. Lets say that I wanted to allow the site's users to personalise the sites colours, I don't want 16 million odd images on my server for each colour. OK - this is unlikely to happen, but, I'm beginning to think that using tables for the layout might be a better solution than CSS... YUCK!
Re: the javascript solution - unfortunately this has to be workable with javascript =(
Haydn.
Re: the javascript solution - unfortunately this has to be workable with javascript =(
Haydn.
ASKER
"unfortunately this has to be workable with javascript =("
Errrr without even =/
Errrr without even =/
Then you should be able to do this:
document.getElementById('m enu').styl e.height = Math.max(document.getEleme ntById('co ntent').of fsetHeight )' px';
I'm not sure if this works in a separate stylesheet though. You might need to add it in your page.
MaB
document.getElementById('m
I'm not sure if this works in a separate stylesheet though. You might need to add it in your page.
MaB
ASKER
errrr isn't that still javascript???
ASKER
Oh, and a quick note on the background image method,
Lets assume I have a max-width property set for the content div, effictively I would have 3 columns, menu, content, and blank... using the background image method would set the blank column to the menu colour - it won't allow it to be white (or other chosen colour).
Haydn - getting frustrated!
Lets assume I have a max-width property set for the content div, effictively I would have 3 columns, menu, content, and blank... using the background image method would set the blank column to the menu colour - it won't allow it to be white (or other chosen colour).
Haydn - getting frustrated!
Yeah, you're right....Excuse me for having tunnelvision ;-)
MaB
MaB
The only way to do it without javascript (AFAIK) is fixed height or putting the divs in tablecells as you already suggested.
MaB
MaB
...or it might work to put div in divs....
#1 {
width: 80%;
}
<div id="1">
<DIV ID="menu">
menu
</DIV>
<DIV ID="content">
Content line 1<BR>
Content line 2<BR>
<---- Menu DIV should stretch down here due to content length!
</DIV>
</div>
MaB
#1 {
width: 80%;
}
<div id="1">
<DIV ID="menu">
menu
</DIV>
<DIV ID="content">
Content line 1<BR>
Content line 2<BR>
<---- Menu DIV should stretch down here due to content length!
</DIV>
</div>
MaB
...and set
#menu {
height: 100%;
}
#menu {
height: 100%;
}
ASKER
I tried that, unfortunately the menu div's height won't inherit the hieght of the container div for some reason (GRRR!).
I've just been trying another solution by placing the content div first, with a 100px left border of the correct colour, then placing the menu div over the top... which kind of works, but unfortunately the width of the content div (100%) + the border width (100px) makes the content div width wider than the header div! Also it removes the possibility of have a border between the menu and the content div.
Oh well - thought I had it for a second, back to the drawing board I guess =(
I thought CSS was meant to make life easier???? =/
Haydn.
I've just been trying another solution by placing the content div first, with a 100px left border of the correct colour, then placing the menu div over the top... which kind of works, but unfortunately the width of the content div (100%) + the border width (100px) makes the content div width wider than the header div! Also it removes the possibility of have a border between the menu and the content div.
Oh well - thought I had it for a second, back to the drawing board I guess =(
I thought CSS was meant to make life easier???? =/
Haydn.
>>I thought CSS was meant to make life easier???? =/
LOL
It seems like anything that's intended to make life easier just gives you a new set of unexplored problems....
MaB
LOL
It seems like anything that's intended to make life easier just gives you a new set of unexplored problems....
MaB
ASKER
o.O Actually, it is possible to use the border-left of the content div to fill the menu bar's color!!! And it works quite nicely!
Here's an example using some foo text for the content:
<HTML>
<HEAD>
<TITLE>Some Title</TITLE>
<STYLE>
HTML, BODY {
max-width: 750px;
min-width: 530px;
margin: 0px 7px 0px 0px;
padding: 0px;
background-color: #FFFFFF;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
text-align: justify;
font-size: 14px;
}
#header {
float: left;
border-bottom: #000000 2px solid;
margin: 0px;
width: 100%;
height: 75px;
background-color: #3333CC;
}
#menu {
position: absolute;
top: 77px;
left: 0;
padding: 0px;
width: 100px;
background-color: #CC3333;
}
#content {
float: left;
margin: 0px;
padding: 15px;
border-left: #CC3333 100px solid;
}
</STYLE>
</HEAD>
<BODY>
<DIV ID="header">
Some header
</DIV>
<DIV ID="content">
Insert long foo text here<br>
And watch the menu scroll down<br><br><br><br><br><b r>
<-----
</DIV>
<DIV ID="menu">
menu
</DIV>
</BODY>
</HTML>
Here's an example using some foo text for the content:
<HTML>
<HEAD>
<TITLE>Some Title</TITLE>
<STYLE>
HTML, BODY {
max-width: 750px;
min-width: 530px;
margin: 0px 7px 0px 0px;
padding: 0px;
background-color: #FFFFFF;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
text-align: justify;
font-size: 14px;
}
#header {
float: left;
border-bottom: #000000 2px solid;
margin: 0px;
width: 100%;
height: 75px;
background-color: #3333CC;
}
#menu {
position: absolute;
top: 77px;
left: 0;
padding: 0px;
width: 100px;
background-color: #CC3333;
}
#content {
float: left;
margin: 0px;
padding: 15px;
border-left: #CC3333 100px solid;
}
</STYLE>
</HEAD>
<BODY>
<DIV ID="header">
Some header
</DIV>
<DIV ID="content">
Insert long foo text here<br>
And watch the menu scroll down<br><br><br><br><br><b
<-----
</DIV>
<DIV ID="menu">
menu
</DIV>
</BODY>
</HTML>
That's nice :-)
MaB
MaB
I was totally locked to the problem of making the meny div higher, didn't think of the possibility to stretch the content div....
ASKER
" That's nice :-)"
Thanks =)
The only draw back that I can see atm is that you can't use border-left for it's real purpose on the content div. Not really a biggie though - perhaps I'll find some more problems soon =/
Haydn.
Thanks =)
The only draw back that I can see atm is that you can't use border-left for it's real purpose on the content div. Not really a biggie though - perhaps I'll find some more problems soon =/
Haydn.
Hi Haydn - I realise I'm late stepping in :-)
The left border option is a good one in your specific scenario - the only issues would be the setup of your CSS - getting rid of the float on the header and the content - as they're not necessary and may cause you problems later on.
Also - you should try and go with a strict doctype if you can - again to save you some problems...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Some Title</title>
<style type="text/css">
html, body
{
/* IE ignores the next two rules */
max-width: 750px;
min-width: 530px;
margin: 0 7px 0 0;
padding: 0;
background-color: #FFF;
color: #000;
font-family: Arial, Helvetica, sans-serif;
text-align: justify;
font-size: 14px;
}
#header
{
border-bottom: 2px solid #000;
margin: 0;
height: 75px;
background-color: #3333CC;
}
#menu
{
position: absolute;
top: 77px;
left: 0;
padding: 0;
width: 100px;
background-color: #CC3333;
}
#content
{
margin: 0;
padding: 15px;
border-left: 100px solid #CC3333;
}
</style>
</head>
<body>
<div id="header">
Some header
</div>
<div id="content">
Insert long foo text here<br>
And watch the menu scroll down<br><br><br><br><br><b r>
<-----
</div>
<div id="menu">
menu
</div>
</body>
</html>
The left border option is a good one in your specific scenario - the only issues would be the setup of your CSS - getting rid of the float on the header and the content - as they're not necessary and may cause you problems later on.
Also - you should try and go with a strict doctype if you can - again to save you some problems...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Some Title</title>
<style type="text/css">
html, body
{
/* IE ignores the next two rules */
max-width: 750px;
min-width: 530px;
margin: 0 7px 0 0;
padding: 0;
background-color: #FFF;
color: #000;
font-family: Arial, Helvetica, sans-serif;
text-align: justify;
font-size: 14px;
}
#header
{
border-bottom: 2px solid #000;
margin: 0;
height: 75px;
background-color: #3333CC;
}
#menu
{
position: absolute;
top: 77px;
left: 0;
padding: 0;
width: 100px;
background-color: #CC3333;
}
#content
{
margin: 0;
padding: 15px;
border-left: 100px solid #CC3333;
}
</style>
</head>
<body>
<div id="header">
Some header
</div>
<div id="content">
Insert long foo text here<br>
And watch the menu scroll down<br><br><br><br><br><b
<-----
</div>
<div id="menu">
menu
</div>
</body>
</html>
ASKER
"Also - you should try and go with a strict doctype if you can - again to save you some problems..."
I always use the strict doc type, I just didn't include it in the example code. Although I've always meant to ask why it's usualy split over 2 lines (like they state on w3c)... having it all on 1 line works fine and looks nicer imho... i.e:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
"getting rid of the float on the header and the content - as they're not necessary and may cause you problems later on."
You could be right, I don't see any problems using float with the layout I'm using, but as you say, it's not necessary.
Thanks for the comments,
Haydn.
I always use the strict doc type, I just didn't include it in the example code. Although I've always meant to ask why it's usualy split over 2 lines (like they state on w3c)... having it all on 1 line works fine and looks nicer imho... i.e:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
"getting rid of the float on the header and the content - as they're not necessary and may cause you problems later on."
You could be right, I don't see any problems using float with the layout I'm using, but as you say, it's not necessary.
Thanks for the comments,
Haydn.
ASKER
o.O the "float: left" is required on the content div, otherwise IE chokes.
ASKER
...And the content div stretches too far to the right for some reason without the float in IE....
It shouldn't - there's nothing there for it to choke on...
What do you mean too far right? It should stretch the full width of the screen...
ASKER
BODY {
max-width: 750px;
margin: 0px 7px 0px 0px;
}
Although IE doesn't know what to do with the max-width attribute, theres still a 7px margin to the right of the page.
Haydn.
I understand that - there should be a 7px margin to the right of the content div as well.
What version of IE are you using - it should not extend beyond that 7px gap...
What version of IE are you using - it should not extend beyond that 7px gap...
ASKER
IE 5.5 in the office and 6 at home - currently testing on 5.5. I think the problems happen without the float due to the fact I have some float div's in the content div already...
CSS is a many splendored thing - and everything can effect everything :-)
Sorry Haydn - I assumed you were testing the exact code above...
Sorry Haydn - I assumed you were testing the exact code above...
ASKER
I experienced a very strange IE problem when playing about with removing the floats by the way. The page also has a footer div spanning both columns. Without the float's a ~3px gap was created between the footer and content div ONLY if I scrolled the page slowly - scrolling quickly didn't render the gap - how wierd is that!!!
I wish I could say very weird, but nothing suprises me anymore :-(
There is definitely a reason though in your code somewhere - usually to do with absolute positioning.
There is definitely a reason though in your code somewhere - usually to do with absolute positioning.
ASKER
"usually to do with absolute positioning."
The only absolute positioned div is the menu, unfortunately this has to be like it to fit over the contents border =/
The only absolute positioned div is the menu, unfortunately this has to be like it to fit over the contents border =/
ASKER
OK - anybody got any point suggestions on this 1???
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Points awarded as nobody said "gimme the damn points" for a change ;P
Haydn.
Haydn.
Read another Q where COBOL DINOSAUR tipped about a solution that would look like this in your code:
<HTML>
<HEAD>
<TITLE>Some Title</TITLE>
<STYLE>
HTML, BODY {
max-width: 750px;
min-width: 530px;
margin: 0px;
padding: 0px;
background-color: #FFFFFF;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
#header {
border-bottom: #000000 2px solid;
width: 100%;
height: 75px;
background-color: #3333CC;
}
#menu {
float: left;
border-right: #000000 2px solid;
width: 100px;
background-color: #CC3333;
}
#content {
float: left;
}
</STYLE>
<script type="text/javascript">
function sizeRows() {
H = Math.max(document.getEleme
document.getElementById('c
}
</script>
</head>
</HEAD>
<BODY onload="sizeRows();">
<DIV ID="header">
header
</DIV>
<DIV ID="menu">
menu
</DIV>
<DIV ID="content">
Content line 1<BR>
Content line 2<BR>
<---- Menu DIV should stretch down here due to content length!
</DIV>
</BODY>
</HTML>
Try that out and see if it works for you.
BR MaB.