Multiple Columns Equal Horizontal spacing and height

MM4D · February 13, 2014, 3:36pm

I am currently trying to get the following layout

However, using display:inline-block I have managed to get this far

CSS

	#promobox {width: 100%; height: 100%; position: relative; margin: 10px 0px 20px 0px; padding: 0px; color: #FFF; overflow: hidden; text-align: justify; vertical-align: top;}
	#promobox p {margin: 0; padding: 0;}
	#promobox ul {margin: 0 0 10px 0;}
	#promobox ul li {width: 98%; float: left; margin: 5px 0 0 0; background: url(theme-images/bullet-blnk.png) no-repeat left center; padding: 0 0 0 10px; font-size: 18px;}
	#promobox h3 {line-height: 1; color: #fff; letter-spacing: -1px; font-size: 25px; float: left; margin: 0; padding: 0 0 3px 0;}
	#promobox .pricebox {line-height: 1; float: right; text-align: center; padding-right: 10px;}
	#promobox .pricebox .lrg {line-height: 1; letter-spacing: -1px; font-size: 35px; font-weight: bold; margin: 0; padding: 0;}
	#promobox a {background: #004055; color: #fff; float: left; margin: 15px 10px 0 0; padding: 5px 10px; text-decoration: none; -moz-border-radius: 5px; font-weight: normal;}
	#promobox a:hover {background: #005773;}
	
	#promobox.one {width: 30%; height: 100%; display:inline-block; background: #00ACE6 url(theme-images/bg_promo1.png) repeat-x bottom; margin: auto; padding: 10px; text-align: left;}

HTML

	<div id="promobox">
		<div id="promobox" class="one">
			<h3>Title 1</h3>
			
				<div class="pricebox">
                	<p>Only</p>
                    <p class="lrg">&pound;3.50</p>
                </div>
				
                <ul>
                	<li>List 1</li>
                    <li>List 2</li>
                    <li>List 3</li>
                    <li>List 4</li>
                    <li>List 5</li>
                    <li>List 6</li>
                    <li>List 7</li>
                    <li>List 8</li>
                </ul>
                <p><a href="LINK" title="Order Now">Order Now</a></p>
                <p><a href="page.html" title="Order Now">More Info</a></p>				
            </div>
            <div id="promobox" class="one">
				<h3>Title 2</h3>
                <div class="pricebox">
                	<p>From Only</p>
                    <p class="lrg">&pound;8</p>
                </div>
                <ul>
                	<li>List 1</li>
                    <li>List 2</li>
                    <li>List 3</li>
                    <li>List 4</li>
                    <li>List 5</li>
                    <li>List 6</li>
                    <li>List 7</li>
                    <li>List 8</li>
                </ul>
                <p><a href="LINK" title="Order Now">Order Now</a></p>
                <p><a href="page.html" title="Order Now">More Info</a></p>				
            </div>
            <div id="promobox" class="one">
            	<h3>Add-Ons</h3>
                <div class="pricebox">
                	<p>From Only</p>
                    <p class="lrg">&pound;5</p>
                </div>
                               <ul>
                	<li>List 1</li>
                    <li>List 2</li>
                    <li>List 3</li>
                    <li>List 4</li>
                    <li>List 5</li>
                    <li>List 6</li>
                    <li>List 7</li>
                    <li>List 8</li>
                </ul>
                <p><a href="LINK" title="Order Now">Order Now</a></p>
                <p><a href="page.html" title="Order Now">More Info</a></p>					
            </div>
        </div>

I have tried using the CSS Table method, and whilst that gives me the equal height columns, it completely messes up the horizontal spacing.

CSS

	#promobox {width: 100%; height: 100%; position: relative; margin: 10px 0px 20px 0px; padding: 0px; color: #FFF; overflow: hidden; text-align: justify; vertical-align: top; display: table;}
	#promobox p {margin: 0; padding: 0;}
	#promobox ul {margin: 0 0 10px 0;}
	#promobox ul li {width: 98%; float: left; margin: 5px 0 0 0; background: url(theme-images/bullet-blnk.png) no-repeat left center; padding: 0 0 0 10px; font-size: 18px;}
	#promobox h3 {line-height: 1; color: #fff; letter-spacing: -1px; font-size: 25px; float: left; margin: 0; padding: 0 0 3px 0;}
	#promobox .pricebox {line-height: 1; float: right; text-align: center; padding-right: 10px;}
	#promobox .pricebox .lrg {line-height: 1; letter-spacing: -1px; font-size: 35px; font-weight: bold; margin: 0; padding: 0;}
	#promobox a {background: #004055; color: #fff; float: left; margin: 15px 10px 0 0; padding: 5px 10px; text-decoration: none; -moz-border-radius: 5px; font-weight: normal;}
	#promobox a:hover {background: #005773;}
	
	#promobox.one {width: 30%; height: 100%; display: table-cell; background: #00ACE6 url(theme-images/bg_promo1.png) repeat-x bottom; margin: auto; padding: 10px; text-align: left;}
	#promobox.two {width: 30%; height: 100%; display: table-cell; background: #00ACE6 url(theme-images/bg_promo2.png) repeat-x bottom; margin: auto; padding: 10px;}
	#promobox.three {width: 30%; height: 100%; display: table-cell; background: #09C1FF url(theme-images/bg_promo3.png) repeat-x bottom; margin: auto; padding: 10px;}

