3 replies [Last post]
Martagnan
Offline
Regular
uk
Last seen: 13 years 7 weeks ago
uk
Joined: 2003-08-27
Posts: 21
Points: 0

Please help... i need the div called content to be stretched down with the span class called #content .right so that the left column always has a background colour.

XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="/newstyle.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">

<!-- ........................................................... START OF THE HEADER BLOCK .......................................................... -->

<div id="header">
<span class="left"></span>
<span class="center"></span>
<span class="right">Stuff</span>
</div>

<!-- .............................................................. END OF THE HEADER BLOCK ............................................................. -->


<div id="topnav"></div>

<div id="mediablock">
<span class="left">Content</span>
<span class="right">Content</span>
</div>

<div id="topcurves"></div>

<!-- ..........................  THIS IS THE CONTENT BLOCK WITH THE LEFT  AND RIGHT SPLITS ...................... -->

<div id="content">
<span class="left">Content</span>
<span class="right">Content</span>
</div>


<!-- ........................................................... END OF THE CONTENT BLOCK .......................................................... -->

<div id="bottomcurves"></div>

<!-- ........................................................... START OF THE FOOTER BLOCK .......................................................... -->
<div id="footer">
<span class="left"></span>
<span class="right">content</span>
</div>

</div>
</body>
</html>

CSS

body
{
background-color: #E5DDA8;
margin: 10px;
text-align: center;
}

#clearit
{
display: block;
clear: both;
}


#container
{
margin: 0 auto;
border: 1px solid #E5DDA8;
width: 802px;
\width: 822px;
w\idth: 802px;
}

#header
{
height: 50px;
background-color: #F5F2DE;
}
#header .left
{
float: left;
height: 50px;
border: 1px solid #990000;
width: 150px;
\width: 170px;
w\idth: 150px;
}
#header .center
{
float: left;
height: 50px;
border: 1px solid #990000;
width: 600px;
\width: 620px;
w\idth: 600px;
}
#header .right
{
float: left;
height: 50px;
border: 1px solid #990000;
width: 46px;
\width: 66px;
w\idth: 46px;

}

#topnav
{
background-color: #FFFFCC;
height: 25px;
margin: 0 0 10px 0;
}

#mediablock
{
background-color: #FFFFDD;
height: 260px;
margin: 0 0 10px 0;
}

#mediablock .left
{
float: left;
height: 260px;
border: 1px solid #990000;
width: 470px;
\width: 490px;
w\idth: 470px;
}
#mediablock .right
{
float: left;
height: 260px;
border: 1px solid #990000;
width: 328px;
\width: 348px;
w\idth: 328px;
}

#content
{
margin: 0 0 10px 0;
background-color: #F5F2DE;
}


#content .left
{
float: left;
height: 100px;
border: 1px solid #990000;
width: 330px;
\width: 350px;
w\idth: 330px;
}
#content .right
{
float: left;
height: 500px;
border: 1px solid #990000;
width: 468px;
\width: 488px;
w\idth: 468px;
}


#footer
{
background-color: #F5F2DE;
height: 40px;
}
#footer .left
{
float: left;
height: 40px;
border: 1px solid #990000;
width: 330px;
\width: 350px;
w\idth: 330px;
}
#footer .right
{
float: left;
height: 40px;
border: 1px solid #990000;
background-color: #DDD;
width: 465px;
\width: 488px;
w\idth: 468px;

}

Martagnan
Offline
Regular
uk
Last seen: 13 years 7 weeks ago
uk
Joined: 2003-08-27
Posts: 21
Points: 0

Its ok.. I solved it!!

Simplified solution explanation:

My master container has a background colour.

I have 2 containers inside this - A(navigation) + B(content).

As the 'B' container fills up, 'A' container doesnt move so I employ the old trick of colouring the master container. Great! - No.... Netscape and Mozilla don't stretch the master container so the page background is visible below my 'A' container!!!

THE FIX... put another DIV directly after 'B' container (maybe a footer) but still inside the master container, apply a clear: both; to the selector and Robert is your Mums Brother!

MisterA
Offline
newbie
Last seen: 15 years 49 weeks ago
Joined: 2003-12-12
Posts: 1
Points: 0

Damn Div Height problem AGAIN!

I had a similar problem with table heights....

The table would be the full height of the browser on my local machine but would not work on my webservers. i tried adding height="100%" to the table tag (invalid) and also using CSS, but with no luck.

Purely by accident i discovered that if you remove

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

from

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

the problem was solved and the table stretched the full height of the browser.

This may also be true with the Div tag...

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 20 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Damn Div Height problem AGAIN!

Hi Martagnan,
You have to set the html and body height to 100% html, body{height:100%;}
And of course set height for content and right.

You should also look at using divs for your columns not spans, spans are really meant to be inline elements and divs are block so better suited to columns.

Hope that helps.