Content wont extend div

Sayian

12-07-2005, 03:42 AM

Im having a problem with length's in my xhtml / css document im designing.

I have a header, leftModule, rightModule and footer.

The header works fine, but then when i put content into the leftModule and rightModule, the content extends past the footer.

"The document wont catch up with the content" and the content is over lapping on the bottom.

Here is my css style, and relevant XHTML. Thanks for any help. Sorry i cant provide a URL to look @, im developing this on my home PC.

body {
background-color: #ddd;
font: 11px verdana,arial,helvetica,sans-serif;
margin: 0;
padding: 0;
}

#container {
background: #fff;
margin: 0 auto 0 auto;
padding: 0 10px 0 10px;
width: 800px;
border-left:20px black solid;
border-right:20px black solid;
}

#headerInfoBar {
background: #545454;
color: white;
font-size: 10px;
height: 16px;
margin: 0px;
padding: 5px 10px 5px 10px;
}

#header {
background: #4274BC;
height: 150px;
}

#header .left {
float: left;
width: 100%;
overflow:hidden;
height: 100px;
border:none;
margin: 30px 0 0 0;
background: url('http://www.pixxity.com/img/logos/pixxx.gif') no-repeat center;
}

#navMenu {
background: #545454;
font-size:10px;
padding: 4px;
height: 15px;
color: #f5f5f5;
}

#topAdHolder {
margin: 0 auto;
padding:7px;
width: 728px;
height: 90px;
text-align:center;
border-bottom: #ccc dashed 1px;
}

#footer {
font-size: 10px;
display:block;
height: 50px;
background: white;
margin: 0 auto;
padding: 0 10px 0 10px;
width: 800px;
border-left:20px black solid;
border-right:20px black solid;
border-bottom:15px black solid;
}

/*Left Modules */
#leftModule {
border-right: 1px dashed #ccc;
display: block;
border: 1px red solid;
float: left;
overflow: hidden;
padding: 6px 0 6px 0;
width: 496px;
}

#leftModule .block {
display: block;
margin-bottom: 9px;
clear:both;
padding: 6px;
width: 96%;
}

/* Right Modules */
#rightModule {
float: right;
border: 1px blue solid;
width: 300px;
}

#rightModule .adBlock {
display: block;
margin-bottom: 10px;
overflow: hidden;
padding: 5px 0 5px 0;
width: 100%;
}

The way i have this setup is like this.

<div id="container">
<div id="topAdHolder">google728x90here</div>
<div id="leftModule">
<div class="pageTitle">Title blah blah</div>

<div class="pageTitle">Title blah blah</div>

<div class="pageTitle">Title blah blah</div>

<div class="pageTitle">Title blah blah</div>

</div> 
<div id="rightModule">stuff would go here</right>
</div> 
<div id="footer"></div>

I wish i could provide a visual example but im sure someone knows what im talking about ...

mellisa1981

12-07-2005, 06:29 AM

i am having the same problem :confused:

_Aerospace_Eng_

12-07-2005, 06:38 AM

This occurs when you have floating elements in your document. The solution is to use a clearing div. Try the following.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
background-color: #ddd;
font: 11px verdana,arial,helvetica,sans-serif;
margin: 0;
padding: 0;
}

#container {
background: #fff;
margin: 0 auto 0 auto;
padding: 0 10px 0 10px;
width: 800px;
border-left:20px black solid;
border-right:20px black solid;
}

#headerInfoBar {
background: #545454;
color: white;
font-size: 10px;
height: 16px;
margin: 0px;
padding: 5px 10px 5px 10px;
}

#header {
background: #4274BC;
height: 150px;
}

#header .left {
float: left;
width: 100%;
overflow:hidden;
height: 100px;
border:none;
margin: 30px 0 0 0;
background: url('http://www.pixxity.com/img/logos/pixxx.gif') no-repeat center;
}

#navMenu {
background: #545454;
font-size:10px;
padding: 4px;
height: 15px;
color: #f5f5f5;
}

#topAdHolder {
margin: 0 auto;
padding:7px;
width: 728px;
height: 90px;
text-align:center;
border-bottom: #ccc dashed 1px;
}

#footer {
font-size: 10px;
display:block;
height: 50px;
background: white;
margin: 0 auto;
padding: 0 10px 0 10px;
width: 800px;
border-left:20px black solid;
border-right:20px black solid;
border-bottom:15px black solid;
}

/*Left Modules */
#leftModule {
border-right: 1px dashed #ccc;
display: block;
border: 1px red solid;
float: left;
overflow: hidden;
padding: 6px 0 6px 0;
width: 496px;
}

#leftModule .block {
display: block;
margin-bottom: 9px;
clear:both;
padding: 6px;
width: 96%;
}

/* Right Modules */
#rightModule {
float: right;
border: 1px blue solid;
width: 300px;
}

#rightModule .adBlock {
display: block;
margin-bottom: 10px;
overflow: hidden;
padding: 5px 0 5px 0;
width: 100%;
}
.clear {
clear:both;
font-size:1px;
line-height:0px;
}
</style>
</head>

<body>
<div id="container">
<div id="topAdHolder">google728x90here</div>
<div id="leftModule">
<div class="pageTitle">Title blah blah</div>

<div class="pageTitle">Title blah blah</div>

<div class="pageTitle">Title blah blah</div>

<div class="pageTitle">Title blah blah</div>

</div> 
<div id="rightModule">stuff would go here</div>
<div class="clear"> </div>
</div> 
<div id="footer"></div>
</body>
</html>
Note the part in red and the .clear class in the CSS.

Sayian

12-07-2005, 06:51 AM

Thanks alot for your reply.

Still having the same problem though, my friend is giving me free hosting off his server so he let me upload a example picture. Please check this out and let me know what could be done to fix this.

http://www.pixxity.com/example.jpg

In specific, the part in red is my issue. Thats the left module, the right module is also acting the same way (blue) if i put anything in it.

_Aerospace_Eng_

12-07-2005, 06:57 AM

Post a link to that site. I told you what to do and it works, I tested it. You may not have implemented what I told you to do correctly or you have not read my edit to my post.

Sayian

12-07-2005, 07:06 AM

Thats the problem i dont have the site live anywhere, i just got to upload the pic to my friends server, but i cant upload any html files right now. I tested the code you pasted and yes, your code works .. but mine doesnt ... =/ ... I know having the code live would help, and im working on that ... i dont understand what could be causing the problem is their anything else i could show you to help?

_Aerospace_Eng_

12-07-2005, 07:09 AM

Other than you close your rightModule with a tag called </right> (which isn't correct) there isn't much more I can help you with. I've told you what the problem was and how to fix it. Just get a free web host temporarily. www.freewebs.com is a site I've used before.

Sayian

12-07-2005, 07:11 AM

Ok issue has been resolved, i guess their isnt a Mark Thread Resolved button here, but id like to thank you greatly for your help and time. Cheers.

Sayian

12-07-2005, 07:13 AM

lol, yeah </right> deff. isnt in the W3C css 2 recom. for proper markup is it? That might of been the reason why things werent working .. i just re-coded everything from scratch and applied the clear div .. question? can i set a class to clear:both and not have to call another div to do the clearing?

_Aerospace_Eng_

12-07-2005, 07:25 AM

What do you mean set a class to clear:both; ? You need an element that will be the clearing element this is why I used a class called clear in the div. This is the way its done, there is no substitute.

Sayian

12-07-2005, 07:28 AM

Ok thanks.