Velocity Reviews

Velocity Reviews (
-   General Computer Support (
-   -   Floating my content boxes messes up my layout (

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:



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

<div id="border">

<div id="navigation">

<li>The Development</li>
<li>Specification & Features</li>
<li>Latest News</li>


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

<div id="subNavigation">

<li>Agios Tychonas</li>
<li>Local Area</li>
<li>Going Places</li>



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


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.