I feel like I'm losing my mind trying to figure this out... any help would be greatly appreciated.
There are three divs on the page that need to sit on a single line. They must be square with rounded corners, so setting width and height is necessary to maintain the 1:1 aspect ratio. Inside each div, there's a heading that needs to be centered both vertically and horizontally. The wording in the headings may vary in length, sometimes running over two lines, making a simple margin-top adjustment insufficient.
The first issue I'm facing is strange top margins appearing despite no other factors influencing them (or at least none that I can identify). Floating the divs aligns them, but using floating doesn't seem like the right solution. Why is inline-block not producing the desired result?
The second problem (which is likely connected to the first) is the struggle to vertically center the title divs. Any suggestions on how to overcome this?
For further clarity, here's a live example on jsfiddle: http://jsfiddle.net/fydC4/
Below is the HTML code:
<div id="container">
<div class="nav-left">
<p id="nav-left-title">In this section…</p>
<ul>
<li><a class="light" href="#">page title here</a></li>
<li><a class="light" href="#">page title here</a></li>
<li><a class="light" href="#">page title here</a></li>
</ul>
</div>
<div id="main">
<h1>Assignments</h1>
<p>Click on the titles of the assignments to find out more.</p>
<div class="box" id="good-designs">
<h2 class="box"><a href="#">3 good designs</a></h2>
</div>
<div class="box" id="temp">
<h2 class="box"><a href="#">title here</a></h2>
</div>
<div class="box" id="temp2">
<h2 class="box"><a href="#">title here</a></h2>
</div>
</div><!--end main-->
</div>
</div><!--end container-->
The CSS styling for the above HTML snippet :
#container {
max-width: 960px;
margin: auto;
}
#main {
display: table-cell;
width: 73em;
padding: 1em 2em 2em;
background-color: white;
}
#nav-left-title {
padding-bottom: 0.5em;
margin: 0;
color: white;
}
.nav-left{
display: table-cell;
width: 14em;
background-color: #87a8b1;
padding: 1.1em;
font-size: 1.2em;
}
.nav-left li {
padding: 0.5em 0;
border-bottom: 1px solid white;
}
h2.box {
padding: 15px 0;
margin: 50% 15px;
margin: auto;
text-transform: uppercase;
text-align: center;
}
div.box {
padding: 15px;
height: 180px;
width: 180px;
border-radius: 50%;
margin-top: 25px;
margin-left: 1.5em;
display:inline-block;
/* float: left; */
}
#good-designs {
background-color: green;
}
#temp, #temp2 {
background-color: yellow;
}