/    Sign up×
Community /Pin to ProfileBookmark

expanding background

Copy linkTweet thisAlerts:
Oct 20.2009

I’m building a website with a few pages, and having a problem getting the background to expand with the divs.
Written in html and css. I don’t know javascript but I’m trying to learn.
The body background is a repeated texture.
The website is contained in a box div with a solid color background.
The text content div is another solid color background, smaller than the containg box, and expands and contracts vertically.
On the longest page the containing box is visible for 20px all the way around the content div. Looks fine. The problem is that on a different page with only half as much content the containing box doesn’t resize with the content div. It ends up with a huge block of the box color at the bottom of the page which makes things look unfinished.

Is there some way to get the main containing div to expand and contract vertically in sync with the content divs?

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@mordaukOct 20.2009 — It would help if you could provide your html and css code.

But, the following code should do what you want.

[CODE]
<div id="container">

<div id="text">
<p>this is the text</p>
</div>

<div class="clear"></div>

</div>
[/CODE]

[CODE]
#container {
height: auto;
width: 800px;
padding: 20px;
}
#text {
padding: 10px;
}
.clear {
clear: both;
}
[/CODE]

The div class clear will cause the container box to always expand with the text box.
Copy linkTweet thisAlerts:
@jinxieauthorOct 21.2009 — Thanks very much. The div class clear was what I was missing. Everything is good now ?
×

Success!

Help @jinxie 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.7,
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,
)...