PDA

View Full Version : Inline Blocks Not Horizontally Lined Up



CSSQuest
Apr 7th, 2010, 05:04 PM
Hey Guys,

I've run into a problem with a setup on http://www.pinpointcreative.com/revision/web - near the top in the large orange area.

I have 3 columns set up - each within its own div. The first two are the description of the category, and the third contains links to the other two categories. I have all the php working to pull the content correctly and everything outputs the way it is supposed to - however the three div's that contain the content won't line up.

The first is in the middle (horizontally), the second is much lower than the first, the third is much higher than the first. I can't seem to find out why. I've even tried running the three columns as list items - but have the same problem. Any advice would be appreciated. Thanks!


#archive_features { background:url('../images/archive_bg.png') no-repeat center top; width:100%; height:195px; color:#fff; text-align:center; }
#archive_features a { color:#FFF; }
#archive_features h1 { padding:0; margin:0 0 0 -5px; text-align:left; }
#archive_features .viewmore { display:block; background:#56A0D3; width:100px; height:20px; text-align:center; padding:7px 0 0 0; margin:0 auto 0 auto; }

.category_left { width:220px; height:195px; margin:0 30px 0 30px; padding:0; display:inline-block; text-align:justify; }
.category_center { width:220px; height:195px; margin: 0 65px 0 0; padding:0; display:inline-block; text-align:justify; }
.category_right { width:220px; height:195px; margin:0; padding:0; display:inline-block; text-align:justify; }

Excavator
Apr 7th, 2010, 05:45 PM
Hell CSSQuest,
Generally a 3 column layout is built with floats. IE7 does not support display:inline-block; and I'm sure IE6 messes it up too.

Have a look at this 3-column layout (http://nopeople.com/CSS/simple3column/index.html).

That works on your site too. Like this -

.category_left {
width:220px;
height:195px;
margin:0 30px 0 180px;
padding:0;
float: left;
text-align:justify;
}
.category_center {
margin: 0 390px 0 400px;
padding:0;
text-align:justify;
}
.category_right {
width:220px;
height:195px;
margin:0 120px 0 0;
padding:0;
float: right;
text-align:justify;
}

The markup needs re-arranged for that to work because floats come first. You will also need to adjust the top margin on .category_center.

CSSQuest
Apr 7th, 2010, 06:26 PM
I appreciate the advice - I don't why I didn't think to float them earlier.

However the problem still remains - the right column sits under the middle column because the middle column is not floated.

Excavator
Apr 7th, 2010, 06:34 PM
Yes, like I said... the markup would need re-arrranged.

The markup needs re-arranged for that to work because floats come first. You will also need to adjust the top margin on .category_center.

In your markup, make your your .category_left come first,
.category_right would be second
and .category_center last

CSSQuest
Apr 7th, 2010, 06:46 PM
Thanks much Excavator. I should have known that. For some reason the coding part of my brain doesn't seem to be wanting to work today. I appreciate you taking a moment to help me out.

Excavator
Apr 7th, 2010, 07:04 PM
Haha! Maybe the coding part has an on/off switch?

Always glad to help :)