Force Div to expand in intervals
Moderator: General Moderators
Force Div to expand in intervals
I have a div with a repeating background image. I need this div to grow based on the content within it. The problem is, if the background image is cut off in the middle, it just doesn't line up right with other images. Is there a way to allow the div to expand its length in units of 20px at a time? Preferably I'd like to use CSS alone to do this, but if I have to use some JS, I'm getting familiar with JQuery and am already using it in this site.
Thanks
Jason
Thanks
Jason
-
thecodewall
- Forum Commoner
- Posts: 33
- Joined: Sun Dec 26, 2010 8:37 am
Re: Force Div to expand in intervals
The setting of width of div is not depending on its background image. It depends on its content, maybe you can insert inside the div instead of making it a background.
Re: Force Div to expand in intervals
Thanks for the response.
I'm not sure how I could do that. I'd have to place the image underneath the content and it would have to repeat enough time to cover the content without interfering with it. It seems it would be easier to find a way to force the div to lengthen incrementally.
I'm not sure how I could do that. I'd have to place the image underneath the content and it would have to repeat enough time to cover the content without interfering with it. It seems it would be easier to find a way to force the div to lengthen incrementally.
- greyhoundcode
- Forum Regular
- Posts: 613
- Joined: Mon Feb 11, 2008 4:22 am
Re: Force Div to expand in intervals
Can you post some code, screenshots or otherwise clarify a bit - I don't see why you shouldn't be able to do this with CSS alone, but I'm struggling to picture the problem.MythX wrote:The problem is, if the background image is cut off in the middle, it just doesn't line up right with other images.
Code: Select all
<body>
<p>Content within the main body of the document</p>
<img src="img1.png" />
<p>More content ...</p>
<img src="img2.png" />
<div id="fluid">
Lorem ipsum dolor sit amet ... this is my div
which expands according to the amount of
content it contains.
</div>
</body>Re: Force Div to expand in intervals
Here's the css:
Here's the html:
Now, the problem I have is that div_inner_paper is of varying length. The completed image is that of a spiral notebook. On the left is the sprials of the notebook. Each unit of the repeating pattern is a single occurrence of the spiral. The problem is depending on the length of the page, it may cut off in the middle of the spiral, then where the div_inner_paper meets div_footer_paperbottom doesn't match up quite right. It cuts off the spiral. If we could somehow force the div to expand such that it doesn't cut off the background, that would be ideal.
Any thoughts?
Code: Select all
#div_header_papertop
{
width:766px;
height:57px;
margin-left:auto;
margin-right:auto;
background-image:url(../images/paper_top.png);
text-align:left;
}
#div_inner_paper
{
width:766px;
min-height:300px;
margin-left:auto;
margin-right:auto;
background-image:url(../images/paper_repeat.png);
background-repeat:repeat-y;
margin-botton:20px;
#div_footer_paperbottom
{
width:766px;
height:28px;
margin-left:auto;
margin-right:auto;
background-image:url(../images/paper_bottom.png)
}
Code: Select all
<div id='div_header_papertop'>
</div>
<div id='div_inner_paper'>
</div>
<div id='div_footer_paperbottom'>
</div>
Any thoughts?
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
Re: Force Div to expand in intervals
Force the content to meet your restraints. If you need the container to grow by 20px intervals, then force your content to grow in 20px intervals instead.
Re: Force Div to expand in intervals
I'm not very experienced in JavaScript, but it seems to me, I could write some code that would grab the height of the div, and using the mod and div (not the same as html div tag) functions determine if the height should be modified, and if so, by how much. If it needs to modify the height of the div, isn't that pretty easy stuff using JS?
- greyhoundcode
- Forum Regular
- Posts: 613
- Joined: Mon Feb 11, 2008 4:22 am
Re: Force Div to expand in intervals
If you're using JQuery something like $("#div_inner_paper").height() will get the height and $("#div_inner_paper").height(50) will set it (not tested btw).
Re: Force Div to expand in intervals
Thanks greyhoundcode, that was helpful.greyhoundcode wrote:If you're using JQuery something like $("#div_inner_paper").height() will get the height and $("#div_inner_paper").height(50) will set it (not tested btw).