www.webdeveloper.com
Results 1 to 5 of 5

Thread: three column DIVs will not show equal height

Hybrid View

  1. #1
    Join Date
    Jun 2005
    Posts
    25

    three column DIVs will not show equal height

    ok what i am after is three divs side by side all the same height, no matter what the divs content. be it that div one has 4 lines of text, div 2 have 8 lines of text and div 3 has 12 lines of text. all of them will be the same height and have different coloured backgrounds.

    can anyone suggest how I do this correctly?

    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Welcome to our web site</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css"><!--
    body { border: 0em solid #000; background-color: #ddd; }
    
    .bodyContainer {
    background-color: orange; padding: 0em 0em 0em 0em;	
    width: 45em;
    border-top-left-radius: 1.125em;	border-top-right-radius: 1.125em;
    overflow: hidden;
    position: relative;
    }
    
    .menu {
    background: green; padding: 0.313em 0em 0.313em 0em;
    border-top-left-radius: 1.125em;	border-top-right-radius: 1.125em;
    text-align: center;					font-size: 1.1em;
    }
    
    .leftSidePanel {
    background-color: blue; padding: 0.313em 0.625em 0em 0.625em;
    float: left;
    width: 10em;
    }
    
    .mainContent {
    background-color: lightblue; padding: 0.625em 0.625em 0.625em 0.625em;
    width: 20em;
    border-left: 0.5em solid purple;	border-top: 0.3em solid purple;		border-right: 0.5em solid purple;
    border-top-left-radius: 1.125em;	border-top-right-radius: 1.125em;
    text-align: center;					float: left; 
    
    height: 100&#37;;
    }
    
    .formWrapper{
    padding: 0em;
    text-align: left;
    border-top-left-radius: 1.125em;	border-top-right-radius: 1.125em;
    }
    
    .rightSidePanel	{
    background-color: yellow; padding: 0.313em 0.713em 0em 0.313em;
    float: right;
    width: 10em;
    }
    
    .footer {
    background-color: #ddd; padding: 1em 0em 0em 0em;
    text-align: center;
    font-size: 0.875em;
    }
    
    .clearfloat {
    clear: both;
    }
    --></style>
    
    </head>
    <body>
    <!-- bodyContainer start -->
    <div class="bodyContainer">
    
    	<!-- menu start -->
    	<div class="menu">
    		<div class="clearfloat"></div>
    	</div>
    	<div class="clearfloat"></div>
    	<!-- menu end -->
    
    		<div class="leftSidePanel">
    		<br><br>blah<br><br>blah<br><br>blah<br><br>blah
    		<br><br>blah<br><br>blah
    		</div>
    
    			<!-- mainContent start -->
    			<div class="mainContent">
    				<div class="formWrapper">
    				<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah
    				</div>
    			</div>
    			<!-- mainContent end -->
    
    		<div class="rightSidePanel">
    		<br><br><br><br>blah<br>blah<br><br>blah<br><br>blah
    		</div>
    
    <!-- Footer start -->
    <br class="clearfloat">
    <div class="footer">
    some text
    </div>
    
    
    </div>
    <!-- body container end -->
    
    </body>
    </html>
    Last edited by jasonc310771; 04-26-2012 at 04:23 PM.

  2. #2
    Join Date
    Apr 2012
    Location
    winston-salem NC
    Posts
    8

    Thre Divs columns

    Start by making sure your pading is the same all around fo each div and make sure you don't have extra breaks or that they all have the same amount of breaks. a break is <br>. I noticed you had quite a few.

  3. #3
    Join Date
    Apr 2012
    Location
    winston-salem NC
    Posts
    8
    Also give each div's class or id the same height is an easy way.

  4. #4
    Join Date
    Apr 2012
    Posts
    22
    I suppose you want to use different bg colors for the 3 of them. If so, after multiple tries to do the same, I just ended with a table. Box model has its limitation no matter how modern it is and how smart it makes you look. If you can't live with its limitations, use the old fashioned table

  5. #5
    Join Date
    Apr 2012
    Location
    winston-salem NC
    Posts
    8
    This should be what you are looking for. I set a minimum height so that they will still expand freely. Also you have a .3 padding in the center dic so you need to compensate for that in the left and right.

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Welcome to our web site</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css"><!--
    body { border: 0em solid #000; background-color: #ddd; }

    .bodyContainer {
    background-color: orange; padding: 0em 0em 0em 0em;
    width: 45em;
    border-top-left-radius: 1.125em; border-top-right-radius: 1.125em;
    overflow: hidden;
    position: relative;
    }

    .menu {
    background: green; padding: 0.313em 0em 0.313em 0em;
    border-top-left-radius: 1.125em; border-top-right-radius: 1.125em;
    text-align: center; font-size: 1.1em;
    }

    .leftSidePanel {
    background-color: blue; padding: 0.613em 0.625em 0em 0.625em;
    min-height:300px;
    float: left;
    width: 10em;
    }

    .mainContent {
    background-color: lightblue; padding: 0.313em 0.625em 0.625em 0.625em;
    min-height:300px;
    width: 20em;
    border-left: 0.5em solid purple; border-top: 0.3em solid purple; border-right: 0.5em solid purple;
    border-top-left-radius: 1.125em; border-top-right-radius: 1.125em;
    text-align: center; float: left;


    }

    .formWrapper{
    padding: 0em;
    text-align: left;
    border-top-left-radius: 1.125em; border-top-right-radius: 1.125em;
    }

    .rightSidePanel {
    background-color: yellow; padding: 0.613em 0.625em 0em 0.625em;
    float: right;
    min-height:300px;

    width: 10em;
    }

    .footer {
    background-color: #ddd; padding: 1em 0em 0em 0em;
    text-align: center;
    font-size: 0.875em;
    }

    .clearfloat {
    clear: both;
    }
    --></style>

    </head>
    <body>
    <!-- bodyContainer start -->
    <div class="bodyContainer">

    <!-- menu start -->
    <div class="menu">
    <div class="clearfloat"></div>
    </div>
    <div class="clearfloat"></div>
    <!-- menu end -->

    <div class="leftSidePanel">
    blah<br><br>blah<br><br>blah<br><br>blah
    <br><br>blah<br><br>blah
    </div>

    <!-- mainContent start -->
    <div class="mainContent">
    <div class="formWrapper">
    blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah
    </div>
    </div>
    <!-- mainContent end -->

    <div class="rightSidePanel">
    blah<br>blah<br><br>blah<br><br>blah
    </div>

    <!-- Footer start -->
    <br class="clearfloat">
    <div class="footer">
    some text
    </div>


    </div>
    <!-- body container end -->

    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles