SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member MM4D's Avatar
    Join Date
    Feb 2014
    Location
    UK
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple Columns Equal Horizontal spacing and height

    I am currently trying to get the following layout

    Final.png

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

    inline-block.png

    CSS
    Code:
    	#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
    Code:
    	<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.

    table.png

    CSS
    Code:
    	#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
    Code:
    	<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.

  2. #2
    SitePoint Member MM4D's Avatar
    Join Date
    Feb 2014
    Location
    UK
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Inline CSS code should read

    CSS
    Code:
    #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;}
    
    	#promobox:after {
        display:inline-block;
        width:100%;
        content:'';
    }

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,618
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    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.
    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">
        <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>

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Basing myself off of Ronpat's code...you could do it this way and hide the cell spacing on each of the outer cells:
    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">
        <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>

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,618
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    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...
    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">
        <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>

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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.

  7. #7
    SitePoint Member MM4D's Avatar
    Join Date
    Feb 2014
    Location
    UK
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    SitePoint Member MM4D's Avatar
    Join Date
    Feb 2014
    Location
    UK
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's completley nailed it.

    Thanks again.


Tags for this Thread

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
  •