troubleshooting Question

How do I correctly float css boxes?

Avatar of paulinewin
paulinewin asked on
CSS
9 Comments1 Solution440 ViewsLast Modified:
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>
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 9 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 9 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros