CodingForums.com - Vertical Alignment of box divs

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - Vertical Alignment of box divs (http://www.codingforums.com/showthread.php?t=282194)

wonopon

11-14-2012 08:57 PM

Vertical Alignment of box divs

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 (Post 1292011)

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 :)

All times are GMT +1. The time now is 06:19 AM.