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.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
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:
#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;
}
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?
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.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
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:
#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;
}
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?