/    Sign up×
Community /Pin to ProfileBookmark

expanding <div> tag

I would like my <div> within a <div> to display a background image that expands downwards as the first <div> expands downwards to fit the text within it.

something.htm part looks like this:

<div class=”maincell” id=”maincell”>
<div class=”border” id=”border”>
</div>
<p>bla bla bla</p>
</div>

something.css part looks like this:

#border{
position:absolute;
top:0px;
left: 0px;
width:15px;
height: 100%; <– thats my problem i think, just dont understand why it dosent work>
background: url(something.gif);
}
#maincell{
position:absolute;
top:100px;
left:100px;
width:620px;
height:auto;
padding: 15px 20px 20px 20px;
background: url(something.gif);
}

Hope someone is able to help me out, just cant see why it dosent work.

to post a comment
CSS

2 Comments(s)

Copy linkTweet thisAlerts:
@dreesemonkeyDec 06.2004 — It sounds maybe like you need the background to repeat?

You can use the 'background-repeat' property. For example:

#border{

position:absolute;

top:0px;

left: 0px;

width:15px;

height: 100%;

background: url(something.gif);

background-repeat: repeat-y; /* I think y would be vertically */

}

If that's not the what you're looking for, I apologize ?
Copy linkTweet thisAlerts:
@toicontienDec 06.2004 — Why do you have an absolutely-positioned DIV inside another absolutely-positioned DIV? If all you're trying to do is move the inner DIV down and over 100 pixel, just put left and top padding on the outer DIV.

The thing with absolute positioning is that it takes that element out of the document flow. Its literally placed it in its own layer. With that in mind, the content of #border will not expand the #mainCell DIV. Try this code out instead:
[code=php]
#border{
position:absolute;
top:0;
left: 0;
background: transparent url(something.gif) repeat scroll top left;
padding: 100px 0 0 100px;
}

#maincell{
width:620px;
padding: 15px 20px 20px 20px;
background: transparent url(something.gif) repeat scroll top left;
}
[/code]

If this doesn't do it for you, can you describe what the border is supposed to look like, or even attach a screen shot of what you're trying to do?
×

Success!

Help @aeetes 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 6.2,
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: @meenaratha,
tipped: article
amount: 1000 SATS,

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

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...