HTML

	<div id="promobox">
		<div id="promobox" class="one">
			<h3>Title 1</h3>
			
				<div class="pricebox">
                	<p>Only</p>
                    <p class="lrg">&pound;3.50</p>
                </div>
				
                <ul>
                	<li>List 1</li>
                    <li>List 2</li>
                    <li>List 3</li>
                    <li>List 4</li>
                    <li>List 5</li>
                    <li>List 6</li>
                    <li>List 7</li>
                    <li>List 8</li>
                </ul>
                <p><a href="LINK" title="Order Now">Order Now</a></p>
                <p><a href="page.html" title="Order Now">More Info</a></p>				
            </div>
            <div id="promobox" class="two">
				<h3>Title 2</h3>
                <div class="pricebox">
                	<p>From Only</p>
                    <p class="lrg">&pound;8</p>
                </div>
                <ul>
                	<li>List 1</li>
                    <li>List 2</li>
                    <li>List 3</li>
                    <li>List 4</li>
                    <li>List 5</li>
                    <li>List 6</li>
                    <li>List 7</li>
                    <li>List 8</li>
                </ul>
                <p><a href="LINK" title="Order Now">Order Now</a></p>
                <p><a href="page.html" title="Order Now">More Info</a></p>				
            </div>
            <div id="promobox" class="three">
            	<h3>Add-Ons</h3>
                <div class="pricebox">
                	<p>From Only</p>
                    <p class="lrg">&pound;5</p>
                </div>
                               <ul>
                	<li>List 1</li>
                    <li>List 2</li>
                    <li>List 3</li>
                    <li>List 4</li>
                    <li>List 5</li>
                    <li>List 6</li>
                    <li>List 7</li>
                    <li>List 8</li>
                </ul>
                <p><a href="LINK" title="Order Now">Order Now</a></p>
                <p><a href="page.html" title="Order Now">More Info</a></p>					
            </div>
        </div>

It’s starting to drive me mad. Can anyone offer any tips or pointers, maybe send me in the right direction?

Thanks.

MM4D · February 13, 2014, 4:12pm

Inline CSS code should read

CSS

#promobox {width: 100%; height: 100%; position: relative; margin: 10px 0px 20px 0px; padding: 0px; color: #FFF; overflow: hidden; text-align: justify; vertical-align: top;}
	#promobox p {margin: 0; padding: 0;}
	#promobox ul {margin: 0 0 10px 0;}
	#promobox ul li {width: 98%; float: left; margin: 5px 0 0 0; background: url(theme-images/bullet-blnk.png) no-repeat left center; padding: 0 0 0 10px; font-size: 18px;}
	#promobox h3 {line-height: 1; color: #fff; letter-spacing: -1px; font-size: 25px; float: left; margin: 0; padding: 0 0 3px 0;}
	#promobox .pricebox {line-height: 1; float: right; text-align: center; padding-right: 10px;}
	#promobox .pricebox .lrg {line-height: 1; letter-spacing: -1px; font-size: 35px; font-weight: bold; margin: 0; padding: 0;}
	#promobox a {background: #004055; color: #fff; float: left; margin: 15px 10px 0 0; padding: 5px 10px; text-decoration: none; -moz-border-radius: 5px; font-weight: normal;}
	#promobox a:hover {background: #005773;}
	
	#promobox.one {width: 30%; height: 100%; display:inline-block; background: #00ACE6 url(theme-images/bg_promo1.png) repeat-x bottom; margin: auto; padding: 10px; text-align: left;}

[B]	#promobox:after {
    display:inline-block;
    width:100%;
    content:'';
}[/B]

ronpat · February 14, 2014, 12:41am

Hi, MM4D. Welcome to the forums.

If the space to the left and right ends of the columns is the same as or greater than the space between the columns, then you can separate the cells with {border-spacing:20px 0;} (20px is just an example). This imposes an equal amount of space between the columns as it does to the left and right ends of the rows. If this is impractical for you, there are solutions that use floats, too. Let us know.

I left several outlines in place so you can visualize how this works. They should be deleted or changed to borders, as desired.


