Clear:left is forcing next div onto new line 1

[gmail2]

This is doing my head in and I can't understand why it's happening. I have four divs, which I want to appear two on one line, two on the next line - right underneath each other. I've set clear: left on the 3rd div so that it goes onto a new line but

1. It decreases the left margin for some reason
2. It forces the fourth div onto a new line instead of putting it beside the 3rd one

I also tried putting clear: right on the second div which gives the desired effect, except it increases the left margin on the second div. This is a link to the site:

http://www.doghousebooks.ie/doghouse/authors.php

The larger div's in the middle are where I tired using clear: left on the third div. The smaller ones at the bottom are where I put clear: right on the second div. Would really appreciate any help anybody can give me with this as it's driving me nuts

Irish Poetry - Karen O'Connor
Get your Irish Poetry Published
Garten und Landschaftsbau

 

[Vragabond]

Wow, time to check the website in something other than IE. You have a bunch of problems.

First off, your main content borders are overlapping the menu -- use [tt]clear: both;[/tt] on #main_tl to fix that.

Second, your logic is pretty strange. To achieve the two divs side to side in the first line you do float: left on both of them. That is good. To do the same on the second line, you omit the float: left for the first (three) div in the second line. I didn't understand that. Just float both in the second line as well and you'll be better off. From then on, you're more or less set. I believe the bigger margin appears in IE because of a known hack regarding double margins and floats. Again, if you float everything, you will get rid of that problem.

I suppose you don't need the second set of smaller boxes and they were there just for presentation. They looked completely messed up in Mozilla.

 

[gmail2]

hmm ... that's very strange. The page is an "exact" copy of this page

http://www.doghousebooks.ie/doghouse

except I added in those div's that I'm having the problems with. And that displays perfectly in firefox and IE and validates fine also ... must have accidentally changed something around when I was messing around trying to get the DIV's to line up.

As for omitting float on the third DIV, the reason why I done this was because I read somewhere that using clear and float can have undesireable effects - and when I tired it it didn't work. Althought you're right - it does work in firefox when I do that, but it still donesn't work in IE. It appears on the first line but a little lower. Any ideas how I can fix it in IE also?

Irish Poetry - Karen O'Connor
Get your Irish Poetry Published
Garten und Landschaftsbau

 

[Vragabond]

I'll admit that I have no idea why this happens, especially since div three floats nicely and it is div four that gets messed up in IE. I hate debugging for IE, because it is so unpredictable and the only thing I can think of is adding another element to do the clear. This would be best done with a horizontal rule stuck between the two groups. It's not a perfect solution, but it works:

<div id="one" style="float: left; margin-left: 10px; background-color: #ff9900; width: 90px; height: 90px">one</div>
<div id="two" style="float: left; margin-left: 10px; background-color: #ff0000; width: 90px; height: 90px">two</div>
<hr style="visibility: hidden; clear: both;" />
<div id="three" style="float: left; margin-top: 10px; margin-left: 10px; width: 90px; height: 90px; background-color: #ff9900">three</div>
<div id="four" style="float: left; margin-top: 10px; margin-left: 10px; width: 90px; height: 90px; background-color: #ff0000">four</div>

 

[gmail2]

Yea, the HR worked, thanks for that ... dunno why I didn't think of that one myself - although it's been a while since I've done any html/css so I need my memory refreshed every so often

Irish Poetry - Karen O'Connor
Get your Irish Poetry Published
Garten und Landschaftsbau