Jump to content

CSS class not applying


dmei4
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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%;}

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...