General Help Related Topics - Floating my content boxes messes up my layout

10-03-2009, 04:53 PM

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>

<div id="subNavigation">

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

</ul>

</div>



<div id="leftBox">

</div> 

<div id="rightBox">

</div> 

<div id="logo">

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

</div>

</div>

</div>

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

amlania

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
SafeSquid: Content Filtering Internet Proxy - free 20 user edition released	Sachinpurohit	Software	0	06-23-2007 04:34 PM
High Definition and the future of viewing.	Allan	DVD Video	3	03-09-2005 12:56 AM
DVD Verdict reviews: A STORY OF FLOATING WEEDS / FLOATING WEEDS: CRITERION COLLECTION and more!	DVD Verdict	DVD Video	0	04-20-2004 10:04 AM

10-03-2009, 04:53 PM	#1
	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!!! amlania