Vertical Alignment of box divs

wonopon · 11-14-2012, 08:57 PM

Hey, i'm trying to get three divs vertically aligned with each other properly.

Here is the div css styling:

Code:

#left-box
{
	float:left;
	border:1px solid green;
	width:300px;
}

#middle-box
{
	text-align:left;
	border:1px solid green;
	margin-left:380px;
	width:500px;
}

#right-box
{
	border:1px solid green;
	width:300px;
	position:relative;
	top:-82px;
	left:940px;

	top:-110px\9;
}

The problem happens with #right-box. When I use #left-box and #middle-box in my HTML, they both are vertically aligned. But when I use #right-box, it appears under the #left-box and #middle-box. I can solve this problem using position:relative and top, but that requires me to use css hacks for IE. Is there a cleaner and more proper way of doing this?

Thanks for your help everyone!

Brandnew · 11-14-2012, 10:46 PM

Now i don't know if this will help but using span may help, i haven't checked this out in ie (idea came from http://stackoverflow.com/questions/2...splay-inline):

Code:

<html>
<head>
<style type="text/css">
#left-box
{
	float:left;
	border:1px solid green;
	width:300px;
}

#middle-box
{
	float:left;
	border:1px solid green;
	width:300px;
	margin-left:10px;
}

#right-box
{
	float:left;
	border:1px solid green;
	width:300px;
	margin-left:10px;
}
</style>
</head>
<body>

<span id="left-box">hi there</span>
<span id="middle-box">hi there</span>
<span id="right-box">hi there</span>

</body>
</html>

Excavator · 11-15-2012, 12:17 AM

Hello wonopon,
Have a look at 3 boxes here. Sorry for the aweful colors.

Excavator · 11-15-2012, 12:19 AM

Quote:

Originally Posted by wonopon

But when I use #right-box, it appears under the #left-box and #middle-box.

See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

wonopon · 11-15-2012, 02:09 AM

Thanks guys so much for the help, it's just what I needed