/    Sign up×
Community /Pin to ProfileBookmark

divs and background issues

Copy linkTweet thisAlerts:
Nov 22.2007

Hi All,

I’m having a little problem. I’m trying to use css for laying out a site. What i’d like to do is have an expanding background. So I’ve created three divs inside a container div. There is a head, body, and foot. The problem is when I had block contents like paragraphs, h1’s, etc., my body div creates top and bottom white space…Can anyone shed some light into what I may be doing wrong, or offer some best pratice ideas for achieving this kind of layout with css? The website is [url]www.thomasplumbingservice.com[/url]

Thanks!

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@CentauriNov 22.2007 — This is due to normal margin collapse behaviour on the contents. This can be alliviated by applying the sides graphic to the container instead of the body, and giving the body side margins to prevent any of the contents covering the side graphics :[CODE]#container {
margin:0px auto;
width:750px;
background-image:url(images/bg/mock_r2_c1.jpg);
background-repeat:repeat-y;
}

#body {
margin:0 20px;
}[/CODE]
Copy linkTweet thisAlerts:
@NoAssmblyReqdGAauthorNov 22.2007 — Centauri,

Thanks! Things seem to be working. I'm not quite sure though. Could you, or perhaps someone else, explain [I]why[/I] this is working??

Much Thanks Again
Copy linkTweet thisAlerts:
@CentauriNov 22.2007 — The margin collapse model sometimes does seem strange, but once you know how it works, you can work with it. The <h1> heading (or a paragraph if you used one here instead) has default margins on top and bottom for spacing. As there is nothing above the <h1> in the div, it doesn't have anything valid to "push" against (the edge of the div is not a solid boundary unless there is a border or padding there in the way), so the margin sort of pushes through the top of the div until it hits an element above (the #head div), and this effectively pulls the top of the containing div down, creating a gap. For this reason, using padding to create top and bottom space is sometimes more reliable than margins, depending on the situation.

In the reworked code, the side graphics are actually extending all the way from top to bottom of the overall container and the top and bottom graphics are placed over top, making it impossible for a gap to appear in the graphics. The gaps above and below the body div are still there, just that they are not seen as there is no background on the body.
Copy linkTweet thisAlerts:
@NoAssmblyReqdGAauthorNov 22.2007 — Thanks again Centauri, your explanation made a lot of sense. The only thing is in the reworked code, I didn't fully understand the use of the margins:0px 20px in the body tag. Also, I've noticed for divs I add within the div "body" I have to make sure their backgrounds are specified as "none" to not get issues in IE 7. Is that what you would suggest.

Again, thanks. I see you are well knowledged.
Copy linkTweet thisAlerts:
@CentauriNov 22.2007 — The margins (20px each side) I put on the #body div was to ensure that it, and therefore any content within it, did not cover the side graphics. That saves having to use individual side margins on everything inside #body.
×

Success!

Help @NoAssmblyReqdGA spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...