Height of middle contet using 3 column layout

HTML & CSS
1

hi to all

I used template from Ray’s CSS Layout Demos. I just modified it and make a 3 column layout. My problem is the height of middle content always follow the height of left content which should not, in ie6 there is no problem only in firefox.

Any help would greatly appreciated.

Thanks in advance
Tirso

Here is the link
http://webberzsoft.com/clients/csslayouttest/template_a_fix_header.php

2

Hi,

You have div in the middle column set to clear:left so it does what you have told it and it clears the floated left column.


        <div id="middle">
                <div class="column-in">
                    <div style="width:500px; margin:auto; border:1px solid #000000">
                        <div style="float:left; width:200px; border:1px solid #FF0000">asfafdas</div>
                        <div style="float:left; width:200px; border:1px solid #00FF00">asfafdas</div>
                   [B]     <div style="clear:left"></div>[/B]
                    </div>
                </div>
            </div>

Either float the middle column with the appropriate width so that cleared elements are contained within a parent float or if the design allows add overflow:hidden to the middle column which will also contain the clearing inside.


#middle {
    border: 1px solid #0000FF;
    margin:0 150px;
    background:yellow;
    font-size:80&#37;;
 [B]   overflow:hidden[/B]
}
3

Hi tirso,

It looks like Paul has showed you what caused your problems. :slight_smile:

I see you were working from This Layout. As you can see from the original code it goes to a lot of trouble just for IE6 since it does not support fixed positioning. Those inner divs on the header and footer were just for IE6, they gave right margins to IE6 only to keep the main scrollbar visible.

If you don’t mind your main scrollbar starting below the header there is a much easier way to cater to IE6. Since you are doing away with the fixed footer I would be inclined to use this simple method.
http://www.css-lab.com/demos/fixed/ap-fixed-headfoot.html

Working from that simplified example I inserted your columns and came up with this.
http://www.css-lab.com/test/fixed-header.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Fixed Header</title>

<style type="text/css">
* {margin:0;padding:0}/*use a proper reset on your final page*/

html,body {overflow:auto;}
body {height:100&#37;;}

h2,h3 {margin:10px 15px;}
p {margin:0 15px 10px;}

#header {
    width:100%;
    height:100px;
    position:absolute;
    left:0;
    top:0;
    overflow:auto;
    background:lime;
    border-bottom: 1px solid #000;
    text-align:center;
}
#outer {
    width:100%;
    position:absolute;
    left:0;
    top:101px;/*header height with border*/
    bottom:0;/*footer height with border*/
    overflow:auto;
    background:#FFF;
}
#inner{
    width:1100px;
    min-height:100%;
    margin:0 auto;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    background:#CDF;
}
#content{/*just to create top padding without tampering with min-height:100% on #inner*/
    width:1100px;
    padding:10px 0;
    background:#CDF;/*same as #inner or none*/
    overflow:hidden;/*contain floats*/
}
/*=== Begin Column Structure ===*/    
    #left {
        float:left;
        width:148px;
        border: 1px solid #FF0000;
        font-size:80%;
        }
    #right {
        float:right;
        width:148px;
        border: 1px solid #FF00FF;
        font-size:80%;
        }
    #middle {
        float:left;
        width:798px;
        border: 1px solid #0000FF;
        background:yellow;
        font-size:80%;
        overflow:hidden;/*contain floats*/
        }              
            #inner-mid{
            width:500px;
            margin:0 auto; 
            border:1px solid #000000;
            overflow:hidden;
            }
            .mid-a,
            .mid-b{
            width:200px;
            float:left;
            border:1px solid #FF0000;
            }
            .mid-b{border:1px solid #00FF00;}
</style>

<!--[if IE 6]>
<style type="text/css">
html {padding:101px 0 0;} 
html, body {overflow:hidden}
#outer {height:100%; position:static;}
#inner{height:100%;overflow:visible;}
</style>
<![endif]-->

</head>
<body>
<div id="header">   
    <h2>Fixed Header</h2>
</div>

<div id="outer">   
<div id="inner">
    <div id="content"> 
        <div id="left">               
            <p>safdad</p>
            <p>safdad</p>
            <p>safdad</p>
            <p>safdad</p>
            <p>safdad</p>   
            <p>safdad</p>
            <p>safdad</p>
            <p>safdad</p>
            <p>safdad</p>
            <p>safdad</p>
            <p>safdad</p>
            <p>safdad</p>
            <p>safdad</p>
            <p>safdad</p>
            <p>safdad</p>                         
            <p>safdad</p>
        </div>                              
        <div id="middle">
            <div id="inner-mid">
                <div class="mid-a">
                    <p>asfafdas</p>
                    <p>asfafdas</p>
                    <p>asfafdas</p>
                    <p>asfafdas</p>
                    <p>asfafdas</p>
                    <p>asfafdas</p>
                </div>
                <div class="mid-b">
                    <p>asfafdas</p>
                    <p>asfafdas</p>
                    <p>asfafdas</p>
                    <p>asfafdas</p>
                </div>                   
            </div>
        </div>
        <div id="right">
            <p>safdad</p>
            <p>safdad</p>
            <p>safdad</p>
            <p>safdad</p>
            <p>safdad</p>
        </div>
    </div><!--end content-->        
</div><!--end inner-->
</div><!--end outer-->
 
</body>
</html>
4

hi Paul O’B and Rayzur,

Your the great css guru, it works perfectly especially with Rayzur complete code. I’m very proud to both of you, your always my savior in any problems that I’ve encountered with regards to css layout. A million thanks to both of you.