Aligning 2 divs with the 1 div above

**richyrich** · richyrich, June 25th, 2009 02:15 PM

Could someone explain why this doesn't work?

Code:

    <div id="default">
        <div id="left">
            <div id="head_content" class="blue658CB3_14">
                Head Content</div>
            <div style="border-collapse:collapse;float:left;width:100%;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;">
            <div id="left_menu">
            <div id="left_menu_header"></div>
                    <ul>
                        <li class="blue336799_8" onmouseover="mouseoverout(this,'','#B1B3FF','#336799');" onmouseout="mouseoverout(this,'','#BBCCDC','#336799');" onclick="link('/customers/');">Customers</li>
                        <li class="blue336799_8">Tasks</li>
                    </ul>
            </div>
            <div id="main_content">
                Main Content</div>
            </div>
        </div>
        <div id="right">
            Right feed
        </div>
    </div>

Code:

#head_content
{
    float:none;
    width:100%;
    line-height:30px;
    vertical-align:middle;
    border:solid 1px #336799;
    padding:0px 0px 0px 3px;
    margin:0px 0px 0px 0px;
}
#left_menu
{
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    text-align:left;
    float:left;
    width:17%;
    display:block;
}
#left_menu_header
{
    height:20px;
}
#main_content
{
    display:block;
    float:right;
    width:83%;
    background-color:#FFFFFF;
    border:solid 1px #336799;
    padding:0px 0em 0px 0px;
    margin: 0px 0px 0px 0px;
}
#left_menu ul
{
    width:100%;
    list-style:none;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
}
#left_menu li
{
    cursor:pointer;
    width:100%;
    line-height:15px;
    padding:2px 2px 2px 2px;
    margin:0px 0px 0px 0px;
    background-color:#BBCCDC;
    border-bottom:solid 1px #FFFFFF;
}

I've attached a screenshot. I want the Main Content box to right align with the edge of the Head Content box and the menu and Main Content to be side by side.

Any ideas?

**Wolffy** · Wolffy, June 25th, 2009 02:21 PM

What browser are you using? IE6 and older is very buggy in this area.

[Edit]Ok, I brought it up in FireFox and it rendered the same way. I've found over and over that using percentages causes problems like this. If I get more time, I'll noodle over it, but could you use a fixed width for your left menu area?[/edit]

**mehere** · mehere, June 25th, 2009 02:45 PM

try adjusting the left_menu width and the main_content width so that they don't equal 100 ...

**richyrich** · richyrich, June 25th, 2009 03:23 PM

Originally Posted by mehere

try adjusting the left_menu width and the main_content width so that they don't equal 100 ...

Yep. That's how I had it, but then the Main Content box doesn't align to the right of the header content box.

I presume the width and alignment are linked.

**richyrich** · richyrich, June 25th, 2009 03:26 PM

Originally Posted by Wolffy

What browser are you using? IE6 and older is very buggy in this area.

[Edit]Ok, I brought it up in FireFox and it rendered the same way. I've found over and over that using percentages causes problems like this. If I get more time, I'll noodle over it, but could you use a fixed width for your left menu area?[/edit]

Yeah...It's the same in all browsers....Can't understand why this issue wouldn't have been fixed?????

Surely it's obvious 2 divs with widths adding up to 100% should be the same width as a single div with a width of 100%...

**Wolffy** · Wolffy, June 25th, 2009 03:34 PM

Yeah, you would think. Probably doesn't work that way tho and it just takes X% of what ever the number of pixels is and rounds it. Dang thing is probably off by 1px.

**BLaaaaaaaaaarche** · BLaaaaaaaaaarche, June 25th, 2009 03:43 PM

It works just fine for me. Do you have the rest of the code/css so I can test? More than likely, you have a padding set, and that is throwing it off. You cannot set a padding on a defined width otherwise it will throw it off by a couple of pixels.

**Wolffy** · Wolffy, June 25th, 2009 03:46 PM

Hmm, what browser does it work in? Just curious. I "de-padded" the thing and it still rendered goofy

**BLaaaaaaaaaarche** · BLaaaaaaaaaarche, June 25th, 2009 03:49 PM

I am using IE 6:

Code:

<html>
<head>
<title>richyrich</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>

