SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Equal Column Heights - Pure CSS

    Hi there,

    Well i've been looking around on Google for what seems like all-day and I haven't really come across any solutions to this problem other than involving JQuery (which frankly seems unnecessary!), CSS hacks or stuff which involves images.

    So, basically I want a CSS-only solution which gives equal heights for columns whether they're 2, 3 or even 10 columns. I came across the following which works but to be honest just looks like another CSS hack. Is there a particular reason why this is so difficult? lol

    http://mattkirman.com/2009/10/12/equ...with-pure-css/

    I've tried using a height of 100% on columns but that seems to set the height to 1200px high - why does it just stop there? :S (please see the code below)

    Code:
    <style type="text/css">
    
    #header {
    padding:5px 10px;
    background:#ddd;
    }
    
    #nav {
    padding:5px 10px;
    background:#cccccc;
    }
    
    #nav ul {
    margin:0;
    padding:0;
    list-style:none;
    }
    
    #nav li {
    display:inline;
    margin:0;
    padding:0;
    }
    
    #container{background:black;}
    
    #main {
    float:left;
    width:45.3%;
    padding:10px;
    background:#0066CD;
    }
    
    #leftbar {
    float:left;
    width:25%;
    height:100%;
    padding:8px;
    background:#23297A;
    }
    
    #rightbar {
    float:right;
    width:25%;
    height:100%;
    padding:8px;
    background:#23297A;
    }
    
    #footer {
    clear:both;
    padding:5px 10px;
    background:#cccccc;
    }
    
    #footer p {
    margin:0;
    }
    
    h1 {
    margin:0;
    }
    
    h2 {
    margin:0 0 1em;
    }
    </style>
    
    <div id="container">
    <div id="header"><h1>Main Heading</h1></div>
    <div id="nav">
    Navigation
    </div>
    <div id="leftbar">
    <h2>Left</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
    </div>
    <div id="main">
    <h2>Middle</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ligula enim, egestas pellentesque laoreet a, sagittis ac ante. Suspendisse auctor purus sit amet velit dapibus vel iaculis mi fringilla. Nulla facilisi. Morbi placerat massa sit amet elit sagittis in ultrices dui facilisis. Quisque nec velit leo, sit amet varius mi. Proin scelerisque posuere massa nec bibendum. Aenean nibh nisl, venenatis quis lobortis eget, molestie non dolor. Ut rhoncus arcu id sem iaculis iaculis. In auctor condimentum quam sit amet commodo. Aliquam ipsum risus, rhoncus vel suscipit non, rutrum eget lorem. Pellentesque ut laoreet quam. Praesent purus nulla, sodales eget mollis ac, tempor nec dui.
    
    Donec ut eros ac ipsum facilisis congue. Vestibulum tincidunt, sapien quis ultrices viverra, nibh felis cursus orci, nec sodales nisl mauris sit amet nisi. Nam venenatis posuere massa. Integer eget bibendum metus. Vestibulum ultrices, libero in porta imperdiet, neque elit accumsan odio, nec blandit justo nulla et dolor. Etiam eu nibh eget tellus porta laoreet et eu arcu. Fusce volutpat urna ac sem aliquet vehicula ornare nunc volutpat. Ut porttitor condimentum dui, sit amet hendrerit ante luctus non. Fusce commodo enim at ligula iaculis sollicitudin et vel urna. Morbi pharetra ullamcorper pulvinar. Suspendisse ligula felis, interdum ut sagittis vitae, auctor eget erat. Aenean porta ultrices tellus, sit amet cursus tortor hendrerit non. In lobortis cursus interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
    </div>
    <div id="rightbar">
    <h2>Right</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
    </div>
    <div id="footer">
    <p>Footer</p>
    </div>
    </div>
    Cheers,

    Shoxt3r

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Equal height columns aren't necessarily hard, but the easiest way isn't for everyone.
    For example, they are incredibly "fluid", but not cross-browser friendly with older browsers; and, of course, they are not responsive.
    Ultimately, it depends on your needs... your target audience of users.

    Easy Equal Height Columns, 2 or 10 (IE8+):
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    http://www.sitepoint.com/forums/showthread.php?1001492-Equal-Column-Heights-Pure-CSS
    Thread: Equal Column Heights - Pure CSS
    2013.03.14 15:21
    Shoxt3r
    -->
    <head>
        <title>A Row of Columns</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-language" content="en-us">
        <style type="text/css">
    
    .table {
        display:table;
        table-layout:fixed;
        width:100%;
        background-color:#dcb;
        border:4px solid #cba;
        margin-left:-4px;
    }
    .tcell {
        display:table-cell;
        background-color:#fed;
        padding:0px 8px;
    }
    .tcell + .tcell {
        border-left:1px dashed #cba;
    }
    p {
        margin:.5em 0;
    }
    
        </style>
    </head>
    <body>
    
    <div class="table">
        <div class="tcell">
            <p>A column of content.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies sollicitudin nisi, ut molestie felis adipiscing sit amet. Sed auctor vehicula commodo.</p>
         </div>
        <div class="tcell">
            <p>A column of content.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="tcell">
            <p>A column of content.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies sollicitudin nisi, ut molestie felis adipiscing sit amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae faucibus felis. Vivamus at metus eget eros consequat fringilla.</p>
        </div>
        <div class="tcell">
            <p>A column of content.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies sollicitudin nisi, ut molestie felis adipiscing sit amet. Sed auctor vehicula commodo.</p>
         </div>
    </div>
    
    </body>
    </html>
    Just a note: The inner divs don't have to be classed. The following technique styles them without assinging them a class:
    Code:
    .table div {
        display:table-cell;
        ...
    }
    The following link might excite you (it's responsive!):
    http://www.pmob.co.uk/temp/equal-boxes-no-parent3.htm

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,107
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Yep, display: table is the way to go here. To the deuce with IE < 8.

    Quote Originally Posted by Shoxt3r View Post
    I've tried using a height of 100% on columns but that seems to set the height to 1200px high - why does it just stop there?
    height: 100% only works if the container element has a set height, which usually isn't (or shouldn't be) the case.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Just a note: The inner divs don't have to be classed.
    If you are not going to use classes for the DIVs I HIGHLY recommend the CHILD selector.
    Code:
    .table>div {
        display:table-cell;
        ...
    }
    other wise all descendant DIVs will be table cells. That's not what you want.

    Also note that aside from lack of older IE support, this method also eliminate the possibility of using AP for child elements of the cloumns ( yeah, a frivolity, but I like it).

    you can also do equal heights this way, note each column will require an extra wrapper ans some math:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title></title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<meta name="viewport" content="width=device-width">
    		<style type="text/css">
    			.cols{margin:0 20%; background: silver; }
    			.col{min-height: 150px; float: left;   width:50%; margin-left:-50%; background: silver}
    			.col+.col{margin-left: 0;background: orange} 
    			.col+.col+.col{ background: pink;height:500px;}
    			.frst{margin-left:33.3333%; background: pink; }
    			.sec{ background: orange;  width:100%; display: inline-block; vertical-align: top}
    		</style>
    	</head>
    	<body>
    		<div class="cols">
    			<div class="frst">
    				<div class="sec">
    					<div class="col left"> left</div>
    					<div class="col middle">middle</div>
    					<div class="col mi "> right</div>
    				</div>
    			</div>
    		</div>
    	</body>
    </html>
    hope that helps

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    That's a interesting way Dresden. I think I would prob have some issues using that in the wild as its a bit complicated. On the iPad there is a rounding error of 2px on the left column.

    I did a cool trick on my site in my sig. That main div is a faux column. I realized I needed it after the fact. So I just did #wrap:before to hold the faux column. Very easy way.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Shoxt3r View Post
    Don't use that method as it kills any in-page links in the page. That means you can't use fragment identifiers in the page because the content will scroll and be unreachable and unusable. It's ok to use for small boxes in a row but not for anything that holds real content. That technique was taken from the "one true layout" example on "list apart" which mentions the bug and why its not really a viable solution.

    Just use display:table for IE8+ as mentioned by others but if you want IE7 and below support then you will need to use one of the other hacky methods. My personal favourite is the absolute overlay technique although it is a little awkward for fluid columns.

    You can use display:table for good browsers and then feed IE7 and below an expression to do the absolute overlay without extra mark up.

  7. #7
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    If you are not going to use classes for the DIVs I HIGHLY recommend the CHILD selector.
    Code:
    .table>div {
        display:table-cell;
        ...
    }
    other wise all descendant DIVs will be table cells. That's not what you want.

    Also note that aside from lack of older IE support, this method also eliminate the possibility of using AP for child elements of the cloumns ( yeah, a frivolity, but I like it).

    you can also do equal heights this way, note each column will require an extra wrapper ans some math:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title></title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<meta name="viewport" content="width=device-width">
    		<style type="text/css">
    			.cols{margin:0 20%; background: silver; }
    			.col{min-height: 150px; float: left;   width:50%; margin-left:-50%; background: silver}
    			.col+.col{margin-left: 0;background: orange} 
    			.col+.col+.col{ background: pink;height:500px;}
    			.frst{margin-left:33.3333%; background: pink; }
    			.sec{ background: orange;  width:100%; display: inline-block; vertical-align: top}
    		</style>
    	</head>
    	<body>
    		<div class="cols">
    			<div class="frst">
    				<div class="sec">
    					<div class="col left"> left</div>
    					<div class="col middle">middle</div>
    					<div class="col mi "> right</div>
    				</div>
    			</div>
    		</div>
    	</body>
    </html>
    hope that helps
    So I'm playing with this. I dont see how this is any different than just giving three divs a height of 500px. Your code says .col+.col+.col{ height:500px;}. How is that equal height columns? As expected adding more text makes it all fall apart past 500px.

  8. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Shoxt3r View Post
    Hi there,

    Well i've been looking around on Google for what seems like all-day and I haven't really come across any solutions to this problem other than involving JQuery (which frankly seems unnecessary!), CSS hacks or stuff which involves images.

    So, basically I want a CSS-only solution which gives equal heights for columns whether they're 2, 3 or even 10 columns. I came across the following which works but to be honest just looks like another CSS hack. Is there a particular reason why this is so difficult? lol

    http://mattkirman.com/2009/10/12/equ...with-pure-css/

    I've tried using a height of 100% on columns but that seems to set the height to 1200px high - why does it just stop there? :S (please see the code below)

    Code:
    <style type="text/css">
    
    #header {
    padding:5px 10px;
    background:#ddd;
    }
    
    #nav {
    padding:5px 10px;
    background:#cccccc;
    }
    
    #nav ul {
    margin:0;
    padding:0;
    list-style:none;
    }
    
    #nav li {
    display:inline;
    margin:0;
    padding:0;
    }
    
    #container{background:black;}
    
    #main {
    float:left;
    width:45.3%;
    padding:10px;
    background:#0066CD;
    }
    
    #leftbar {
    float:left;
    width:25%;
    height:100%;
    padding:8px;
    background:#23297A;
    }
    
    #rightbar {
    float:right;
    width:25%;
    height:100%;
    padding:8px;
    background:#23297A;
    }
    
    #footer {
    clear:both;
    padding:5px 10px;
    background:#cccccc;
    }
    
    #footer p {
    margin:0;
    }
    
    h1 {
    margin:0;
    }
    
    h2 {
    margin:0 0 1em;
    }
    </style>
    
    <div id="container">
    <div id="header"><h1>Main Heading</h1></div>
    <div id="nav">
    Navigation
    </div>
    <div id="leftbar">
    <h2>Left</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
    </div>
    <div id="main">
    <h2>Middle</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ligula enim, egestas pellentesque laoreet a, sagittis ac ante. Suspendisse auctor purus sit amet velit dapibus vel iaculis mi fringilla. Nulla facilisi. Morbi placerat massa sit amet elit sagittis in ultrices dui facilisis. Quisque nec velit leo, sit amet varius mi. Proin scelerisque posuere massa nec bibendum. Aenean nibh nisl, venenatis quis lobortis eget, molestie non dolor. Ut rhoncus arcu id sem iaculis iaculis. In auctor condimentum quam sit amet commodo. Aliquam ipsum risus, rhoncus vel suscipit non, rutrum eget lorem. Pellentesque ut laoreet quam. Praesent purus nulla, sodales eget mollis ac, tempor nec dui.
    
    Donec ut eros ac ipsum facilisis congue. Vestibulum tincidunt, sapien quis ultrices viverra, nibh felis cursus orci, nec sodales nisl mauris sit amet nisi. Nam venenatis posuere massa. Integer eget bibendum metus. Vestibulum ultrices, libero in porta imperdiet, neque elit accumsan odio, nec blandit justo nulla et dolor. Etiam eu nibh eget tellus porta laoreet et eu arcu. Fusce volutpat urna ac sem aliquet vehicula ornare nunc volutpat. Ut porttitor condimentum dui, sit amet hendrerit ante luctus non. Fusce commodo enim at ligula iaculis sollicitudin et vel urna. Morbi pharetra ullamcorper pulvinar. Suspendisse ligula felis, interdum ut sagittis vitae, auctor eget erat. Aenean porta ultrices tellus, sit amet cursus tortor hendrerit non. In lobortis cursus interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
    </div>
    <div id="rightbar">
    <h2>Right</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
    </div>
    <div id="footer">
    <p>Footer</p>
    </div>
    </div>
    Cheers,

    Shoxt3r
    And I'm playing with this one. Am I missing something? You have to set a fixed height on the wrap to hide the overflow. So how is it any better than just giving two divs equal heights? And I could not recreate the link problem

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by EricWatson View Post
    And I'm playing with this one. Am I missing something? You have to set a fixed height on the wrap to hide the overflow. So how is it any better than just giving two divs equal heights? And I could not recreate the link problem
    No you don't give the parent any height if you are talking about the margin/padding-bottom method.

    Code:
    #wrapper {
        margin: 0 auto;    /* Center the wrapper horizontally */
        overflow: hidden;
        width: 500px;
    }
    
    #content, #sidebar {
        margin-bottom: -10000px;
        padding-bottom: 100000px;
    }
    
    #content {
        float: right;
        width: 300px;
    }
    
    #sidebar {
        float: left;
        width: 200px;
    }
    The overflow:hidden cuts off the extended background and allows the equal column effect.
    It's a badly flawed approach though as can be seen by clicking the link in this example:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    #wrapper {
    	background:#fff;
    	position:relative;
    	margin:0 auto;
    	overflow:hidden;
    	width:500px
    }
    #content {
    	background:#ccc;
    	float:left;
    	width:300px;
    }
    #sidebar {
    	float:right;
    	width:200px;
    	background:green
    }
    #sidebar, #content {
    	padding-bottom:10000px;
    	margin-bottom:-10000px;
    }
    </style>
    </head>
    
    <body>
    <div id="wrapper">
    		<div id="content">
    				<h1>Heading</h1>
    				<p><a href="#last">Link to last item</a></p>
    				<p>content </p>
    				<p>content </p>
    				<p>content </p>
    				<p>content </p>
    				<p>content </p>
    				<p id="last">content </p>
    		</div>
    		<div id="sidebar">
    				<h1>Heading</h1>
    				<p>content </p>
    				<p>content </p>
    				<p>content </p>
    				<p>content </p>
    		</div>
    </div>
    </body>
    </html>

  10. #10
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Huh. I could of sworn I had overflow on the wrap. I must not of. Thanks Paul I see the link now. So it's clickable it just messes things up.

    Here is the demo of the faux column I was talking about earlier. http://www.websitecodetutorials.com/...ux-columns.php

  11. #11
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    So I'm playing with this. I dont see how this is any different than just giving three divs a height of 500px. Your code says .col+.col+.col{ height:500px;}. How is that equal height columns? As expected adding more text makes it all fall apart past 500px.
    Eric, that was put there as a place holder height, nothing more; oin the wild you'd just remove the height as it's bad practice to set height on elements with content. so while developing the CSS I targeted the last div to serve as the TALL column while I fine tuned the code, w/o having to resort to typing lorem ipsum. in retrospect, i should have used min-height, as that would have still worked even you forgot to remove that vestigial declaration.

  12. #12
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Ha my bad. I'm retarded. Note to self. Don't make posts before 3am as my brain obviously has not woken up yet.


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
  •