CSS class not applying

[dmei4]

So I'm working on an old site in need of an update. I figure I'll take it apart from the inside out. The page uses a combination of ID and CLASS that doesn't makes sense that just makes me want to tear everything down.Anyways, I'm planing to build this modular container in the page, but none of the margins are actually applied. I might have over looked something simple, but right now it's placed in a container tag within a wrapper.

[dsonesuk]

code, link something?

[dmei4]

code, link something?

It's on another machine. I'll post it tomorrow.

[dmei4]

so the basic layout of this thing is

<div id="wrapper"><div id="dropshadow"><div class="content">	  	<div class="mod">		<h1>heading</h1>		<p>		   text text text text text		</p>	</div></div></div>

the respective css

#wrapper{	width: 1024px;	height: 98%;	margin: 0 auto;	padding-right: 6px;	text-align: left;}#dropshadow{	border-left:#999 1px solid;	border-right:#999 1px solid;}#content{	width:1024px;	margin:20px 0 0 0;	padding:0;}.mod{	width:1024px;	float: left;	margin: 0 60px 20px 20px;}

thanks in advance

[thescientist]

content is an id in the HTML but a class in the CSS.

[dmei4]

I noticed that when I posted this and changed it. Nothing happened.

[jeffman]

What is the purpose of having a wrapper at 1024px but its contents are wider than that?

[dmei4]

meant 100%

[dsonesuk]

1) you have a missing closing </div> tag. 2) the problem with margin not being applied is down to collapsing margins problem http://reference.sitepoint.com/css/collapsingmargins , which can be fixed using padding or overflow hidden.3) because the mod element is floated, the content element won't wrap round this element, to fix this! use overflow: hidden, which will also fix collapsing margin problem in turn.4) given the mod 100% width plus margin left/right 60 +20 will extend its width beyond the width of wrapper container, the better option might be to ad these margins to content container instead.

#wrapper {height:98%;margin:0 auto;padding-right:6px;text-align:left;width:1024px;}#dropshadow {border-left:1px solid #999999;border-right:1px solid #999999;padding-top:1px; /* or overflow:hidden; for collapsing margins problem */}#content {margin:20px 0 0;overflow:hidden;/* will surround a floated element and fix collapsing margins problem *//*width:1024px; not required*/}.mod {float:left;margin:0 60px 20px 20px; /* will be probably better adding these to content, as this element length will extend to 100% width 1024px + 60 +  20 ==1104px width */width:100%;}

[dmei4]

Thanks a lot. Though looking at the CSS of this more, I'm probably going to scrap a lot the old stuff