Force Div to expand in intervals

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
MythX
Forum Commoner
Posts: 28
Joined: Mon Jan 11, 2010 8:28 pm

Force Div to expand in intervals

Post by MythX »

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
thecodewall
Forum Commoner
Posts: 33
Joined: Sun Dec 26, 2010 8:37 am

Re: Force Div to expand in intervals

Post by thecodewall »

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.
MythX
Forum Commoner
Posts: 28
Joined: Mon Jan 11, 2010 8:28 pm

Re: Force Div to expand in intervals

Post by MythX »

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.
User avatar
greyhoundcode
Forum Regular
Posts: 613
Joined: Mon Feb 11, 2008 4:22 am

Re: Force Div to expand in intervals

Post by greyhoundcode »

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.
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.

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>
So if the background image of #fluid is cut off half way, what is it not lining up with? The background image of <body> or the content of the <img> elements? Just trying to get a better idea of the problem.
MythX
Forum Commoner
Posts: 28
Joined: Mon Jan 11, 2010 8:28 pm

Re: Force Div to expand in intervals

Post by MythX »

Here's the css:

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)
}
Here's the html:

Code: Select all

<div id='div_header_papertop'>
</div>
<div id='div_inner_paper'>
</div>
<div id='div_footer_paperbottom'>
</div>
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?
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Re: Force Div to expand in intervals

Post by superdezign »

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.
MythX
Forum Commoner
Posts: 28
Joined: Mon Jan 11, 2010 8:28 pm

Re: Force Div to expand in intervals

Post by MythX »

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?
User avatar
greyhoundcode
Forum Regular
Posts: 613
Joined: Mon Feb 11, 2008 4:22 am

Re: Force Div to expand in intervals

Post by greyhoundcode »

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).
MythX
Forum Commoner
Posts: 28
Joined: Mon Jan 11, 2010 8:28 pm

Re: Force Div to expand in intervals

Post by MythX »

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).
Thanks greyhoundcode, that was helpful.
Post Reply