css division height based on random image height

[d_run_forever]

Hello forum,

My header division contains:

1. a title
2. an image tag that runs a php script, loading a random image. <img src="randomimage.php">

Here is the existing code that determines placement:


.header {
position:relative;
background:#FFF;
margin:0 0 0 0;
border-bottom:1px dashed #C0C0C0; }

.headerQuote {
position:relative;
font-size:1.2em;
font-weight:bold;
padding:10px;
margin-bottom:62px;
z-index:2; }

.randomimage {
position:absolute;
top:0px;
right:0px;
z-index:1; }


I want the height of the header division to be based upon the height of the loaded image. Right now, the height of the division is based upon the 62px setting.. this is the distance from the bottom of the .headerQuote to the bottom of the division.

I would like to cause the height of the division to be determined based on the .randomimage instead. Thus, if each image has a different height, I will never have a problem with the image overlapping into another division.

you can see the site as it stands at www.gracerequired.000k2.com

Any suggestions / help? Thank you so much...

[rmedek]

hm... it might help to see the code as you're actually going to use it, with the properly marked up divs and all. The example doesn't really give us much to work on.

If you can get away with not using absolute positioning, then you won't have to do anything. Assign the padding to the top of the quote, and the flow of the document will have it start below the image anyway... I think.

Anyhoo. Post some relative code, or maybe a screenshot of how you'd like it to look...

[d_run_forever]

here is the htm code associated with the css code. do you need more, i.e. all the code from the css file / index page? as you can see, i'm using this code in conjunction with blogging software.

thank you for your knowledge, and for sharing.


<div class="header">

<div class="headerQuote">
<%blogsetting(desc)%>
</div>

<div class="randomimage">
<img src="<%skinfile(banner/rotate.php)%>">
</div>

</div> :) :) :)

[ronaldb66]

Is the page itself by any chance dynamic, that is: generated by script? If so, you could let that script handle both the image selection and the generation of a tiny sliver of local style to set the div height on the fly.

[d_run_forever]

here are the requested screen shots. In untitled1.gif, you can see the random image with a height of 100 px. The header division fits, as 62 px is the distance between the bottom of the quote and the bottom border.

however, is untitled2.png, i have an image with a larger height. The division does not "flex" to fit.

[d_run_forever]

Is the page itself by any chance dynamic, that is: generated by script? If so, you could let that script handle both the image selection and the generation of a tiny sliver of local style to set the div height on the fly.

yes, it is dynamically generated. a "main skin" controls the arrangement of divisions and loads their content from external files (header.inc, mainleft.inc, etc..)

here is an example from the main skin..

<div class="header">
<%parsedinclude(header.inc)%>
</div>

however, the software that generates the page does not have this capability, at least that i know of. www.nucleuscms.org

[rmedek]

I was able to do what you wanted (I think) by taking a different approach: position the image in the normal flow, float it to the right, and position the quote absolutely. Here's the new CSS:
div.header:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.header {
position:relative;
background:#FFF;
margin:0;
padding:0;
border-bottom:1px dashed #C0C0C0; }

.headerQuote {
position:absolute;
font-size:1.2em;
font-weight:bold;
padding:10px;
/*left:10px;
top:5px;*/
z-index:2; }

.randomimage {
float: right;
top: 0px;
right: 0px;
z-index: 1;
}
It works for me in FF (OS X). Will that work for you?

[d_run_forever]

thanks. i'll tryi it out shortly.

still learning all these css codes. float? gosh, so much to know.

i feel like alice going down the rabbit hole...

[d_run_forever]

works good in mozilla, but IE does not interpret the bottom border correctly. doesn't matter, i can fix that another way.

thanks for all the help.

[rmedek]

no problem... Good luck with the CSS challenge :)