Re: [css-d] margin in one column pushes content down in the next column
From: Mike Soultanian [EMAIL PROTECTED]
http://www2.csulb.edu/colleges/cota/test5.html
h1 {margin-top: 0;}
Ahhh, I think I'm getting it. So, the H1 is always 30px away from the
text, it's just bringing the container down with it, which is
essentially bringing the floated left column down, as well.
At the default font size, in whatever browser you're looking in, the top margin
for the H1 is 30px. If you zero that, there will be no more margin between the
text and the following div that includes the left and right columns.
I would
have thought that the left column would have had more authority as it
doesn't have margin-top applied to it so it wouldn't be brought down
with the container, or at least, push it back up there, but I guess not.
The margin escapes the container, and separates anything in the container from
the text above, regardless of presumed authority.
However, like I've noticed and like you mentioned, if the container has
any containing properties (border or padding), it will instead calculate
the margin relative from the border or padding. Is there any other way
that you know of to create any other containing properties that will not
allow the margin to escape from the container?
Zeroing the top margin on the H1 would be my first suggestion. If you still
want the text in the right column moved down, and want to retain the H1 (which
I notice you've removed in the current iteration of the test page) you could
try wrapping the left column content in another div and applying the padding,
as little as 1px, to that (without zeroing the margin on the H1).
If you decide to zero the margin on the H1, you could then probably add padding
to that element to get the text on the right to move down perhaps,
depending on what you really need.
Experiment, I guess, or show us the site so we can make better suggestions than
just guessing what will work based on an oft-changing demo.
~holly
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] margin in one column pushes content down in the next column
At the default font size, in whatever browser you're looking in, the top margin for the H1 is 30px. If you zero that, there will be no more margin between the text and the following div that includes the left and right columns. Yeah, I understand that. I stuck that 30px in there to make the symptoms more apparent than the default padding on a h1 tag. The margin escapes the container, and separates anything in the container from the text above, regardless of presumed authority. Well, I found a couple interesting things. If I apply the margin-top to the content within the left column (which is floated left), it will push the text down and does not pull down the content in the right column (as is happening in example 2). Another thing I noticed is that if I float both of those columns to the left (instead of only the left column), the margin-top of the right column no longer escapes the container and only pushes the text down in the right column. Don't know if that means much as I don't know all the rules behind floated and unfloated elements. Zeroing the top margin on the H1 would be my first suggestion. If you still want the text in the right column moved down, and want to retain the H1 (which I notice you've removed in the current iteration of the test page) you could try wrapping the left column content in another div and applying the padding, as little as 1px, to that (without zeroing the margin on the H1). I changed it from h1 just to make sure it wasn't specific to h1, which it isn't. It somewhat bothers me that I can't apply margin-top to an element in the right column as it's going to pull down the text in other columns, but there's plenty that could be, and is, worse with all the browser issues ;) As far as wrapping a column with 1px padding or border, I'm guessing you meant to say to apply it on the right column as that's the one that's where the margin-top is escaping the container, yes? If you decide to zero the margin on the H1, you could then probably add padding to that element to get the text on the right to move down perhaps, depending on what you really need. Oh yeah! I totally forgot that I can use padding as well... and that wouldn't collapse. Good point! I just tested it out and that worked. Sweet! I had just read about that on a site a day ago, too.. argh... too much information in the brain! Thanks! Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] margin in one column pushes content down in the next column
Let's say I have two columns and there is a div in each column. If I add a margin-top to the left column, it pushes the div down in the other column when viewed in Firefox. Is this normal behavior or is it a bug? This does not happen in Opera or IE. Thanks, Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] margin in one column pushes content down in the next column
Sorry about that, I forgot to include a link: http://www2.csulb.edu/colleges/cota/test5.html thanks, Mike Mike Soultanian wrote: Let's say I have two columns and there is a div in each column. If I add a margin-top to the left column, it pushes the div down in the other column when viewed in Firefox. Is this normal behavior or is it a bug? This does not happen in Opera or IE. Thanks, Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
