Sat, 2006-01-21 09:35
I have the following piece of code:
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>Parametric heading</title>
<style>
body { margin: 0; padding: 0; font: normal 10pt Arial, sans-serif; }
#d0 { background-color: #CCC; width: 100%; height: 15px; }
#d1 { background-color: #999; width: 100px; height: 25px; border-top: 1px solid white; border-right: 1px solid white; display: inline; }
#d2 { background-color: #DDE; width: 400px; height: 25px; border-top: 1px solid white; border-right: 1px solid white; display: inline; }
#d3 { background-color: #99B; width: 25%; height: 25px; border-top: 1px solid white; display: inline; }
</style>
</head>
<body>
<div id="d0">d0</div>
<div id="d1">d1</div><div id="d2">d2</div><div id="d3">d3 (not extending! now at 25%)</div>
</body>
</html>
and what I want to achieve is that division d3 extends all the way to the right of the page. What is the right setting for the d3 styling to make it so?
Thanks in advance
Tech
Sat, 2006-01-21 09:49
#1
Divs not extending to end of page
Remove {display: inline;}. An inline element only has sufficient height and width to contain its content. A block element extends to the full width available, excepting float and AP elements.
cheers,
gary
Sat, 2006-01-21 10:23
#2
Divs not extending to end of page
[sidenote]
May I just enquire as to why and where the DTD came from?
Did you intend on rendering in 'Quirks' mode?
You need to either remove the definition 'Transitional' or add a url if you want 'Standards' mode, and I'd take it to 4.01
The syntax is also incorrect with that one, all lower case on the identifier is incorrect.
Hugo
Sat, 2006-01-21 12:57
#3
Divs not extending to end of page
kk5st:
I had already tried using 'display: block' , but no avail, the division will only move to the next line; I want it to be aligned with d1 and d2 and simply flush to the rightmost border of the screen. So the problem still remains.
Hugo:
I hurridly copied a doctype from a webpage, without giving it much thought. I once had a piece of code which had no doctype and someone quickly pointed that out.
Thanks both for your responses nonetheles.
Tech
Sat, 2006-01-21 21:21
#4
Divs not extending to end of page
If you just added the DTD to the posted code to appease us then it's not necessary, you can post a question on a general point and we will/should assume that you will be using a full DTD .
It sounds as though you need to be using floats if your intention is to have the divisions all on the same line.
Hugo.
Sat, 2006-01-21 21:31
#5
Divs not extending to end of page
You can't get there on the road you're traveling. I can only guess at the actual usage, semantically and structurally. Your is example neither semantic nor structured. HTML is about using markup in a structure to describe the elements (semantics).
In what you have, d1, d2 and d3 are only as wide as the text. IE may honor the width:, but does so contrary to the rules.
Here is something that may simulate what you want. A practical problem will yield a more reasoned answer.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en"
xmlns="http://www.w3.org/1999/xhtml"
lang="en">
<head>
<meta name="generator"
content=
"HTML Tidy for Linux/x86 (vers 1st August 2004), see www.w3.org" />
<meta name="editor"
content="Emacs 21" />
<meta name="author"
content="Gary Turner" />
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">
/*<![CDATA[*/
html, body {
margin: 0;
padding: 0;
}
ul {border: 1px solid black;
margin: 0;
padding: 0;
list-style: none;
background-color: #99b;
overflow: hidden;
}
#d0 {
background-color: #CCC;
width: 100%;
height: 15px;
}
#d1 {
background-color: #999;
width: 100px;
height: 25px;
border-top: 1px solid white;
border-right: 1px solid white;
float: left;
}
#d2 {
background-color: #DDE;
width: 400px;
height: 25px;
border-top: 1px solid white;
border-right: 1px solid white;
float: left;
}
#d3 {
background-color: #99B;
/* width: 25%; */
height: 25px;
border-top: 1px solid white;
float: left;
}
/*]]>*/
</style>
</head>
<body>
<p id="d0">d0</p>
<ul>
<li id="d1">d1</li>
<li id="d2">d2</li>
<li id="d3">d3 (not extending! now at 25%)</li>
</ul>
</body>
</html> [edit] Hugo was posting while I was still typing. Having a six hour headstart helps, eh? [/edit]cheers,
gary
Sat, 2006-01-21 22:24
#6
Divs not extending to end of page
Quote:
Having a six hour headstart helps, eh?
The speed my brain is working at that's the minimunm I require 
Mon, 2006-01-23 08:44
#7
Divs not extending to end of page
kk5st wrote:
Your is example neither semantic nor structured. HTML is about using markup in a structure to describe the elements (semantics).
Gary: I am not sure what you mean by this. What I was trying to achieve is to have 3 divisions all on one line extending to the end of the page. If it works with one division (d0) it should work with 3 divisions (d1, d2, d3), not? I don't see your point on semantics and structure.
Hugo: I will try to use floats to see what that yields.
Thanks again for your responses.
Tech
Mon, 2006-01-23 09:07
#8
Divs not extending to end of page
Quote:
No, you're talking about how you want to achieve something. The <div> has no meaning. It is semantically NULL. The content is something, and nothing is a div. A div is an aggregating, or grouping element. It should hold no content itself, but rather it holds groups of elements.
What I was trying to achieve is to have 3 divisions all on one line extending to the end of the page. If it works with one division (d0) it should work with 3 divisions (d1, d2, d3), not? I don't see your point on semantics and structure.
Are you making a navigation bar? That's a list. Are you going for a 3 col layout with two fixed width cols and one liquid? In that case, modify #d3 above like so,
#d3 {
background-color: #99B;
height: 25px;
border-top: 1px solid white;
margin-left: 400px;
}and go back to the divs instead of the list. Talk about what you want to do, not how you want to do it. If you knew how, you wouldn't need to ask, right?
cheers,
gary
Mon, 2006-01-23 18:32
#9
Divs not extending to end of page
Thanks for your input, and I get your point on the divisions. To indicate what I want, included is a picture that may explain the details. The red dots are now known as d0..d3. None of the colored elements hold any content.
Gary: I do not understand the need for a 400px margin you have suggested for d3. It looks particularly messy in Mozilla based browsers.
Thanks again
Tech
Mon, 2006-01-23 21:33
#10
Divs not extending to end of page
You didn't do the second part, going back to div instead of a list. The margin is so that a second line doesn't wrap under the first two elements. Do this;
#d1 {
background-color: #999;
width: 100px;
border-top: 1px solid white;
border-right: 1px solid white;
float: left;
}
#d2 {
background-color: #DDE;
width: 400px;
border-top: 1px solid white;
border-right: 1px solid white;
float: left;
}
#d3 {
background-color: #99B;
border-top: 1px solid white;
margin-left: 502px;
}
=============
<p id="d0">d0</p>
<p id="d1">d1</p>
<p id="d2">d2</p>
<p id="d3">d3 (not extending! now at 25%)<br />second line</p>Now remove the margin-left property from #d3. See the difference? Use it or not, depending on what you want. cheers,
gary
Tue, 2006-01-24 21:08
#11
Divs not extending to end of page
Gary, thanks for your response.
The margin of 502px has no effect in IE, but I do see its use. Anyway, I don't quite see the purpose of paragraphs as opposed to divs. My idea of a div is a positioned, dimensioned and colored block on the page. With paragraphs I do not have that much flexibility. In addition, with your solution there is a need to count pixels. What is the compelling reason not to use divs?
By the way, the picture seems no longer to be uploaded and for the record, it can be found here:
http://www24.brinkster.com/ontario/ParametricHeading.png
and the red dots are the blocks I am currently implementing.
Best
Tech
Wed, 2006-01-25 06:01
#12
Divs not extending to end of page
The 502 is simply the width of the two left columns + borders. The idea is that extra content on the non-float static block does not wrap under the floats.
I used <p>s because a <div> is a semantically neutral aggregator, and I wasn't forming a group of anything. If there were multiple elements in the column, I might have wrapped them in div tags—depending on the structure I wanted. In the first example, I was emulating a menu, thus the list structure—because a menu is a list. By the same token, <span> is a semantically neutral segregator. It separates its inline content, usually text, from its context for special handling.
cheers,
gary