Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   General Computer Support (http://www.velocityreviews.com/forums/f44-general-computer-support.html)
-   -   Floating my content boxes messes up my layout (http://www.velocityreviews.com/forums/t700298-floating-my-content-boxes-messes-up-my-layout.html)

amlania 10-03-2009 03:53 PM

Floating my content boxes messes up my layout
 
Hi there,

I have a two boxes in a wrapper and i floated one left and one right so they are side by side. Since i have done that the border has moved half way up the page as if the boxes are not within them. I would like the boxes to be contained within my border without me having to set a height for the wrapper.

The code is as follows:

</head>

<body>


<div id="wrapper" align="center">

<div id="border">

<div id="navigation">

<ul>
<li>Location</li>
<li>Service</li>
<li>The Development</li>
<li>Specification & Features</li>
<li>Latest News</li>

</ul>

</div><!--main navigation ends-->

<div id="subNavigation">

<ul>
<li>Agios Tychonas</li>
<li>Local Area</li>
<li>Going Places</li>
<li>Views</li>
<li>Beaches</li>

</ul>

</div>

<!--sub-navigation ends-->


<div id="leftBox">



</div> <!--leftbox ends-->


<div id="rightBox">

</div> <!--rightbox ends-->



<div id="logo">

<p><img src="assets/location_agios/lemesos_logo.jpg" /></p>

</div><!--logo ends-->



</div><!--border ends-->

</div><!--wrapper ends-->



</body>
</html>

And the CSS is as follows:

#wrapper {
border: 3px solid #CBCBCB;
width: 1070px;
margin-right: auto;
margin-left: auto;
margin-top: 40px;
}
#border {
margin: 5px;
border: 1px solid #CBCBCB;
}
#navigation {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
#navigation ul {
}
#navigation ul li {
display: inline;
border: 1px solid #999;
margin-right: 3px;
margin-left: 3px;
padding-top: 4px;
padding-right: 30px;
padding-bottom: 4px;
padding-left: 30px;
}
#subNavigation {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
margin: 0px;
padding: 0px;
}
#subNavigation ul li{
display: inline;
float: none;
padding-right: 40px;
padding-left: 40px;
}
#leftBox {
height: 350px;
width: 490px;
float: left;
border: 2px solid #999;
padding: 0px;
margin-top: 25px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 153px;
}
#rightBox {
height: 350px;
width: 275px;
border: 2px solid #999;
float: right;
margin-top: 25px;
margin-right: 114px;
padding: 0px;
margin-left: 0px;
margin-bottom: 10px;
}

Your help is much appreciated!!!


All times are GMT. The time now is 05:11 PM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.