View Full Version : divs show outside containers

05-26-2010, 02:56 AM
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.

<!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">
<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;

#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";

<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>
<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>

<!-- bottom -->
<br style="line-height: 5px;" />
<div id="footer2010">
<div class="copyright2010">Copyright &copy; 2009-2010</div>
<div class="copyright2010">Disclaimer</div>
<div class="clear"></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;" />
<br style="line-height: 10px;" />

05-26-2010, 03:24 AM
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 -

#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 (http://www.quirksmode.org/css/clearing.html).

Is that what you're talking about?

05-26-2010, 04:06 AM
Thank you