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