By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,441 Members | 996 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,441 IT Pros & Developers. It's quick & easy.

Height of an element

P: 6
Hello all,

I have a page setup with blocs of texts (div with margins, background colors and all).

For one of these blocks, I need two columns. Their height is not predictible.

The simple CSS for this is a div which contains two divs, using for each of the two position:absolute to set the horizontal dimentions of each columns. (I also tried float, display inline...)

The problem is that each time, the two contained divs appear above the following text block, and my containing block has a zero height.

Here is the code:


<style type="text/css"><!--
/*------- block text <div>-------*/
.bloc { width: 600px;
margin-left: auto;
margin-right: auto;
padding-top: 1.5%;
padding-bottom: 1.5%;
text-align: justify;
}
--></style>



<div class="bloc" style="
background-color:#ffB0B0;">
<p>www</p>
</div>


<div class="bloc" style="
padding-top: 0%;
padding-bottom: 0%;
">

<div class="bloc" style="
background-color:#ffff00;
position: absolute;
left:0%;
width:50%
">
<p>xxx</p>
</div>

<div class="bloc" style="
background-color:#00ff00;
position: absolute;
left:50%;
width:50%
">
<p>yyy</p>
</div>

</div>

<div class="bloc" style="
background-color:#ffffff;">
<p>zzz</p>
</div>


In the example the yellow and green blocks should appear between the white and pink block, not above the white block. (In more the yellow block should be aligned witht he left margin of the others)

Thank you if you have a method to fix this.

Richard
Oct 10 '06 #1
Share this Question
Share on Google+
11 Replies


P: 14
Hi Richard,
Did you set the overall body to 100%?
If you do that - you can set Div's to be any percentage of that!
Leo
Oct 10 '06 #2

P: 6
Hi Richard,
Did you set the overall body to 100%?
If you do that - you can set Div's to be any percentage of that!
Leo
Thank you for helping! But:

Doing body { height: 100%} changes nothing.


Doing <div style "height:100%"> for the containing div makes if fill the page.

Doing <div style "height:100%"> for the contained divs make them fill the page.

So it don't work...

My intuition tells me that we need to set something into the containing div, but what?
Oct 11 '06 #3

drhowarddrfine
Expert 5K+
P: 7,435
Set it as html,body{height:100%} but I have not studied the problem.
Oct 11 '06 #4

P: 14
Can you upload the file to a URL?
Oct 11 '06 #5

P: 6
Can you upload the file to a URL?
Thank you to consider my problem.

You can find it at
http://www.shedrupling.org/testCSS.php

normaly the two contained green and yellow DIVs should be into the grey containing DIV, not into the white DIV which comes after the grey one.
This si because the grey DIV has a zero height, where I expect it to have the same height than the green and yellow ones.

Please not consider the left/right position/margin problems, I can solve them.

The source code too is a bit messy, it is because it is generated by PHP.

Please note that this file will be removed from here as soon as its presence will become useless.

Richard
Oct 12 '06 #6

drhowarddrfine
Expert 5K+
P: 7,435
Without a proper doctype, you are in quirks mode and using an improper box model. Add this to the first line of your code and see where we stand.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Oct 12 '06 #7

P: 6
Without a proper doctype, you are in quirks mode and using an improper box model. Add this to the first line of your code and see where we stand.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Done. Anyway this was into the real document.

It changes nothing...
Oct 12 '06 #8

drhowarddrfine
Expert 5K+
P: 7,435
That's fine but we need a doctype to work with.
Your link doesn't work right now.
Oct 12 '06 #9

P: 6
That's fine but we need a doctype to work with.
Your link doesn't work right now.
It works now. Perhaps the server was down for a while. This doctype was normally present in the original file, but this original file is complex so that I prefered to just extract the relevant part, forgetting the doctype. I put in the doctype in the axample as you requested.
Oct 13 '06 #10

drhowarddrfine
Expert 5K+
P: 7,435
The stuff between the style tags is not getting commented out properly for some reason.

When you absolutely position something, it is removed from the normal flow. Thus, the containing div will collapse because it has no content. You can make the div expand by giving it a dimension.
Oct 13 '06 #11

P: 6
The stuff between the style tags is not getting commented out properly for some reason.
Don't understand what you mean. Is is about the style sheet, or the CSS in the file? Do you bother about the comments containing < and >?

When you absolutely position something, it is removed from the normal flow. Thus, the containing div will collapse because it has no content. You can make the div expand by giving it a dimension.
OK, I understood that. The container collapses all the time. I could set a dimention for it, but I don't know which dimention: the contained DIVs have no predictable height, there can be one or two lines, of variable font height due to screen size adaptation, and I don't want the height be uselessly large. In fact this code is generated by a PHP function, and the texts in the two contained DIVs are passed as variables, so that I have to face all the situations at once.

I think this case may be very common, the CSS must have something to fit this situation. I tried height:auto for the containing DIV, but it still don't work.
Oct 14 '06 #12

Post your reply

Sign in to post your reply or Sign up for a free account.