<!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">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>template</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1198157-Multiple-Columns-Equal-Horizontal-spacing-and-height
Thread: Multiple Columns Equal Horizontal spacing and height
2014.02.13 10:36
MM4D
-->
    <style type="text/css">
*, *:before, *:after {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
.outer {    /* this div may be optional; depends on the containing element */
    outline:1px solid yellow;
    display:table;
    table-layout:fixed;
    margin:0 auto;
}
.headline {
    outline:1px solid #00f;
    height:50px;   /* height is treated as min-height.  Content should determine height */
    margin:0 20px 20px;    /* left and right margins are the same as left and right border-spacing */
}
.table {
    outline:1px dotted #0f0;
    display:table;
    table-layout:fixed;
    border-spacing:20px 0;   /* cannot use percent */
}
.col {
    outline:1px solid #00f;
    display:table-cell;
    width:200px;    /* width is treated as max-width.   eliminate for container wide fluid behavior. */
    height:400px;   /* height is treated as min-height.  Content should determine height */
}
    </style>
</head>
<body>

<div class="outer">
    <div class="headline"></div>
    <div class="headline"></div>
    <div class="table">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
</div>

</body>
</html>

dresden_phoenix · February 14, 2014, 5:45am

Basing myself off of Ronpat’s code…you could do it this way and hide the cell spacing on each of the outer cells:

<!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">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>template</title>
     <style type="text/css">
*, *:before, *:after {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
.outer {       
	  outline:1px solid yellow;
      overflow:hidden;
       }
 .outer,  .headline{    
	 margin:0 auto;
     width: 60%;
 }
 .inner { margin:0  -20px;}
 .headline {
    outline:1px solid #00f;
    height:50px;   /* height is treated as min-height.  Content should determine height */
    margin-bottom: 20px;
 }
.table {
    display:table;
    width:100%;
    table-layout:fixed;
    border-spacing:20px 0;   /* cannot use percent */
    
    
}
 .col {
	background: pink;
    display:table-cell;
    height:400px;   /* height is treated as min-height.  Content should determine height */
}
    </style>
</head>
<body>
<h1 class="headline"> Some head</h1>
<h2 class="headline"> Some head</h2>
<div class="outer"><div class="inner">
     	<div class="table">
 	        <div class="col"> </div>
	        <div class="col"> </div>
	        <div class="col"> </div>
    	</div>
 </div></div>

</body>
</html>

ronpat · February 14, 2014, 9:59am

I had tried to do what @dresden_phoenix did but failed. Turns out it was because I had overlooked the need for {oveflow:hidden} in .outer. It was also smarter to set the width in div.outer instead of the columns, so I “borrowed” that, too. Thanks, d_p. Both good calls!

There were a couple of other leser errors in my code and comments that this post fixes. Maybe this time will be the charm…


<!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">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>template</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1198157-Multiple-Columns-Equal-Horizontal-spacing-and-height
Thread: Multiple Columns Equal Horizontal spacing and height
2014.02.13 10:36
MM4D
-->
    <style type="text/css">
*, *:before, *:after {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
.outer {
    outline:1px solid yellow;    /* test outline */
    max-width:960px;
    overflow:hidden;
    margin:0 auto;
}
.widebox {
    border:1px solid #00f;
    min-height:40px;   /* Content should determine height. (this min-height can be deleted) */
    margin:0 0 20px;   /* space below the headline box */
}
.wrapper {
    display:inline-block;
    vertical-align:top;
    margin:0 -20px;
}
.table {
    width:100%;
    display:table;
    table-layout:fixed;
    border-spacing:20px 0;   /* Cannot use percent */
}
.col {
    border:1px solid #00f;
    display:table-cell;
    height:40px;   /* height is treated as min-height.  Content should determine height. (this height can be deleted) */
    vertical-align:top;
}
h1 {text-align:center;}
p {
    line-height:1.3;
    margin:0;
}
p + p {margin-top:1em;}
    </style>
</head>
<body>

<div class="outer">
    <h1 class="widebox">A Real Headline</h1>
    <div class="widebox">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    </div>
    <div class="wrapper">
        <div class="table">
            <div class="col">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
            </div>
            <div class="col"></div>
            <div class="col"></div>
        </div>
    </div>
</div>

</body>
</html>

PaulOB · February 14, 2014, 11:00am

That’s the way I would have approached this also. Border-spacing to make the gap between the columns and then negative horizontal margins on the parent to stretch the table wider so that the first and last columns are flush with the rest of the content and hide overflow as required.

MM4D · February 14, 2014, 11:08am

Thank you to everyone for inputting into this.

The suggestions look absolutely spot on, so going to go and test this with my code, and I’ll let you know how I get on.

thank you all.

MM4D · February 14, 2014, 12:30pm

That’s completley nailed it.

Thanks again.