Vertical center list in a box

Garindan

03-12-2009, 01:45 PM

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
<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
#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! :thumbsup: :)

Excavator

03-12-2009, 05:46 PM

Hello Garindan,
Does this work for you? <!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>
</div>
</body>
</html>

More Vertical Centering done here - http://nopeople.com/CSS/vertical%20center%20with%20CSS/

Garindan

03-16-2009, 10:40 PM

Hi Excavator, sorry for the delay and many thanks for the reply.

Sorry though no it doesn't work :confused:

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?