div column heights issue

4,330 · July 9, 2015

So I have an issue where the heights of the columns in the body area wont match. So if the content in the left is bigger than the right, the right will just stay whatever size it needs to be for the content inside. I have googled and havent found any solution for a 2 column layout that uses different colors. Everyone thing I have seen via google is one background color and its the master of the container, and then the nested divs inside for left and right are just set up and done. Since the columns dont have a color, it doesnt matter. But thats not my situation. My columns have independent colors and and im trying to get the heights on both to match each other / the parent container.

Heres code im testing with. I hope someone can help!

HTML

<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
    <div id="layout">
        <div id="header"></div>
        <div id="nav_bar"></div>
        <div id="body">
            <div id="leftside">
                <br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br />
            </div>
            <div id="rightside">
                <br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br />                
            </div>
        </div>
        <div id="footer"></div>
    </div>
</body>
</html>

CSS

#layout  {
    min-width: 320px;
    width: 95%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

#header  {
    background-color: #ff0000;
    height: 5%;
    width: 100%;
    text-align: center;
}

#nav_bar {
    background-color: #0000ff;
    text-align: center;
    width: 100%;
    min-height: 10px;
    height: 25px;
}

#body    {
    width: 100%;
    min-height: 275px;
    height: 595px;
}

#body #leftside  {
    float: left;
    background-color: #ff6e00;
    width: 72.65625%;
    min-height: 100px;
    height: auto;
}

#body #rightside {
    float: right;
    background-color: #a429b5;
    width: 27.34375%;
    min-height: 100px;
    height: auto;
}

#footer{
    background-color: #000000;
    clear: both;
    min-height: 10px;
    height: 25px;
    width: 100%;
}

July 9, 2015

add this

below

Like

-------------------------------

</div>

-------------------------------

4,330 · July 10, 2015

add this

<div style="clear: both"></div>

below

<div id="rightside">

...

</div>

Like

-------------------------------

<div id="rightside">

...

</div>

<div style="clear: both"></div>

</div> 

-------------------------------

just tried it, didnt work

20,536 · July 10, 2015

Floats suck, look at something like table layout.

July 10, 2015

just tried it, didnt work

you are wrong ;-), will defo work. 100% sure...

unless you are not trying to do what i think you are.

<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
    <div id="layout">
        <div id="header"></div>
        <div id="nav_bar"></div>
        <div id="body">
            <div id="leftside">
                <br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br />
            </div>
            <div id="rightside">
                <br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br />                
            </div>
            <div style="clear:both"></div>
        </div>
        <div id="footer"></div>
    </div>
</body>
</html>

body will now have height.

11,194 · July 10, 2015

How far back do you need to go with browser support?

You could try adding 'display:flex;' to the #body element. Demo here http://codepen.io/MikeChipshop/pen/wajpwz

Quick guide to Flexbox here https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Browser support is pretty good but old, old versions of any browser wont support it, especially IE.

July 10, 2015

you are wrong ;-), will defo work. 100% sure...

unless you are not trying to do what i think you are.

<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
    <div id="layout">
        <div id="header"></div>
        <div id="nav_bar"></div>
        <div id="body">
            <div id="leftside">
                <br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br />
            </div>
            <div id="rightside">
                <br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br />                
            </div>
            <div style="clear:both"></div>
        </div>
        <div id="footer"></div>
    </div>
</body>
</html>

body will now have height.

I believe he wants to make the columns both the same height regardless of content, or full height of body div, in which case.. adding the clear won't do what he's wanting

11,194 · July 10, 2015

Floats suck, look at something like table layout.

Unless he's displaying tabular data, tables are completely wrong for this. Tables are not for layout.

July 10, 2015

#body {

width: 100%;

min-height: 275px;

display:table;

}

#body #leftside {

background-color: #ff6e00;

width: 72.65625%;

display:table-cell;

}

#body #rightside {

background-color: #a429b5;

width: 27.34375%;

display:table-cell;

}

Should work

20,536 · July 10, 2015

Unless he's displaying tabular data, tables are completely wrong for this. Tables are not for layout.

No, I actually mean CSS table layout. Also things line inline-block and flexbox (And soon enough grid) will do the job too, but even IE8 supports table layout.

CSS floats are basically a hack, they take elements out of the standard document flow (Good if you want something like a image to the side of text), but then to get the rest of the document to respect their position you need to start stuffing "clear: both" in random places. It doesn't make sense to want to take a element out of the document flow, then force other elements treat it as if it's still in the flow, it's a contradictory goal and a sign something wrong is happening.

11,194 · July 10, 2015

No, I actually mean CSS table layout. Also things line inline-block and flexbox (And soon enough grid) will do the job too, but even IE8 supports table layout.

Apologies, for a minute there i thought you were a <table> tag apologist

20,536 · July 10, 2015

Yeah, <table> layout is actually pretty smart at a lot of things, problem is it was too heavily dependent on the markup (And was a horrible semantic abuse, it's not tabular data and you needed stuff like spacer.gif). Generalize out the layout methods so you can easily apply them with CSS and you get the benefits of table layout (Like having multi-column layouts that have even sizes across columns), without having to crap up the markup of your document.

2,549 · July 10, 2015

http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layouts-em-and-pixel-widths

For quick column templates I always use above link, got tired of messing around with css to make it work

Above link is crossbrowser compatible without hacks and has css code available for IE8 and below, so no unexpected layout bugs in IE8...

4,330 · July 14, 2015

Thanks for the replies guys. I didnt expect it to blow up this much because first few days I saw no responses. I havent been in the web dev game for awhile so seeing new things like flex and css table is awesome. I will try each one and see which one I like the most.

As far as browser compatibility, im supporting everything, but im not going to specifically hack my site up to support IE. IE can go die in a fire.

Sign In

div column heights issue

Question

Sikh

Link to comment

Share on other sites

13 answers to this question

Recommended Posts

Seabizkit

Link to comment

Share on other sites

Sikh

Link to comment

Share on other sites

The_Decryptor Veteran

Link to comment

Share on other sites

Seabizkit

Link to comment

Share on other sites

MikeChipshop Member

Link to comment

Share on other sites

ashpowell

Link to comment

Share on other sites

MikeChipshop Member

Link to comment

Share on other sites

ashpowell

Link to comment

Share on other sites

The_Decryptor Veteran

Link to comment

Share on other sites

MikeChipshop Member

Link to comment

Share on other sites

The_Decryptor Veteran

Link to comment

Share on other sites

Seahorsepip Veteran

Link to comment

Share on other sites

Sikh

Link to comment

Share on other sites

Recently Browsing 0 members