SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Making 2 Columns equal in height

    I have the divs like this:

    Code:
    <div id="content">
    
       <div id='left_content'></div> // float left
       <div id='right_content'></div> // float right
    
    </div>
    I don't know the height of left_content and right_content.
    I see that firefox automatically makes the height of the left_content equal to the right_content, but IE doesn't do anything. I want to know if there is a way to make the height of the smaller div equal to the height of the other div. If there isn't, the solution in firefox should do it, but how do I make the same think in IE.

    Thanks

  2. #2
    SitePoint Enthusiast LadynRed's Avatar
    Join Date
    Sep 2003
    Location
    TN
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have to see more code than that to adequately diagnose your problem.
    Web Goddess & Web Standards Evangelist

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What you need to do is create a DIV that contains everything, then put a wrapper inside that. Those two DIVs will hold one side. Then after the container, place another DIV that will ride alongside it. You'll also need a DIV that holds everything together as well.

    For example,

    HTML Code:
    <div id="container">
    	<div id="div1">
    		<div class="wrapper">
    			<p>
    				Blah blah blah blah blah
    				<br>
    				<br>
    				<br>
    				<br>
    				<br>
    				<br>
    			</p>
    		</div>
    	</div>
    	<div id="div2">
    		<p>Second DIV content</p>
    	</div>
    </div>
    Now, make sure you zero out your margins and padding in your stylesheet. The universal selector is a great way to do this, though there are better and mroe robust methods available.

    Code CSS:
    * {
    	margin: 0;
    	padding: 0;
    }

    Next, give your #container DIV a background color. Since the sidebar in this example will be grey, I'm going to go with white for my example.

    Code CSS:
    * {
    	margin: 0;
    	padding: 0;
    }
     
    #container {
    	background: #FFF;
    }

    Then float the div1 container (#div1) to the left and give it a width of 100&#37;. Do NOT apply any borders, margins, or padding to it, except for a negative margin on the side that you want the other DIV to ride up against. In this case, that negative margin will be on the right side and be 200px wide. Don't forget to add a background color - this is the color that will appear in the second DIV (your sidebar, for example).

    Code CSS:
    * {
    	margin: 0;
    	padding: 0;
    }
     
    #container {
    	background: #FFF;
    }
     
    #div1 {
    	background: #99C;
    	float: left;
    	margin: 0 -200px 0 0;
    	width: 100%;
    }

    Now, your .wrapper DIV inside the #div1 DIV will need to be given a background color. White would be a good color to use here for the purpose of this demonstration. It's also going to need a margin on its right side as well; but a regular right margin instead of a negative one. If this DIV is going to contain other floats, add overflow: hidden; to it to contain them within it. I like to put padding on this DIV to create some white space, but if you don't need it, you can safely remove it.

    Code CSS:
    * {
    	margin: 0;
    	padding: 0;
    }
     
    #container {
    	background: #FFF;
    }
     
    #div1 {
    	background: #99C;
    	float: left;
    	margin: 0 -200px 0 0;
    	width: 100%;
    }
     
    #div1 .wrapper {
    	background: #FFF;
    	margin: 0 200px 0 0;
    	overflow: hidden;
    	padding: 10px 0 10px 10px;	/* optional, feel free to remove */
    }

    Now that the left DIV is out of the way, we need to set up the right sidebar DIV as well. Start by giving it the same background color as the #div1 container (#99C), then float it to the left, and then set the width (200px).

    Code CSS:
    * {
    	margin: 0;
    	padding: 0;
    }
     
    #container {
    	background: #FFF;
    }
     
    #div1 {
    	background: #99C;
    	float: left;
    	margin: 0 -200px 0 0;
    	width: 100%;
    }
     
    #div1 .wrapper {
    	background: #FFF;
    	margin: 0 200px 0 0;
    	overflow: hidden;
    	padding: 10px 0 10px 10px;	/* optional, feel free to remove */
    }
     
    #div2 {
    	background: #99C;
    	float: left;
    	width: 200px;
    }

    Don't apply any left/right padding or margins here - instead, apply them to the container's children (such as the paragraph) instead. This will not only keep the layout intact when in Standards Mode, but will also prevent a LOT of Internet Explorer bugs and also avoid the issues with IE 5.x's Box Model as well. Of course, when floating elements, make sure that you clear out the next element inside the #container DIV that you don't want floated. No extra HTML is necessary; just use clear: left; on the element you don't want to float. IE 5/6 may get grouchy and pull the container up a bit; if that happens, just add height: 1%; to the cleared element and it'll be fine (hasLayout issue).

  4. #4
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whoa, nice answer. Just by reading it I was going to say:

    Add "height:??px" to each layers attributes.

    Same number, same height. Easy, if that's all they want.

    If not, read ^

    Ryan
    Here to Help

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My way of doing it allows the content to expand and contract regardless of the height. It also doesn't use any images either.

  6. #6
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is the best answer ever

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Glad you found it useful.

  8. #8
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What if div2 is taller than div1? This example doesn't seem to account for that.

    Thanks

  9. #9
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    This example doesn't seem to account for that.
    You're right it doesn't account for that, that example assumes that the main content (left side) will always be greater than the right side. You will need one more wrapping div to fix it.

    This Example was built off of that same code.
    Last edited by Rayzur; Aug 4, 2008 at 10:18.

  10. #10
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jFive View Post
    What if div2 is taller than div1? This example doesn't seem to account for that.

    Thanks
    Unless I accidentally omitted something, it would account for it by default simply by using background colors to cover up the non-content areas which create the illusion of equal-height columns.

  11. #11
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    Unless I accidentally omitted something,
    Giving the container 100% width and float:left gets it working for me.

    #container {
    background: #FFF;
    float:left;
    width:100%;

    }

    If you pull the float and width out of the #container the right side will be longer

    Code:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Two equal columns</title>
    <meta name="generator" content="PSPad editor, www.pspad.com"/>
    <style type="text/css">
    /* ---------- ::Resets:: --------------------- */
    body, address, blockquote, dl, ol, ul, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p, pre {
    margin:0;
    padding:0;
    }
    body {
        background: #333;
        padding:20px;
    }
    #container {
        background: #FFF;
         float:left;
        width:100%;
    }
     
    #div1 {
        background: #99C;
        float: left;
        margin: 0 -200px 0 0;
        width: 100%;
    }
     
    #div1 .wrapper {
        background: #FFF;
        margin: 0 200px 0 0;
        overflow: hidden;
    }
    #div2 {
        background: #99C;
        float: left;
        width: 200px;
    }
    p {padding:10px;}
    </style>
    </head>
    <body>
    
    <div id="container">
        <div id="div1">
            <div class="wrapper">
                <p>Blah blah blah blah blah</p>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
            </div>
        </div>
        <div id="div2">
            <p>Second DIV content</p>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
    
        </div>
    </div>
    
    </body>
    </html>

  12. #12
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Odd, since I never have to float the container DIV.

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    	<head>
    		<title>Untitled Document</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<meta http-equiv="Content-Style-Type" content="text/css">
    		<meta http-equiv="imagetoolbar" content="no">
    		<meta name="description" content="A brief description of the current page goes here.">
    		<meta name="keywords" content="keywords, go, here, only, once, page, content, has, been, finished">
    		<style type="text/css" media="screen">
    			
    		/* CSS RESET RULES */
    			html, body, a, abbr, acronym, address, area, b, bdo, big, blockquote, button, caption, cite, code,
    			col, colgroup, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, hr, i, img,
    			ins, kbd, label, legend, li, map, object, ol, p, param, pre, q, samp, small, span, strong, sub,
    			sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, ul, var {
    				margin: 0;
    				padding: 0;
    				vertical-align: baseline;
    			}
    
    			body {
    				background: #FFF;
    				color: #000;
    				font: 85&#37;/150% verdana, arial, helvetica, sans-serif;
    			}
    
    			fieldset {
    				border: 0;											/* we'll be applying a border to a DIV with the class of "fieldset" later on, so this isn't needed */
    				display: inline;									/* this squashes an IE float bug */
    			}
    
    			h1, h2, h3, h4, h5, h6 {								/* aside from changing the default font types, leave this alone */
    				font: bold 1em/1.5 georgia, garamond, "times new roman", times, serif;
    			}
    
    			img {
    				border: 0;											/* this squashes a Firefox bug */
    				vertical-align: bottom;								/* this squashes an IE bug */
    			}
    
    			.skip {
    				position: absolute;
    				left: -999em;
    			}
    		
    		/* GENERAL LAYOUT RULES */
    			#container {
    				background: #EEE;
    				color: inherit;
    				margin: 0 auto;
    				min-width: 750px;
    				max-width: 1150px;
    			}
    				#header {
    					background: #165498;
    					color: #FFF;
    					height: 80px;
    				}
    
    				#search-form div {
    					background: #CCC;
    					color: inherit;
    					float: right;
    					height: 1.75em;
    					line-height: 1.75em;
    					position: relative;
    					z-index: 1;
    				}
    					#search-form legend span, #search-form label {
    						position: absolute;
    						left: -999em;
    					}
    
    					#search-form input {
    						margin: 0;
    						vertical-align: top;
    					}
    
    				#menu {
    					background: #CCC;
    					color: inherit;
    					float: left;
    					height: 1.75em;
    					line-height: 1.75em;
    					margin: -1.75em 0 0 0;
    					width: 100%;
    				}
    					#menu li {
    						display: inline;
    						white-space: nowrap;
    					}
    						#menu li a {
    							background: #ECF;
    							color: #000;
    							float: left;
    							height: 1.75em;
    							margin: 0 2px 0 0;
    							padding: 0 0.5em;
    							text-decoration: none;
    						}
    
    						#menu li a:hover {
    							background: #0E0;
    							color: inherit;
    						}
    				
    				#content {
    					float: left;
    					width: 100%;
    				}
    					#content .wrapper {
    						background: #FFF;
    						color: #000;
    						margin: 0 220px 0 0;
    						overflow: hidden;
    						padding: 1em;
    					}
    						#content .wrapper p {
    							margin: 0.5em 0;
    						}
    				
    				#sidebar {
    					float: left;
    					margin: 0 0 0 -220px;
    					width: 220px;
    				}
    					#sidebar p {
    						padding: 0 10px;
    					}
    			
    				#footer {
    					background: #FF8;
    					clear: left;
    					color: #000;
    					height: 1%;
    				}
    					#footer em {
    						display: block;
    						font-style: normal;
    						padding: 0.5em 0 0.5em 1em;
    					}
    
    		</style>
    	</head>
    	<body>
    		<div id="container">
    			<div id="header">
    				<img src="#" width="200" height="80" alt="Web Site TItle" title="">
    			</div>
    			<form action="#" id="search-form" method="get">
    				<div class="fieldset">
    					<fieldset>
    						<legend><span>Search This Site</span></legend>
    						<label for="search">Enter Your Search Term Here</label>
    						<input id="search" name="search" size="25" type="text">
    						<input class="submit" type="submit" value="Search">
    					</fieldset>
    				</div>
    			</form>
    			<ul id="menu">
    				<li><a href="#">Menu Item</a></li>
    				<li><a href="#">Menu Item</a></li>
    				<li><a href="#">Menu Item</a></li>
    				<li><a href="#">Menu Item</a></li>
    				<li><a href="#">Menu Item</a></li>
    				<li><a href="#">Menu Item</a></li>
    			</ul>
    			<div id="content">
    				<div class="wrapper">
    					<h1>Web Page Title</h1>
    					<p>
    						Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat.
    						Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et,
    						cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis
    						ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla
    						facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie
    						fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo
    						bibendum, est.
    					</p>
    					<p>
    						Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat.
    						Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et,
    						cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis
    						ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla
    						facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie
    						fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo
    						bibendum, est.
    					</p>
    				</div>
    			</div>
    			<div id="sidebar">
    				<p>(Sidebar Goes Here)</p>
    			</div>
    			<div id="footer">
    				<em>Copyright &#38;#169; 2006-2008, The Monster Under the Bed. All Rights to Scare Unsuspecting Children Reserved.</em>
    			</div>
    		</div>
    	</body>
    </html>

  13. #13
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Odd, since I never have to float the container DIV.
    That was my thought exactly also!


Bookmarks

Posting Permissions

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