Hi,
I have a simple div with a background color for it defined in CSS. There is some text that I wish to display over this div in a certain position, however when I pad the div it causes the background to shift as well:
#body {
margin-left: 10px;
background: red;
}
I just want the text to shift. How can I do this without using two div tags?
Thanks.
EDIT: Here is an example of what I'm working with: http://jsfiddle.net/qQxF2/
If you don't have a border, use the padding instead of the margin.
#body {
padding-left: 10px;
background: red; /* this is not valid CSS! */
background-color: red; /* this is valid */
}
The W3C has an extensive and (hopefully) accurate text on the box model and things like padding, margin, borders etc.
I usually add outer div (<div class="outer"><div class="inner">text</div></div>) to solve this
.outer {
background-color: red;
}
.inner {
padding-left: 10px;
}
Why not set the background color on the actual body tag itself?
body {
background-color: red;
}
#body {
padding-left: 10px;
}
Additionally you could always just apply the padding to the text itself, depending on how much content you are actually going to have in the container div. You really don't want to name the div body though, since that's not very semantic. You might want to change it to #container or something similar so you don't develop bad habits. body should be the page body, not a div.
If your just going to have text, you can do something like this:
#container { background-color: red; }
#container p { margin-left: 10xp; }
Otherwise, if your going to have a mixture of tags and content in the parent div and you don't want to apply the margin them individually (although technically you should in order to avoid getting into the habit of just nesting extraneous div's), Nikita's answer should work good for you, assuming you just want the background on the container div and not the entire page itself.
applying padding should not shift the background.
it should shift the background when you set the margin property.
try following...
<html>
<head>
<style type="text/css">
.padding
{
background-color:yellow;
padding-left:150px;
}
.margin
{
background-color:yellow;
margin-left:150px;
}
</style>
</head>
<body>
<div class="padding">This is a paragraph with padding.</div>
<br/>
<div class="margin">This is a paragraph with margin.</div>
</body>
</html>