Hi all, got a bit of a problem here, you might need to see my source code, but I'll try and explain it first of all...

 

Right, basically, I'll simplify it a lot, say you have a container div, then inside that you have a thin div (10px) floated left as a suedo border type thing, then to the right of that (floated left aswell) you have the beginnings of a content div, the content in this content div is dynamic, it will be changing with every page load, hence the height of this div will constantly be changing as well...

 

In short, I need the thin DIV layer to the left to mimic the height of the content DIV constantly, so if the page loads and the content div is say 500px high, i need the small div to be 500 aswell

 

Currently, for some reason, even if i tell the smaller div to be 100% in height, it will just sit there at a seemingly set height... I can set the height to say 500px and it will be 500px fine, it just wont adapt to the other DIV layer, even though its in the original container.

 

Any help?

 

Cheers, dragon

Hey Dragon,

 

You might just simply be going about what you want to do in the wrong way. Is there any reason why you're making this 10px thin div, instead of using a background image / border on the content div?

 

If you could post your source code and a link to the page with the problem, then we'll help you fix the problem.

 

Rob

You might just simply be going about what you want to do in the wrong way. Is there any reason why you're making this 10px thin div, instead of using a background image / border on the content div?

Hi rob, thanks for your quick reply.

 

Mainly because its sort of a bit of eye candy, it consists of three parts, top bottom and middle, the top and bottom are static (endpoints if you will) they sort of finish it nicely, the middle part is what i want to be dynamic, and push everything else to the same height.

 

Unless there is a way to make borders like that on the div's themselves, where say top left is static, bottom left is static and the entire left side is dynamic and stretches (background:repeat-Y ish sort of thing)

 

If you could post your source code and a link to the page with the problem, then we'll help you fix the problem.

 

Rob

Good idea, i'll get ont it now and see if theres a live version knocking about on the server.

 

Thanks!

there we go, live is here, not sure if its the current version, but hey, its a start - http://www.simplytrue.co.uk/v2newsite/ -

 

dont laugh, its not MY site, i just make the damn thing.... pain in the ass it is aswell... i tell ya, choose clients well!

 

But yeh, more on topic, dont be surprised if the CSS for the section in question is pooched, I havent worked on this for a few weeks now, so I may have left it in a bit of dis-array, lol

 

Thanks again, dragon2309

 

*EDIT* - these DIV layers make up each one of those pink shiny bits (the dividers)

 

<div id="vertdividetop">
</div>
<div id="vertdividemid">
</div>
<div id="vertdividebot">
</div>

 

some CSS for you - http://www.simplytrue.co.uk/v2newsite/style1.css

 

in particular:

 

#vertdividetop {
width: 9px;
height: 77px;
float: left;
background-image: url('jpg/divide_top.jpg');
background-repeat: no-repeat;
}
#vertdividebot {
width: 9px;
height: 77px;
float: left;
background-image: url('jpg/divide_bottom.jpg');
background-repeat: no-repeat;
}
#vertdividemid {
width: 9px;
height: 100%;
float: left;
background-image: url('jpg/divide_mid_sec.jpg');
background-repeat: repeat-y;
}

Instead of using excessive divs for this, you might try this:

Instead of having 9px wide div(s), put a left-padding of 9px on the #content div (for example) and specify in your css

#content {
background:url(yourimage.jpg) left center no-repeat;
}

You'll need to make a complete image (with fade/gradient) in your graphics software that is bigger than it needs to be (height wise).

This way, the image will always be vertically 'central' to your div.

If you have lots of content in the div, it won't completely fill the side of the div but will still act as a separator.

If you have little content in the div, you might not see all of the background image (it might get cut off)

But it might be a better way than using all of those extra divs

I hope that makes sense!

Instead of using excessive divs for this, you might try this:

Instead of having 9px wide div(s), put a left-padding of 9px on the #content div (for example) and specify in your css

#content {
background:url(yourimage.jpg) left center no-repeat;
}

You'll need to make a complete image (with fade/gradient) in your graphics software that is bigger than it needs to be (height wise).

This way, the image will always be vertically 'central' to your div.

If you have lots of content in the div, it won't completely fill the side of the div but will still act as a separator.

If you have little content in the div, you might not see all of the background image (it might get cut off)

But it might be a better way than using all of those extra divs

I hope that makes sense!

Thankyou for your reply, it certainly does make sense, and is certainly a lot more economical on those divs, haha. It definately is a possibility and I suppose would shorten render times...

 

Although it doesnt fit with my proposed design to the client it is certainly a valid path if the current one really does turn out to be a nightmare, I'll wait for a couple more people to chip in and see if anyone has any suggestions.

 

Thanks again, dave

ok, i had another think about this, i could use the above mentioned method, in fact i did, i tried it out and its not gonna cut it im afraid. Basically, the same divider is being used on 3 different places on the same page... if i use the method mentioned above the dividers are all at different heights all over the page depending on how much content is in each one of these 4 places that they are dividing.

 

In need of help on this one, any more ideas?

 

Thanks Dave

Is it going to be static content (rarely changing) or is it dynamic?

Is it going to be static content (rarely changing) or is it dynamic?

extremely dynamic

Hey Dragon

 

To make columns of equal height you have to use javascript.

Have a looke here