Column Layout

I need to make a two column layout (each column will have a border around it and some margin/padding so they don't touch). I've done this with CSS however, the columns are not the same height. I need all columns to be the same height so that it looks professional.

I've searched Google and found many solutions, all of which are CSS hacks, or JavaScript, or other 30+ lines of code. This should be very simple and I'm SHOCKED to find that Internet Explorer doesn't support this (as I'm told it doesn't). Who would want columns that are all messy?

If I wrap the columns in a container div, and set the height to 100% it seems to work, however, I have to float the columns in order to have them side-by-side, and as soon as I float them, they are no longer inline with the rest of the page elements, and are no longer "inside" the container div.

I have found many different hack solutions, but I need a professional solution that actually works on all browsers, without having to hack things and cause more problems.

http://css-tricks.com/fluid-width-equal-height-columns/

http://www.ejeliot.com/blog/61

http://css-tricks.com/super-simple-two-column-layout/

http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm

Can someone from here or Microsoft give me the REAL solution, not some hack solution? This is something that is very common in websites, and I'm sure there is support for something so basic by the year 2012. Most of these articles go back to 2006.

Thanks!

Re: Column Layout

</div>

</div>

Also refer this once:

http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm

Re: Column Layout

I can't get it working like that.  The columns always go one top of each other. Also there are two IDs called leftDiv.. I think you can only use an ID once?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et sapien non lacus lacinia fringilla eu sed lectus. Curabitur ac tincidunt dolor. Aliquam quis nunc eget massa pellentesque sollicitudin. Aliquam mauris enim, vehicula vel blandit id, tincidunt nec nunc. Quisque vulputate, massa ac commodo interdum, lectus dui consectetur risus, in interdum nunc tortor a tortor. Praesent adipiscing volutpat erat placerat feugiat. Duis dapibus tristique metus, at lobortis leo adipiscing eu. Nunc facilisis, sapien quis vestibulum dapibus, mauris justo venenatis ante, ut hendrerit urna tortor vitae lacus. Donec quis viverra justo. Praesent fermentum varius sapien in dapibus. Proin pharetra eros sit amet lorem placerat facilisis egestas tortor sollicitudin. Etiam tempor facilisis elit, cursus hendrerit augue lacinia vel. Vivamus condimentum, tortor at venenatis congue, sem est adipiscing mi, interdum iaculis ante mi eu augue.

</div> <div style="float: left; background-color: #ff0000;" id="rightDiv" height="100%" width="498px">

Curabitur in est ut nisi euismod convallis. Pellentesque accumsan accumsan velit sit amet eleifend. Aenean vitae nunc vitae erat aliquam posuere sit amet eget sem. Proin suscipit dignissim turpis at tristique. Aliquam fringilla velit non turpis dapibus euismod. Maecenas mi nibh, pellentesque ac mattis nec, molestie vitae elit. Aliquam ac quam non lectus ultrices vestibulum et a mi. Etiam dapibus mauris at orci elementum sodales. Morbi blandit commodo facilisis.

</div> </div>

Re: Column Layout

try this, It will work

CSS code:

.outerDiv
        {
            height: 500px;
            border: 1px solid blue;
        }
        .leftdiv
        {
            width: 200px;
            height: 80%;
            float: left;
            border: 1px solid green;
            margin: 20px;
        }
        .rightdiv
        {
            width: 200px;
            height: 80%;
            float: left;
            border: 1px solid red;
            margin: 20px;
        }

HTML Code

<div class="outerDiv">
        <div class="leftdiv">
            I am first div
        </div>
        <div class="rightdiv">
            I am second div
        </div>
    </div>

Re: Column Layout

Kensino

I can't get it working like that. The columns always go one top of each other. Also there are two IDs called leftDiv.. I think you can only use an ID once?

Yea sorry, i forgot to change that, the second inner div can be named as rightDiv.

So is it working now?

Re: Column Layout

I was able to get the code from res.web working. But the other code example still doesn't work in my browser, even with the right column renamed. It still shows the left column on top of the right column. I'm not sure why.

I will just use the other method for now, and get rid of all this hack code I had to put in from before.

I don't suppose that this is going to be able to expand vertically is it? Because the height of the outer div is set to 500px. I have no idea how much data will be inside the left and right column, if the content is loaded from the database.

Re: Column Layout

Can you tell me why, when I add a padding to your code, to the left column, it makes the left column always longer than the right column. Even if I add the same padding to the right column it doesn't change the right column at all.

I want a padding in my column so it looks better, but every time I add it, it messes up the height. I don't understand why that happens.

Re: Column Layout

Padding and margin always affects height/width of div.

You can apply padding to div as follows:

CSS Code
.leftdiv
        {
            width: 200px;
            height: 80%;
            float: left;
            border: 1px solid green;
            margin: 20px;
            padding:20px;

        }
        .rightdiv
        {
            width: 200px;
            height:80%;
            float: left;
            border: 1px solid red;
            margin: 20px;
            padding:20px;
        }

Re: Column Layout

There is no difference between two methods, just that the width and margins of inner divs are different and the one given by res.web uses External CSS files and mine uses inline CSS.

Re: Column Layout

So is there any way to make this expand vertically when content is added from the database? What will happen if the content is too long for the container div? I think I need to use a 100% height on the container div as well, but that doesn't seem to work.

Also, can you explain why padding changes the height or width of a div? If all I'm trying to do is move the text it contains down or in a little, I don't see how that affects the div, just by moving the placement of the text or other content inside it.