Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > General Computer Discussion > General Computer Support > Floating my content boxes messes up my layout

Reply
Thread Tools

Floating my content boxes messes up my layout

 
 
amlania amlania is offline
Junior Member
Join Date: Oct 2009
Posts: 1
 
      10-03-2009
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!!!
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Space between input boxes and selection boxes is not the same in Internet Explorer Stefan Mueller HTML 5 06-16-2009 02:06 PM
floating point problem... floating indeed :( teeshift Ruby 2 12-01-2006 01:16 AM
Choosing Layout: Css-Layout or Table-Layout hpourfard@gmail.com ASP .Net 1 06-19-2006 10:06 AM
wxPython: how to update a panel content/layout according to a variable content Lo?c Mah? Python 2 11-29-2004 01:35 PM
DVD Verdict reviews: A STORY OF FLOATING WEEDS / FLOATING WEEDS: CRITERION COLLECTION and more! DVD Verdict DVD Video 0 04-20-2004 09:04 AM



Advertisments