CSS Float and Clear... wth?!

[intellix]

Hi, im having quite an annoying problem to what seemed like something easy...

Basically: I have a map

<div class="map"></div>

and inside that map there are (for this example) 2 links with images inside on each row... first way to place next links on another line was to have a clearing div.

<div class="map">
<a href="#"><img></a><a href="#"><img></a><div class="clear"></div>
<a href="#"><img></a><a href="#"><img></a>
</div>

Then thought... can do this without one of those... and decided to have the last image on every row, to have a float:left;clear:both;

<div class="map">
<a href="#"><img></a><a class="clearing" href="#"><img></a>
<a href="#"><img></a><a href="#"><img></a>
</div>

which seemed to work in a few browsers using the odd hack, but not in every browser.

So I decided to use the PIE method to clearfix:after on the last <a> of each row that would clear:both; after each thing...

Problem: The PIE method... seems to only work using a DIV... and when you apply it to an <a>, clearing doesn't seem to work, but content:"lol" places it inside of the <a> rather than after (probably why you can't clear inside an <a>)

Tried to also do 'overflow: auto' and 'overflow:hidden' on the last <a> but nothing seems to work :'( only the <div class="clear"></div> method works...

Anyone have a clue what the problem is? :/ Thanks s o much

 

[intellix]

Relooking at the stuff, and I realise that the :after pseudo does work correctly, but shouldn't be used in this case...

same goes for the other thing... I mistakenly thought they were having 2 things next to one another then clearing after the last element. But instead they have an outer div with something inside.

<map>
<a><a><a><a><a><a> (new line)
<a><a><a><a><a><a> (new line)
<a><a><a><a><a><a> (new line)
<a><a><a><a><a><a> (new line)
</map>

is kind of the effect I want... I've tried setting the width so that when it reaches the end, it has to start a new line... guess I could attempt that again :/

 

[intellix]

lol, dunno why I never thought of that cheers