Jump to content

[SOLVED] 3 Columns same height

wepz

By wepz
in CSS Help

 Share

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
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;
}

Link to comment
Share on other sites
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>

 

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
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.