...

View Full Version : Vertical Alignment of box divs



wonopon
11-14-2012, 09:57 PM
Hey, i'm trying to get three divs vertically aligned with each other properly.

Here is the div css styling:



#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, 11: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/224602/how-do-you-make-div-elements-display-inline):



<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, 01:17 AM
Hello wonopon,
Have a look at 3 boxes here (http://nopeople.com/CSS%20tips/3%20equal%20divs/index.html). Sorry for the aweful colors.

Excavator
11-15-2012, 01:19 AM
But when I use #right-box, it appears under the #left-box and #middle-box.

See the box model here (http://www.w3.org/TR/CSS2/box.html). 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, 03:09 AM
Thanks guys so much for the help, it's just what I needed :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum