Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Oct 2005
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Content wont extend div

    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.

    Code:
    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.
    Code:
    <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>
    <!-- I have added 4 of the above to try to express what is happening ... the first one would show fine, then the other 3 would be shown OVER the container, even over the footer ... the page isnt "Stretching" with the content. -->
    </div> <!-- End Left Module -->
    <div id="rightModule">stuff would go here</right>
    </div> <!-- end container -->
    <div id="footer"></div>
    I wish i could provide a visual example but im sure someone knows what im talking about ...

  • #2
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i am having the same problem

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    This occurs when you have floating elements in your document. The solution is to use a clearing div. Try the following.
    Code:
    <!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>
    <!-- I have added 4 of the above to try to express what is happening ... the first one would show fine, then the other 3 would be shown OVER the container, even over the footer ... the page isnt "Stretching" with the content. -->
    </div> <!-- End Left Module -->
    <div id="rightModule">stuff would go here</div>
    <div class="clear">&nbsp;</div>
    </div> <!-- end container -->
    <div id="footer"></div>
    </body>
    </html>
    Note the part in red and the .clear class in the CSS.
    Last edited by _Aerospace_Eng_; 12-07-2005 at 07:41 AM.

  • #4
    New Coder
    Join Date
    Oct 2005
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by Sayian; 12-07-2005 at 07:54 AM.

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.

  • #6
    New Coder
    Join Date
    Oct 2005
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.

  • #8
    New Coder
    Join Date
    Oct 2005
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #9
    New Coder
    Join Date
    Oct 2005
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.

  • #11
    New Coder
    Join Date
    Oct 2005
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok thanks.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •