Height of an element

6 New Member

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:absolu te 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"></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

Subscribe Reply

2581

le007

New Member

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

RTrigaux

New Member

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

7,435

Recognized Expert Expert

Set it as html,body{heigh t:100%} but I have not studied the problem.

Oct 11 '06 #4

le007

New Member

Can you upload the file to a URL?

Oct 11 '06 #5

RTrigaux

New Member

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

7,435

Recognized Expert Expert

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

RTrigaux

New Member

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

7,435

Recognized Expert Expert

That's fine but we need a doctype to work with.
Your link doesn't work right now.

Oct 12 '06 #9

RTrigaux

New Member

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

Similar topics

21549

How do I calculate an element's width/height?

by: delerious | last post by:

I need to determine an element's width and height in pixels (not including padding, border, and margin) in Javascript. The element will not have width or height styles specified. In Mozilla, I know I can use document.defaultView.getComputedStyle() to do this. IE does not support document.defaultView.getComputedStyle(). It supports offsetWidth/offsetHeight, but those include the padding and border. IE also supports...

Javascript

6744

Inline-level elements: line-height, padding and background

by: Stanimir Stamenkov | last post by:

Here are two cases regarding inline-level elements' line-height, padding and background, which I doesn't understand: <div style="background: black; color: white; line-height: 1.5"> <span>Abc</span> <span style="background: white; color: black; line-height: 3">Abc</span> <span>Abc</span> </div>

HTML / CSS

7226

line-height and images in IE

by: Stefan Krause | last post by:

If a line-height is defined for a text and an image (e.g. 9px wide and 7px high) is inserted the line-height will be altered (e.g 15 instead of 16 pixels) for IE 5.0, 5.5. and 6.0. Here's an example: <style> td { font-size:11px; font-family:Arial,Verdana;

HTML / CSS

2914

the height property

by: Secret Guy | last post by:

Because of my experience posting various places over the last couple of weeks: I'm expecting to be greated with hostility for asking about concepts instead of "practical" things, since that has been my experience for years and decades. Maybe I'm projecting hostility. I don't know. How can I ask about theory and concepts without offending people? I'll just continue asking and cross my fingers: According to the 2.1 spec, regarding...

HTML / CSS

6975

IE6 doesnt extend the DIV box height so that float would be enclosedvisually by DIV

by: Marek Mänd | last post by:

I have simple structure like: <div> <h3 style="text-align:center;"> <span style="float:right;">input type="image"/></span> <span style="float:left;">input type="image"/></span> boxes titlebar </h3> <div> box content

HTML / CSS

10181

Browser Height in IE? NOT document height

by: Kepler | last post by:

How do you get the height of the client browser in IE? Both document.body.clientHeight and document.body.offsetHeight return the height of the document. If the page is long and there's a vertical scrollbar, you get the height of the entire document, screwing up any chance of centering a window in the browser using these values. Is there a way to get the height of the actual browser window and not the entire page height? Thanks.

Javascript

4297

height=100% is not working for Mozilla browser

by: Raghavendra | last post by:

Hi All, Here is my code. ------------------------------------------- <div style="height:100%"> <BODY> sample text spanning about 30 lines </BODY> </div> <table><tr><td>footer</td></tr></table>

HTML / CSS

2716

Footer on page with fixed height

by: Martin Plotz | last post by:

Dear Newsgroup, I would like to have a page with a footer on the bottom of the page with a fixed height. The upper part should have the remaining height. In frames I could achieve this with "*" as height for the upper part - but I would like to do the same with CSS. In Firefox <body style="height:100%"> <div id="main"

HTML / CSS

22295

Height of selectbox element

by: =?iso-8859-1?q?Jesper_R=F8nn-Jensen?= | last post by:

I'm working with a requirement to make a selectbox the same height as normal text input elements. (at least for IE7) But in IE the selectbox reacts strangely to the CSS rules. Normally, there are so many things not possible with select boxes in IE. But the I discovered I could actually change the height by adjusting font-size, then adjusting height I was actually able to tweak the height.

HTML / CSS

2487

Can I force the form to extend to 90% of the body height?

by: AAaron123 | last post by:

<body runat="server" id="MainBody"> <form id="form1" runat="server" style="background-color:green; width: 100%; height: 100%"> <br /> Table1" runat="server" Style="background-color:Yellow; width: 100%; height: 90%" BorderColor="Maroon"

ASP.NET

9719

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

9597

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

10620

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

10369

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

6877

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

5682

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

4329

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

3851

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

3008

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General