12 replies [Last post]
technossomy
technossomy's picture
Offline
Enthusiast
Last seen: 39 weeks 4 days ago
Timezone: GMT+2
Joined: 2004-06-09
Posts: 260
Points: 8

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 18 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 26 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

technossomy
technossomy's picture
Offline
Enthusiast
Last seen: 39 weeks 4 days ago
Timezone: GMT+2
Joined: 2004-06-09
Posts: 260
Points: 8

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 26 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 18 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 26 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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 Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

technossomy
technossomy's picture
Offline
Enthusiast
Last seen: 39 weeks 4 days ago
Timezone: GMT+2
Joined: 2004-06-09
Posts: 260
Points: 8

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 18 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Divs not extending to end of page

Quote:
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.
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.

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? Smile

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

technossomy
technossomy's picture
Offline
Enthusiast
Last seen: 39 weeks 4 days ago
Timezone: GMT+2
Joined: 2004-06-09
Posts: 260
Points: 8

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 18 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

technossomy
technossomy's picture
Offline
Enthusiast
Last seen: 39 weeks 4 days ago
Timezone: GMT+2
Joined: 2004-06-09
Posts: 260
Points: 8

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 18 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.