Jump to content

[SOLVED] 3 Columns same height

wepz

By wepz
in CSS Help

Recommended Posts

wepz Newbie

wepz

Posted
Posted

hi hello,

 

I've got a layout with 3 columns, 3 divs. What i want is all 3 columns keep the same height. The max height is depending on the column which contains the largest content.

 

this is my CSS now:

@charset "utf-8";
/* CSS Document */

body{
margin:0px;
padding:0px;
}

#container{
width:900px;
height:auto;
margin:auto;
padding:0px;
overflow:visible;
}

#l_column{
width:300px;
height:auto;
background-color:#888888;
float:left;
}

#m_column{
width:380px;
height:auto;
background-color:#666666;
margin-left:10px;
margin-right:10px;
float:left;
}

#r_column{
width:200px;
min-height:inherit;
background-color:#444444;
float:left;
}

what must i do...

Link to comment
https://forums.phpfreaks.com/topic/176316-solved-3-columns-same-height/
Share on other sites
wepz Newbie

wepz

Posted
  • Author
Posted

indeed, that's what i mean.

'm just a beginner and i can't really find out in that source code what i must chance to make it work in mine.

 

this is my code. the 'container' is the div in which the left, middle an right column are kept to getter. can you show me what i must do different

 

#container{
width:824px;
min-height:350px;
position:absolute;
top:200px;
left:50%;
margin:0px;
margin-left:-412px;
padding:0px;
background-color:#ffffff;
overflow:visible;
}

#l_kolom{
width:300px;
min-height:inherit;
background-color:#c3e4f5;
float:left;
}

#m_kolom{
width:330px;
min-height:inherit;
background-color:#ffffff;
margin-left:10px;
margin-right:10px;
float:left;
}

#r_kolom{
width:174px;
min-height:inherit;
background-color:#ffffff;
background-image:url(../img/r_kolom_bg.jpg);
background-repeat:no-repeat;
float:left;
}

sticks464 Newbie

sticks464

Posted
Posted

This should do for what you want. The longest column will push the other two columns down.

Checked in IE8, FF, Safari, Chrome and Opera. Not checked in IE7.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>3 Col Equalizing Divs</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0}

h1,h2,h3,h4,h5{padding:5px 10px; text-align:center}
p,ul{padding: 5px 10px}
ul{margin-left:16px}
#header h2 {font-size:18px}
#footer h5 {padding:0 10px}

body {
background: #FFF;
font-family: Arial, Tahoma, sans-serif;
font-size: 95%;
text-align: center;
color:#000;
}
#container {
width: 824px;
min-height: 350px;
margin: 15px auto;	
background: #fff;
text-align: left;
}
#header {
width: 100%;
height:3.5em;
text-align: center;
}
#innerwrap {
    position:relative;
    background: #fff;
    overflow:hidden;
    height:1%;
}
#content {
width: 330px;
background: #fff;
text-align: justify;
color: #000;
float:left;
position:relative;
left:310px;
}
#leftcol {
width: 300px;
margin: 0;
float: left;
position:relative;
left: -330px;
z-index:2;
}
#rightcol {
width: 174px;
margin: 0;
float: right;
position:relative;
z-index:2;
}
#footer {
width: 100%;
height: 2em;
line-height:2em;
text-align: center;
clear: both;
}
#botleft {
    position:absolute;
    z-index:1;
    height:100%;
    bottom:0;
    left:0;
    width:300px;
    background:#c3e4f5;
}
#botright {
    position:absolute;
    z-index:1;
    height:100%;
    bottom:0;
    right:0;
    width:174px;
    background:#fff;
}
.center {
   text-align: center;
   color: #000;
}
#footer h5 {padding:0 10px}
</style>
<!--[if IE 7]>
<style type="text/css">
#leftcol {left:0; margin-left:-630px}
#content {left:0; margin-left:300px;}
</style>			
<![endif]-->
</head>
<body>
<div id="container">
<div id="header"><h2>Equalizing Columns</h2></div>
    <div id="innerwrap">

   	  <div id="content">
                        
        <h4 class="center">Middle Col</h4>
   		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
   		<p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
      </div>
    	<div id="leftcol">
            <h4>Left Col</h4>

    		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
            Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, 
            lacinia vel, elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
            Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, 
            lacinia vel, elit.</p>
            
    	</div>
    	<div id="rightcol">
            <h4>Right Col</h4>
        	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
            Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, 
            lacinia vel, elit.</p>

            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
            Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, 
            lacinia vel, elit.</p>
            
            
            
    	</div>
    	<div id="botleft"></div><!--equal height coloring div-->
        <div id="botright"></div><!--equal height coloring div-->
    </div><!--end innerwrap-->   
    <div id="footer"><h5>Footer Stuff</h5></div>
</div>
</body>

</html>

 

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.