Minor issue with DIV Floats and Ignored margins

HTML & CSS
1

I’m having a small aesthetic issue with my CSS design. Instead of using a table I decided to go with DIVs, floating them to get the right look and I’m not sure if it is the cause but as you can see here:

Chrome:

IE:

The headers, at least in FF and Chrome are not displaying any space between themselves at the top and the preceeding divs even though I’ve tried adding a series of margins to the header and the divs to try and space them apart. I got it to accept the margins BENEATH the headers but above them and below the DIV, its just ignoring it completely.

In IE at the moment they work fine. In fact in Chrome it works fine on the other pages I’ve formatted this way which is what leads me to believe it is something to do with the Floats but I can’t figure out how to make it work.

Help is appreciated gang.

Text CSS for these areas.

.subheaders{font-size:1.7em;color:#5983a3;text-align:left;text-transform:capitalize;border-bottom:1px solid #ccc;margin:1em 0 .3em 0;}
	.compensationtextmain{font-size:1.1em;color:#000;text-align:left;padding: 0 3px 1px 3px;vertical-align:middle;}
	.compensationtext{font-size:1.4em;color:#000;text-align:left;padding: 0 3px 1px 3px;vertical-align:middle;}

DIV Css for these areas

					 .compensationtablecontainer{width:100%;white-space:normal;margin:1em 0;}	
							.compensationtableleft{width:50%;height:35px;float:left;background:#EEE;}
					 			.compensationtableleftalt{width:50%;height:35px;float:left;background:#ccc;}
					 		.compensationtableright{width:50%;height:35px;float:left;background:#EEE;}
					 			.compensationtablerightalt{width:50%;height:35px;float:left;background:#ccc;}
2

Can’t edit this but this is solved, needed to add an overflow:hidden, bam fixed. Thanks anyway

3

Glad you sorted it :slight_smile:

(When dealing with floats the answer is nearly always “have you cleared your floats?”;)) (Which is what the overflow:hidden does (ie6 needs haslayout only to clear floated children))

As an aside the content in those pngs looks tabular to me and a table would have been a more semantic element to use and easier in that circumstance.

4

I know but as I’ve been learning about CSS and DIVs the last few weeks everyone seems to look down on Tables and I figured I could reduce a lot of HTML by going with the DIV. I thought I knew enough to pull it off, you’d think it could deal with overflow itself but oh well.

Must’ve spent like 3 hours trying to make it acknowledge my margins before dragging myself out of bed to try Overflow and get it off my mind.

5

Oh well at least you got there in the end :slight_smile:

Overflow other than visible changes the way an element behaves and creates a new block formatting context. Not many people fully understand this and why it can be used to clear floats and stop margin collapse but the rules are there for all to be seen.

The thing to remember about floats is that they have no real impact on the parent that holds them because they float out of the confines of the parent.

If you want a parent to acknowledge its floated children you need to do something special such as clear them (and then the flow of the page is regained) or change the parents behaviour by creating a block formatting context using overflow (other than visible) or one of the other block formatting properties (inline-block, display:table etc).

6

Thanks for the link. I’m getting there, even if the solution was simple I was able to think about it and come to that conclusion so I think I’m starting to store CSS up there in the gray matter.