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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post

    divs show outside containers

    my page is all over the place as the outer box is not containing all the content.

    should be...

    centered menu at top
    centered header image
    centered main body content
    centered footer

    but the right side image section is coming outside the container2010 div box.

    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">
    .tmenu2:visited { COLOR: #ffffff; TEXT-DECORATION:none; font-weight: bold; }
    .tmenu2:hover  { color : #7ed1fc !important ; text-decoration : blink !important ; font-weight : bold; } 
    .tmenu2:link {  COLOR: #ffffff; TEXT-DECORATION:none; font-weight: bold; }
    li.tmenu2 { list-style:none; float: left; }
    #new_header2 { FONT-FAMILY:Arial, Helvetica, sans-serif; FONT-SIZE: 0.77em; margin: 0 auto; height:38px; background-color:#1460CE; line-height: 38px; }
    li.empty { list-style:none; float: left; }
    
    body {
    	margin-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	/*background-color:white;*/
    	background-image:url(images/gray.jpg);
    	background-repeat:repeat-x;
    }
    
    #bodypos {position: relative;
    	margin: 0 auto;
    	height: 100%;
    	width: 775px;	
    	}
    #imgcont { width:775px; height:234px;}
    #container2010 { background-color:#ecedee; width:0 auto; background-image:url(images/containerbg2010.jpg); background-repeat: repeat-y; padding: 0 20px 0 30px; }
    #vancont { height: 710px; width: 150px; padding: 2px; background-color: #87b1ee; float: right; margin-top: 20px; margin-left: 10px; margin-right: 5px; text-align: center; }
    .footer2010 { margin:0 auto; }
    .copyright2010  { float: left; width: 50%; text-align: center; background-color:#4F4F4F; color: #FFFFFF; font-size:8pt; line-height: 30px; }
    .clear { height: 0; font-size: 1px; margin: 0; padding: 0; line-height: 0; clear: both; }
    
    .floatright { float: right; }
    .floatleft { float: left; }
    
    @charset "utf-8";
    </style>
    </head>
    
    <body>
    <div id="bodypos"> 
    <ul id="new_header2">
    <li class="tmenu2"><a href="index.html" class="tmenu2">HOME</a></li><li class="empty">&nbsp;|&nbsp;&nbsp;</li>
    <li class="tmenu2"><a href="" class="tmenu2">ABOUT US</a></li><li class="empty">&nbsp;|&nbsp;&nbsp;</li>
    <li class="tmenu2"><a href="" class="tmenu2">OUR SERVICES</a></li><li class="empty">&nbsp;|&nbsp;&nbsp;</li>
    <li class="tmenu2"><a href="" class="tmenu2">VIP &amp; Business Class</a></li><li class="empty">&nbsp;|&nbsp;&nbsp;</li>
    <li class="tmenu2"><a href="" class="tmenu2">VEHICLES</a></li><li class="empty">&nbsp;|&nbsp;&nbsp;</li>
    <li class="tmenu2"><a href="" class="tmenu2">BOOKING FORM</a></li><li class="empty">&nbsp;|&nbsp;&nbsp;</li>
    <li class="tmenu2"><a href="" class="tmenu2">QUOTE ME</a></li><li class="empty">&nbsp;|&nbsp;&nbsp;</li>
    <li class="tmenu2"><a href="" class="tmenu2">MOBILITY</a></li><li class="empty">&nbsp;|&nbsp;&nbsp;</li>
    <li class="empty"><a href="" class="tmenu2">CONTACT US</a></li>
    </ul>
      <div id="imgcont"><img src="images/design.jpg" alt="" /></div>
    	  <div id="container2010"> 
    		<!-- top -->
    
    
    
    	<div id="vancont">
    		<div style="padding: 10px 0px 5px 0px;"><img src="images/skate.jpg" width="127" height="165" alt="" /></div>
    		<div style="padding: 5px 0px 5px 0px;"><img src="images/golf.jpg" width="128" height="167" alt="" /></div>
    		<div style="padding: 5px 0px 5px 0px;"><img src="images/plane.jpg" width="128" height="163" alt="" /></div>
    		<div style="padding: 30px 0px 5px 0px;"><img src="images/wheel.jpg" alt="" /></div>
    		<div>&nbsp;</div>
    	</div>
    
    
    
    
    		<!-- bottom -->
    		<br style="line-height: 5px;" />
    	  </div>
    		  <div id="footer2010">
    			  <div class="copyright2010">Copyright &copy; 2009-2010</div>
    			  <div class="copyright2010">Disclaimer</div>
    			  <div class="clear"></div>
    		  </div>
      			<div align="justify" style="font-size:8pt; padding: 0 0px 0 0px;"><img src="images/2010.png" width="364" height="66" style="float: right;" alt="" />BLAH BLAH!</div>
    <br style="line-height: 5px;" />
    </div>
    <br style="line-height: 10px;" />
    </body>
    </html>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello again jasonpc1,
    It looks like it fits width-wise so you must mean that #container2010 is not enclosing #vancont so it looks like it's breaking out to the bottom?

    Try clearing the float like this -
    Code:
    #container2010 {
    	background: #ecedee;
    	width: 0 auto;
    	background: #f00 url(images/containerbg2010.jpg) repeat-y; /*added a color for demonstration only*/
    	padding: 0 20px 0 30px;
    	overflow: auto;
    }
    Here's how that method of clearing floats works.

    Is that what you're talking about?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post
    Thank you


  •  

    Posting Permissions

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