W3C home > Mailing lists > Public > www-style@w3.org > January 2011

Re: margins, ems and context

From: Alan Gresley <alan@css-class.com>
Date: Thu, 27 Jan 2011 05:15:39 +1100
Message-ID: <4D4064CB.50107@css-class.com>
To: Anton Prowse <prowse@moonhenge.net>
CC: www-style@w3.org, Niels Matthijs <niels.matthijs@internetarchitects.be>
On 27/01/2011 4:51 AM, Alan Gresley wrote:

> Anton,
>
> What happens if you have any element (container) with a width in pixels,
> ems, percent and one of the children is a float that has the width 100%.
> Any padding given to the element (container) would cause a horizontal
> scroll bar.


Sorry, I made a mistake. If the container is the <body> element, you 
would have a horizontal scroll bar. The other example for a container is 
like this.

<!DOCTYPE html>

<style type="text/css">
.container p { margin: 1em 3em }
.container h1 { margin: 1em 1.5em }
</style>

<div class="container" style="width: 800px; margin: 0 auto; border: 10px 
solid blue;">
   <div style="float:left; width: 100%; background: lime;">Float</div>
   <h1>Heading</h1>
   <p>text</p>
</div>


The only work around that I know of is to wrap the <h1> and <p> in 
another element and apply the padding to it.



-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
Received on Wednesday, 26 January 2011 18:17:17 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:36 GMT