How to line up three divs in a row -

Hi Janine,

I’ve listened to your CSS Basic and Advanced CSS DVDs. They are great resources, but I have a question

I am trying to create a banner div that includes 3 divs inside: a Photo div, Title div, and another photo div, all lined up at the same height. I want the photos floated at each end of the banner div and the Title div centered between them. Here is what I created:

A photo (123 px wide) div floated to the left.
Title (400 px wide) div for the centered (margins left & right set to auto).
A photo (123 px wide) div floated to the right.

The three above divs are within the banner div, each at the same level. I want space between the photos at each end and the title.

Here is my question: Why isn’t the 2^nd photo isn’t at the same height as the other 2 divs within this banner? This is driving me crazy.

Thanks, Don

Hi Don,

I can see why centering that banner section is driving you crazy, and why it seems like what you’ve done should work. There are a few ways to accomplish your task, none as logical as your approach (which you’d like would work, but doesn’t). Here’s a solution that should work.

Set all three styles for your divs to float left, yeah, I know, seems crazy, but that will get all of them to line up perfectly in the banner area.

Now use the left and right margin settings on the styles for each div to create enough space between them to get them where you want them. You can eyeball it, but I find it best to do a little math and calculate exactly how much padding I’ll need between each div. I know, most web designers hate the math part, but it’s more precise than the old ‘eyeball’ trick. Here’s how I’d do it. Add up the full width of each div, including any padding or borders, subtract it from the total space, divide by 3, set that amount of margin space between the divs.

Let me know if that works for you and email me the link when you’re done.

Thanks for watching my videos,

Janine

Janine,

Thank you so much. Your solution works! I cannot thank you enough. I have tried and tried over the past couple of years to use div’s instead of tables but always ran into problems and went right back to tables. I am finished with them for the most part after learning how to use div’s. You unlocked the div mystery.

Thank you!

Don

dwcs4, dwcs5, dwcs6

Leave a Reply