Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Vertical center list in a box

    Hi all, i have tried and i cant seem to get this one to work.

    I have a container on a page with three div boxes in it all floated left. I am using it to display three lists side by side.

    The container is #categories, then the three boxes share the .categorybox class, and then theres a list in each box.

    The trouble is the middle list has one more item in it than the other two so to make it neater i wanted to vertically center the lists inside the box, but i cant get it to work.

    Here's the code:-

    HTML
    Code:
    <div id="categories">
            <div class="categorybox">
            <ul>
            <li>Decking</li>
            <li>Garden Makeovers</li>
            <li>Patio/Paving</li>
            <li>Fencing</li>
            </ul>
            </div>
            <div class="categorybox">
            <ul>
            <li>Lawns - Turfing/Treatment</li>
            <li>Driveways</li>
            <li>Garden Design</li>
            <li>Pressure Wash/Sealing</li>
            <li>Garden/Property Maintenance</li>
            </ul>
            </div>
            <div class="categorybox">
            <ul>
            <li>Ponds</li>
            <li>Tree/Hedge Work</li>
            <li>Clearance</li>
            <li>Walling</li>
            </ul>
            </div>
            </div>
    CSS
    Code:
    #categories {
    	width: 930px;
    }
    
    #categories ul {
    	margin: 0;
    	padding: 0;
    }
    
    .categorybox {
      float: left;
      width: 288px;
      height: 200px;
      border:solid 1px silver;
      padding: 5px;
      margin-left: 5px;
      margin-right: 5px;
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      color: #14612F;
      line-height: 200%;
    }
    Many thanks for any help!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello Garindan,
    Does this work for you?
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: bold 16px/200% "Comic Sans MS";
    	color: #14612F;
    	background: #FC6;
    	text-align: center;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #categories {
    	width: 930px;
    	margin: 30px auto;
    	padding: 20px 0;
    	background: #999;
    	overflow: auto;
    }
    .categorybox {
    	width: 288px;
    	height: 200px;
    	float: left;
    	margin: 0 5px;
    	padding: 5px;
    	display: table;
    	border:solid 1px #c0c0c0;
    }
    .categorybox ul {
    	display: table-cell;
    	vertical-align: middle;
    	list-style: inside;
    }	
    </style>
    </head>
    <body>
        <div id="categories">
            <div class="categorybox">
                <ul>
                    <li>Decking</li>
                    <li>Garden Makeovers</li>
                    <li>Patio/Paving</li>
                    <li>Fencing</li>
                </ul>
            </div>
    <div class="categorybox">
        <ul>
            <li>Lawns - Turfing/Treatment</li>
            <li>Driveways</li>
            <li>Garden Design</li>
            <li>Pressure Wash/Sealing</li>
            <li>Garden/Property Maintenance</li>
        </ul>
    </div>
            <div class="categorybox">
                <ul>
                    <li>Ponds</li>
                    <li>Tree/Hedge Work</li>
                    <li>Clearance</li>
                    <li>Walling</li>
                </ul>
            </div>
        <!--end categories--></div>
    </body>
    </html>
    More Vertical Centering done here - http://nopeople.com/CSS/vertical%20center%20with%20CSS/
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Excavator, sorry for the delay and many thanks for the reply.

    Sorry though no it doesn't work

    I had tried display: table; and display: table-cell; and it doesn't seem to affect it Maybe because its a list? I dunno, i'm still stuck. It's not a big issue but would look much nicer if could be vertically center.

    Maybe i'll have to have a different class for the center and outside boxes after all?


  •  

    Posting Permissions

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