DIV elements not properly aligned 1

[Bravogolf]

Hi all,
I'm stuck on this one I'm recreating a new design for a site at

http://www.heaphydesigns.com/ef2/index2.php

but am experiencing layout issues between the left hand and middle column (I've commented out the right hand one until this issue is resolved).

In IE, at the above URL, the Search Box and all the content drops down to where to the left hand column finishes (but only when I set the Search block width to 100%!).

In Opera you can see that the Search Block and the Footer extend the DIV's width when I set the width of each to 100% (in IE it simply pushes the central DIV's border right).

I assume these two issue are related but have no idea how to resolve it!

The CSS file for the above is here. I appreciate any help you can give me!

 

[Vragabond]

This is somewhat an assumption but here it goes.

You have 5px of left and right padding on that div. Adding 100% width makes its entire width 100% + 10px. This is interpreted differently by browsers. Standards-compliant browsers make the child hang over the parent for those 10px -- this is correct behaviour defined by standards. IE extends the parent to allow it to hold the child element, effectively making the parent bigger -- this is incorrect as then width is actually min-width. That said, when IE makes the container bigger, the container can no longer float next to the menu, it needs to float under the menu.

The solution is easy. You shouldn't need width: 100% on a div. That width is implied, and when you add padding and no width, browsers will correctly interpret that as 10px and the rest of 100% is width. If you specify the width, they will put padding on top of the width. Was there another reason you wanted to put 100% width there?

 

[Bravogolf]

Wow, I did not realise that Vragabond. Thank you very much. You wouldn't believe how much that had me stuck!

 

[Bravogolf]

Just one, well two, quick questions if I may?

Firstly, how can I remove the white spacing from the left and right hand side of the search block? Is this something to do with padding not being properly formatted?

And the footer at the bottom, no matter how much margin-top: value I put on it it never seems to move down from the content. Any idea why?

 

[Vragabond]

It's hard to say about the white-space ... it is IE only problem and those are hard to debug, since IE is so unpredictable. I have played around but haven't found a distinctive reason as to why that gap appears.

As for the footer, I am afraid I cannot be of much more help. It seems to be some sort of a collapsing border along with floated elements issue. There's nothing margin can do to help there. However, you can add a thick white border to your footer to achieve the same effect.

 

[Bravogolf]

Your other suggestions made me change a few other things which were also incorrect so that's fixed the footer issue. I'll just keep on trying different things with the search block