Click here to get back home

margin under floated divs
 Home | NewsGroups | Search | About
Login Password
Register Now!
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
margin under floated divs red 02-14-2008
Posted by red on February 14, 2008, 1:06 pm
Please log in for more thread options
 .equalhalves div

<div class='equalhalves'>
<div> left column content here
</div>
<div>
right column content here
</div>
</div>
<p><a href="#top">(Back to top)</a> </p>

How do I get a margin between the top div and the paragraph ?
I've tried adding margin they are all ignored

Posted by red on February 14, 2008, 1:18 pm
Please log in for more thread options
 correction

equalhalves div{width:50%; float:left}

<div class='equalhalves'>
<div> left column content here
</div>
<div>
right column content here
</div>
</div>
<p><a href="#top">(Back to top)</a> </p>

How do I get a margin between the top div and the paragraph ?
I've tried adding margin they are all ignored

Posted by Ben C on February 14, 2008, 2:12 pm
Please log in for more thread options
> correction
>
> equalhalves div{width:50%; float:left}
>
><div class='equalhalves'>
> <div> left column content here
> </div>
> <div>
> right column content here
> </div>
> </div>
> <p><a href="#top">(Back to top)</a> </p>
>
> How do I get a margin between the top div and the paragraph ?
> I've tried adding margin they are all ignored

You mean .equalhalves div.

Anyway, just add

.equalhalves { overflow: hidden }

which makes it start a new block formatting context, putting its bottom
edge below the floats. Then give the p margin-top of whatever you want.
The bottom margin will now go between the top of the <p> and the bottom
of the preceding <div> in the expected way.

Clear on the <p> won't allow you to set the top margin effectively for
reasons discussed here recently (clearance is supposed to count as
margin, but most browsers don't do it correctly anyway).

IE doesn't support this but there's some other hack you do to give it
"zoom" or "hasLayout" or some other obscure Microsoft fantasy which has
a similar effect.

Posted by Ben C on February 14, 2008, 2:17 pm
Please log in for more thread options
>> correction
>>
>> equalhalves div{width:50%; float:left}
>>
>><div class='equalhalves'>
>> <div> left column content here
>> </div>
>> <div>
>> right column content here
>> </div>
>> </div>
>> <p><a href="#top">(Back to top)</a> </p>
>>
>> How do I get a margin between the top div and the paragraph ?
>> I've tried adding margin they are all ignored
>
> You mean .equalhalves div.
>
> Anyway, just add
>
> .equalhalves { overflow: hidden }
>
> which makes it start a new block formatting context, putting its bottom
> edge below the floats. Then give the p margin-top of whatever you want.
> The bottom margin will now go between the top of the <p> and the bottom
> of the preceding <div> in the expected way.

Sorry I mean "The margin will now go between..."

Similar ThreadsPosted
How to move beyond a floated object May 8, 2006, 3:39 pm
Centering left-floated items - how? Please help! December 5, 2006, 4:08 am
margin above of

August 23, 2007, 5:15 am
What good is margin-bottom in IE? November 3, 2004, 1:28 pm
Help with Firefox margin issue August 30, 2005, 5:26 pm
Netscape margin attributes June 2, 2006, 2:47 pm
strange behavior with IE and margin... June 12, 2006, 2:03 am
after setting 's margin to 0 it is still non zero! (IE only) January 18, 2007, 12:54 pm
IE6 -> searching for padding or margin, i don't find it September 29, 2004, 6:40 pm
create margin notes on webpages March 6, 2006, 9:03 pm

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap