473,395 Members | 1,516 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > html / css > questions > css 100% height in xhtml 1.0 transitional

Join Bytes to post your question to a community of 473,395 software developers and data experts.

CSS 100% Height in XHTML 1.0 Transitional

1
Can some please tell me how can i apply CSS height in % for inner div?

what i am trying to do is applying a bg color to an inner div ( fill class div ) based on height in %

Below is the code, this works just fine when i remove the doctype

How can make it work with XHTML 1.0 Transitional DOCTYPE

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
  3. <head>
  4. <style type="text/css">
  5. /*<![CDATA[*/
  6.  
  7. .container {
  8.         height: 250px;
  9.         width: 50px;
  10.         border: 1px solid black;
  11. }
  12.  
  13. .fill_wrapper {
  14.        width: 100%;
  15.         position: relative;
  16.         top: 60%;
  17.         text-align:center;
  18. }
  19.  
  20. .label {
  21.         font-size: 20px;
  22.             color: black;
  23. }
  24.  
  25. .fill {
  26.         width: 100%;
  27.         height: 40%;
  28.         background-color: red;
  29. }
  30.  
  31. /*]]>*/
  32. </style>
  33. <title></title>
  34. </head>
  35. <body>
  36. <div class="container">
  37. <div class="fill_wrapper">
  38. <div class="fill"><span class="label">40%</span></div>
  39. </div>
  40. </div>
  41. </body>
  42. </html>
  43.  
May 20 '10 #1
1 2447
drhowarddrfine
7,435 Expert 4TB
Removing the doctype is never an option. New web pages should always use 'strict', too.

When you set something to a percent, you have to ask, "Percent of what?" and the answer is always percent of the parent of that element. So what is the parent set to?
May 20 '10 #2

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

Similar topics

41
Validation: XHTML Transitional vs. HTLM 4.01 Strict
by: CMAR | last post by:
What are the pluses and minuses of constructing and validating between XHTML Transitional vs. HTLM 4.01 Strict Thanks, CMA
HTML / CSS
11
CSS 2 columns (1 nav + 1 content) 100% height & 100% width
by: Not4u | last post by:
Hello, I have a problem with CSS code. I want to have one menu column with a fixed width and a 100% height and the rest of the page for content. ---------------- |.|.|<--100%-->|...
HTML / CSS
3
CSS design and 100% height
by: Jörg Ellermann | last post by:
Hi, I'm quite unused to CSS and I want the following layout to work using CSS and tables: Page split into table with two cells of 50% width: Left cell | Right cell | Navbar ...
HTML / CSS
11
Extending the XHTML transitional XSD
by: Kidogg | last post by:
Hi all, I'm attempting to write a validator for some email template files we use as part of our e-commerce application (incidentally in C#) and I've run into a problem as I'm not a huge user of...
.NET Framework
3
Using 100% height and not more
by: Charles | last post by:
I am designing a small HTML editor, and in the lower pane, I want the textarea to use 100% height with the toolbar, but no more than that: http://www.auriance.com/docs/tmp/editor/ Actually it...
HTML / CSS
1
Two divs and the old 100% height problem
by: joshthomas99 | last post by:
Hello, Yes, I've spent hours reading through all the old postings and searched the net - but couldnt find a solution to the 100% height problem with nested divs. Basically I want the first...
HTML / CSS
4
How *extract* data from XHTML Transitional web pages? got xml.dom.minidom troubles..
by: seberino | last post by:
I'm trying to extract some data from an XHTML Transitional web page. What is best way to do this? xml.dom.minidom.parseString("text of web page") gives errors about it not being well formed...
Python
0
100% height and footer at bottom
by: sannymak | last post by:
Hello All, I have some problems making the columns 100% and forcing the footer at the bottom. Please refer to the code below and let me know a solution: HTML CODE: <!DOCTYPE html PUBLIC...
HTML / CSS
4
Positioning, Overlap, and greater than 100% height/width
by: Christopera | last post by:
Hello, I have built a site that uses two divs, one verticle, and one horizontal as graphic style for the ite. The problem I am having is that if the browser is resized very small the divs are...
HTML / CSS
6
border on 100% height body creates scroll
by: msoliver | last post by:
I'm trying to figure out why the following creates a vertical scroll bar. Browser is IE 7 - using XHTML 1.0. I expand html and body to height of 100% and then I want to put a border around the...
HTML / CSS
0
Batch import of multiple excel files into the database
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
Data Management
0
Merging data from multiple Excel files
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
Data Management
0
Migrating Website to Cloud - Emmanuel Katto
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
General
0
BarryA
Navigating the Data Structures and Algorithms (DSA)
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
Algorithms / Advanced Math
1
Is that possible of reading the .csv file in column wise and the column have different lengths ?
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
C / C++
0
How to build RAID in BIOS?
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
Computer Hardware
0
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...
Windows Server
0
Oralloy
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,...
C / C++
0
The easy way to turn off automatic updates for Windows 10/11
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
Windows Server

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!