asked on

How do I correctly float css boxes?

Hi,
I'm having difficulties lining up boxes next to one another:
(1) box #right doesn't line up next to box #left. It appears to be pushed down.
(2) box #rightNav doesn't line up next to box #top image. It also appears to be pushed down, below the photo.
(3) box #rightNavContent doesn't line up at the top where box #content starts. It's pushed down after box#content.

Any suggestion is greatly appreciated.

Thank you!

<HTML>
<HEAD>
<STYLE>
#body {width:940px; left:18px;}
#left {
	margin-bottom: 0.5em;
	background-color: #3cc;
	float:left;
	width:222px;
	clear:both;
	padding:0;
	margin:0;
}
#right {float:right; width:713px; clear:both; padding:0; margin:0;}
#top {clear:both; padding:0; margin:0; width:713px; height:185px;}
#bottom {width:713px; clear:both;}
#content {font-family: Arial, Helvetica, sans-serif; font-size: 13px; background-color: #FFFFFF; padding: 25px; margin-right: 8px; width:470px; float:left; clear:both;}
#rightNavContent{width:170px; height:auto;}
.bkg {background-image: url(../image/column.gif); background-repeat: repeat-y; background-position: right; background-color: blue;}
#rightNav {width:190px; padding:0; margin:0; border:0; clear:both; float:right;}
#corner {background-color: pink; background-image: url(../image/corner.gif); background-repeat: no-repeat; background-position: right top; height: 26px;}
#bar {height: 7px; background-color: yellow;}
#icorner {background-image: url(../image/insidecorner.gif); background-repeat: no-repeat; background-position: right top; height: 7px;}

}
#footer1 {background-color: yellow; clear:both;}
#footer2 {font-family: Arial, Helvetica, sans-serif; font-size: 11px;margin-left:20px;}
</STYLE>
</HEAD>
<BODY>
<div id="body">
	<div id="left">This is the box on the left.<br />It contains several lines of text.<br /> So that I may see see the behavior<br /> of the long words in the box on the right.</div>
	<div id="right">
		<div id="top" class="bkg"><img src="image/photo.jpg" alt="picture of table" width="520" height="185" />
			<div id="rightNav">
				<div id="corner"></div>
				<div id="bar"><img src="image/transp.gif" /></div>
				<div id="icorner"></div>
			</div>
		</div>
		<div id="bottom" class="bkg">
			<div id="content">This is the box that contains information on tables.</div>
			<div id="rightNavContent">This is the box on the right that helps you with more details on tables.</div>
		</div>
	</div>
	<div id="footer1"><img src="image/transp.gif" /></div>
	<div id="footer2">This is where the footer will go.</div>
</div>
</BODY>
</HTML>

Open in new window

jeremyjared74

This website may help you out. It lets you create CSS containers by drag and drop. You can customize the entire look of the containers, pretty cool site:
http://css3.mikeplate.com/

paulinewin

ASKER

Thank you for this site, I really like it. My concern is that all the box positionings are absolute. I would really like to float these boxes that I have.

jeremyjared74

You can float them, just give them a height and margin or padding left or right to keep it from the edge of.the page.

paulinewin

ASKER

I've tried but the boxes don't align next to each other. The fall in the right direction, meaning left and right but not next to each other, the right side gets pushed below the left box.

jeremyjared74

Maybe this will help you out:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Clearing Floats</title>
 <style type="text/css">
 #container { border: 1px solid #000; }
 #left { background: #ccc; width: 300px; float: left; }
 #right { background: #ddd; width: 300px; float: right; }
 </style>
 <link href="new  1.css" rel="stylesheet" type="text/css">
 </head>

 <body>
 <h1>Floats</h1>
 <div id="container">
 <div id="left">You can float them, just give them a height and margin or padding left or right to keep it from the edge of.the page.
 
 I've tried but the boxes don't align next to each other.  The fall in the right direction, meaning left and right but not next to each other, the right side gets pushed below the left box.
 </div>
 <div id="right">
   <p>This website may help you out. It lets you create CSS containers by drag and drop. You can customize the entire look of the containers, pretty cool site:
     http://css3.mikeplate.com/ </p>
   <p>Thank you for this site, I really like it.  My concern is that all the  box positionings are absolute.  I would really like to float these  boxes that I have.</p>
 </div>
 </div>
 </body>

 </html>

Open in new window

ASKER CERTIFIED SOLUTION

jeremyjared74

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

paulinewin

ASKER

Thank you for the sample. But I'm trying to align boxes, which won't align for me.
Desired layout:
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
x <div id="body"> x
x xxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx x
x x <div id="left"> x x <div id="right"> x
x x x x xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx x
x x x x x <div id="top"> x x
x x x x x xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxx x x
x x x x x x <img /> x x <div id="rightNav"> x x x
x x x x x x x x x x x
x x x x x xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxx x x
x x x x x x x x
x x x x xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
x x x x x
x x x x xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
x x x x x <div id="bottom"> x
x x x x x xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxx x x
x x x x x x <div id="content"> x x <div id="rightNavContent">x x x
x x x x x x x x x x x
x x x x x xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxx x x
x x x x x x
x x x x xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
x x x x x
x x x x x xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx x
x x x x x x <div id="contentBottom"> x x
x x x x x x x x
x x x x x xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx x
x x x x x
x x x x x xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx x
x x x x x x <div id="footer"> x x
x x x x x x x x
x x x x x xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx x
x x x x xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
x xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Unfortunately, (1) #right won't align with #left (2) #rightNav won't align with the img tag inside #top (3) #right NavContent won't align with #content. All of these are floats (left and right) that won't flush next to one another.

paulinewin

ASKER

I've figured out how to flush the boxes next to each other.
(1) For #left and #right, I had to remove the clear:both. This was pushing the #right below the #left
(2) For #top image and #rightNav, I had to use a descent select div.top img and have that float left while #rightNav floated right
(3) For #content and #rightNavContent, I had to set margin-left with a larger width for #rightNavContent then #left and #content combined

Thank you jeremyjared74 for trying to help me with my problem. I really appreciate your effort and will award you the 250 points.

paulinewin

ASKER

Thank you jeremyjared74!
For some reason, I did not see this submission from you. Would it be possible to see your external css files, reset-fonts-grids.css and base.css?

The URL you've provide is excellent. Thank you again! I wished I gave this question more points. I didn't realized how tough it was.