Div Margin Problem

[brayd]

I can't can't control the size of the top and bottom margin for a div on my home page. The div is wrapped around a paragraph of text that reads, "Complete your projects in less time without costly delays!" Below is the div in question.

<div id="mainMessage">
<p class="orangecolour">Complete your projects in less time without costly delays!</p>
</div>

How do I target the above div so I can change the size of the top and bottom margin?

You can view my problem at the following URL:

http://www.gochecksite.com/

The page validates XHTML Strict 1.0 and CSS 2.1

I'm using part of the BluePrint CSS framework to develop the site but haven't changed/modified any of the BluePrint CSS. All the layout and styling I do is in the layoutandstyling.css file.

You can view my css files at the following URL's:

http://www.gochecksite.com/css/layoutandstyle.css

http://www.gochecksite.com/css/blueprint/screen.css

http://www.gochecksite.com/css/blueprint/ie.css

[BLiZZaRD]

in layoutandstyle.css find:



#mainMessage {
/* margin: 0;
padding:0; */
/* background-color: #dc8e2f; */
color: #fff;
}


replace with:



#mainMessage {
margin-top: 1em;
margin-bottom: 1em;
background-color: #dc8e2f;
color: #fff;
}


Changing the "1em" to suit your spacing needs.

Unless I mis-understood what you wanted.

[brayd]

When I apply your code the margins on the div don't change. What happens now is the div spans the complete width of the page with what appear to be borders on each end that are a dark orange color. You can view the results of applying your code at the following URL:

www.gochecksite.com

Any other suggestions?

[BLiZZaRD]

Sorry... was just worrying about top and bottom...



#mainMessage {
margin: 1em 0 1em 0;
background-color: #dc8e2f;
color: #fff;
}


code goes top, right, bottom, left for the 1em, 0, 1em, 0;

[brayd]

I applied your revised code (see below) to the div but it has no effect on the margins surrounding the div:

#mainMessage {
margin: 1em 0 1em 0;
background-color: #dc8e2f;
color: #fff;
}

Any other suggestions?

[BLiZZaRD]

did you change the 1em's to what size margin you wanted? 1 em isn't a whole lot.

[brayd]

Yes I did change the em to a larger size and that increases the top and bottom margins just fine. However, what I'm trying to accomplish is to reduce the top and margin even further. If I apply the following code there is still a fairly large top and bottom margin surrounding the #mainMessage div.

#mainMessage {
margin: 0em 0em 0em 0em;
background-color: #dc8e2f;
color: #fff;
}

You can view the results of applying the above code by viewing the URL below:

www.gochecksite.com

How do I reduce the size of the margin even further? Is there a default top and bottom margin that is being applied to div's somewhere in my code that I can over ride?

[BLiZZaRD]

#mainMessage {
margin: 0px 0px;
padding: 0px;
background-color: #dc8e2f;
color: #fff;
}


Try the above first, then if not enough, try the following:



#mainMessage {
margin: -0.8em 0em;
padding: 0px;
background-color: #dc8e2f;
color: #fff;
}


Your CSS is very crazy and hard to follow. You have padding's all over the place, two body stylings, and no basic structure. If neither of them work we may need to roll up sleeves and re-write the whole thing.

[brayd]

I'm using the following code and my #mainMessage margin problems have been resolved.

#mainMessage {
margin: -1.3em 30px -2.7em 30px;
padding: 0px;
background-color: #dc8e2f;
color: #fff;
}

Thanks for all your help over the last two days.

[BLiZZaRD]

Hooray for negative margins! :D