<body>

    <div id="default">
        <div id="left">
            <div id="head_content" class="blue658CB3_14">
                Head Content</div>
            <div style="border-collapse:collapse;float:left;width:100%;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;">
            <div id="left_menu">
            <div id="left_menu_header"></div>
                    <ul>
                        <li class="blue336799_8" onmouseover="mouseoverout(this,'','#B1B3FF','#336799');" onmouseout="mouseoverout(this,'','#BBCCDC','#336799');" onclick="link('/customers/');">Customers</li>
                        <li class="blue336799_8">Tasks</li>
                    </ul>
            </div>
            <div id="main_content">
                Main Content</div>
            </div>
        </div>
        <div id="right">
            Right feed
        </div>
    </div>

</body>
</html>

I just added the right and left div tag properties:

Code:

#head_content {
    float:none;
    width:100%;
    line-height:30px;
    vertical-align:middle;
    border:solid 1px #336799;
    padding:0px 0px 0px 3px;
    margin:0px 0px 0px 0px;
}
#left_menu {
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    text-align:left;
    float:left;
    width:17%;
    display:block;
}
#left_menu_header {height:20px;}
#main_content {
    display:block;
    float:right;
    width:83%;
    background-color:#FFFFFF;
    border:solid 1px #336799;
    padding:0px 0em 0px 0px;
    margin: 0px 0px 0px 0px;
}
#left_menu ul {
    width:100%;
    list-style:none;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
}
#left_menu li {
    cursor:pointer;
    width:100%;
    line-height:15px;
    padding:2px 2px 2px 2px;
    margin:0px 0px 0px 0px;
    background-color:#BBCCDC;
    border-bottom:solid 1px #FFFFFF;
}
#left {
	width:90%;
	float: left;
}
#right {
	width: 10%;
	float: left;
}

**richyrich** · richyrich, June 25th, 2009 04:03 PM

I have it rendering correctly in IE6. I did have some padding in the divs, so pushed the main content an extra couple of pixels and put a minus margin on the left menu to align it to the left.

However, the Main Content box is not the full width in FF. See attached screenshots...The IE one is how I want it to look.

Here is what I have now:-

Code:

    <div id="default">
        <div id="left">
            <div id="head_content" class="blue658CB3_14">
                Head Content</div>
            <div id="main_content">
            <div id="left_menu">
            <div id="left_menu_header"></div>
                    <ul>
                        <li class="blue336799_8" onmouseover="mouseoverout(this,'','#B1B3FF','#336799');" onmouseout="mouseoverout(this,'','#BBCCDC','#336799');" onclick="link('/customers/');">Customers</li>
                        <li class="blue336799_8">Tasks</li>
                    </ul>
            </div>
                <div id="right_content">
                    <div style="width: 100%;">
                        Main Content
                    </div>
                </div>
            </div>
        </div>
        <div id="right">
            Right feed
        </div>
    </div>

CSS

Code:

#left
{
    float: left;
    width: 77%;
    text-align: left;
}
#right
{
    left:0px;
    vertical-align:top;
    text-align:left;
    width: 20%;
    float:right;
}
#head_content
{
    float:none;
    width:100%;
    line-height:30px;
    vertical-align:middle;
    border:solid 1px #336799;
    border-collapse:collapse;
    padding:0px 0px 0px 3px;
    margin:0px 0px 0px 0px;
}
#main_content
{
    float:none;
    width:100%;
    padding:0px 0px 0px 5px;
    margin:3px 0px 0px 0px;
    border:solid 0px #FFFFFF;
    text-align:right;
}
#left_menu
{
    margin:0px 0px 0px -2px;
    padding:0px 0px 0px 0px;
    text-align:left;
    float:left;
    width:150px;
}
#left_menu_header
{
    height:20px;
}
#right_content
{
    text-align:left;
    float:right;
    background-color:#FFFFFF;
    border:solid 1px #336799;
    padding:2px 2px 2px 2px;
    margin: 0px 0px 0px 4px;
}
#left_menu ul
{
    width:100%;
    list-style:none;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
}
#left_menu li
{
    cursor:pointer;
    width:100%;
    line-height:15px;
    padding:2px 2px 2px 2px;
    margin:0px 0px 0px 0px;
    background-color:#BBCCDC;
    border-bottom:solid 1px #FFFFFF;
}
#left_menu li:hover
{
    background-color:#B1B3FF;
}

Thread: Aligning 2 divs with the 1 div above

LinkBack

Thread Tools

Display

Aligning 2 divs with the 1 div above

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions