Floated divs not lining up properly

Hello all, I’m scratching my head wondering how my layout got messed up between last night and today. Everything was working properly until I noticed this a little while ago:

On the home page, (http://www.pralines.com/beta) in the main content area, I have 6 floated divs (FAQs, History, Spices, etc) containing similar informtion. For some reason, the alignment is off and I can’t figure out why. All of the learn more buttons should be lining up with each other but this isn’t the case; In IE7, I get a step ladder effect, and in Firefox the divs don’t even line up in two rows of three!

I appreciate any help!

Try adding min-height or height to the floated divs.

That fixed the problem in Firefox, but it’s still off in IE. In IE, the “learn more” image is being pushed down in three out of the six divs - spices, history, and faqs. What gives?

Why do you have a inline style sheet? And a external?

i just haven’t moved it to the external file yet. does that have anything to do with my problem?

Im not sure your looking at IE correctly? Your bottom section links are being displayed properly in IE7 for me? Heres a screen shot.http://s4.tinypic.com/2isz7yv.jpg
They are aligning in 3 x 3.

Blake, I see that the tops of the divs are aligned. However, the “learn more” buttons(images) are out of position in three of the six divs. You can see that in the screenshot you posted. Any idea how I can fix things so that all six (of those “learn more” images) line up properly?

Hi socalcane,

If you want the “learn more” images to be at the bottom of each div you can absolutely position them there. Then you won’t have the different amounts of text placing them at different locations.

You will need to set position:relative on the parent div and give it an explicit height though.

Like this -

img.car_left {
    float: left;
    margin-left: -15px;
    margin-right: 7px;
div.section_links {
    width: 225px;
[COLOR=Blue]    height: 170px;[/COLOR]
    text-align: center;
    margin-top: 25px;
    float: left;
   [COLOR=Blue]background:yellow; [COLOR=DarkGreen]/* bg color for testing, remove when done*/[/COLOR][/COLOR]
[COLOR=Blue]    position:relative;[/COLOR]
div.section_links h3 {
    font-family: "high tower text", Georgia, "Times New Roman", Times, serif;
    font-size: 26px;
    border-bottom: 1px solid #f96;
    margin-bottom: 10px;
    margin-left: 20px;
    margin-right: 20px;
div.section_links p {
    text-align: left;
    margin-bottom: 1em;
    margin-top: 20px;
    margin-right: 20px;
[COLOR=Blue]div.section_links img.lrn_more {

You also got a “Double Margin Bug” going on in IE6, add display:inline here -

/* --- mainContent Styles --- */

#mainContent {
    float: left;
    margin-left: 240px;
 [COLOR=Blue]   display:inline; /*add this for ie6*/[/COLOR]
    width: 700px;
    padding-left: 25px;
    color: #930;
    font-family: Georgia, "Times New Roman", Times, serif;

Hi Ray,

You’re spot on as usual!

I had just figured out to try the absolute positioning, but I had no idea about that double margin bug i had! Thanks a ton!

Hi, your “learn more” images are sitting on top of the text in IE6 right now.
You need to remember that IE6 does not support min-max widths or heights.
I had set a height rather than min-height so that IE6 would work also. If you plan on putting more text in the divs and you actually do need min-height then you need to target IE6 only with a height. ( IE6 treats height as min-height)

So with all that said you either need to change it to height:170px or add this selector for IE6.

div.section_links {
    width: 225px;
    [COLOR=Blue]min-height: 170px;[/COLOR]
    text-align: center;
    margin-top: 25px;
    float: left;
[COLOR=Blue]* html div.section_links {height:170px} /*ie6 treats height as min-height*/[/COLOR]

The IE7 staircase effect is a pretty well-known bug.

You get it with horizontal lists if you float the anchors but say nothing for the li’s.

I usually tell IE7
li {
display: inline;

just to appease it. It seems to make the IE gods happy : )