need to pre-fill a div with a fixed size spacer, what's the bestway?

S

Stevo

Can anyone explain why in this simple example code below, the yellow
background color goes across the whole width of the page? You can see
that the image is only 300 pixels wide (I've also tried using a table
instead of an image) yet the DIV expands to the full width of the page.
It doesn't expand to the whole height of the page, only the width.

<html><body>
<div style="display:block;background-color:yellow">
<img width=300 height=300>
</div>
after text
</body></html>

When I inspect the DIV using IE's MS Dev Toolbar's DOM Explorer, the
height of the DIV is 304 pixels (it gained 4 pixels somehow) and the
width is whatever width I have the browser sized at (I won't be
surprised if it's gained 4 pixels there also). Anyone know why I'm not
seeing both fixed at 300 ?

If I set margin:0;padding:0;border:0 in the style of the DIV it makes no
difference (I do see all the values set to 0px in the Dev Toolbar DOM
Explorer).

I can't do anything outside of that DIV (like putting the DIV inside a
table), although that would seem like a hack anyway. Is there anything I
can do inside, like use a different spacer method, or a nested DIV
(which I've also tried, but perhaps with the wrong style properties).
 
S

Stevo

Stevo said:
Can anyone explain why in this simple example code below, the yellow
background color goes across the whole width of the page? You can see
that the image is only 300 pixels wide (I've also tried using a table
instead of an image) yet the DIV expands to the full width of the page.
It doesn't expand to the whole height of the page, only the width.

<html><body>
<div style="display:block;background-color:yellow">
<img width=300 height=300>
</div>
after text
</body></html>
Click to expand...

By the way, I know that just setting width:300px and height:300px in the
DIV's style will achieve what I want. I find it strange though that a
DIV with style set to display:block would expand beyond the size of it's
contents. I thought that was the whole idea of display:block, that it
would block out that area of the window (or fill that space in the
document, however you prefer to think about it) based on what's in it.
 
J

Jukka K. Korpela

You declare a background for a div element, and you ask why there is a
background for the div element. Right?

So what?

Bogosity alert: no URL, no doctype, imminent invocation of Quirks Mode
detected!

Bogosity alert: grossly invalid markup, without an ALT attribute _or_ a SRC
attribute!
By the way, I know that just setting width:300px and height:300px in
the DIV's style will achieve what I want.
Click to expand...

What you want is then something odd.
I find it strange though
that a DIV with style set to display:block would expand beyond the
size of it's contents.
Click to expand...

Try learning HTML and CSS basics first.
I thought that was the whole idea of
display:block, that it would block out that area of the window (or
fill that space in the document, however you prefer to think about
it) based on what's in it.
Click to expand...

You got a wrong idea then. Get your money back.

Yucca
 
S

Stevo

Jukka said:
You declare a background for a div element, and you ask why there is a
background for the div element. Right?
Click to expand...

Do you have a problem comprehending English? I didn't ask why there is a
background for the div element, as can be clearly seen in the quoted
text above.

My question was why is it the full width of the browser.
So what?
Click to expand...

So the DIV should also be 300 pixels wide. I think if you're having
trouble with questions like this then you need to avoid reading and
answering posts here.
Bogosity alert: no URL, no doctype, imminent invocation of Quirks Mode
detected!
Click to expand...

Is this a full finished HTML page that I've put on the web? Or is it a
stripped down minimalist example? Let's see how often you bother to look
through an example when someone posts 50KB of HTML page here. So what if
it's in Quirks mode.
Bogosity alert: grossly invalid markup, without an ALT attribute _or_ a
SRC attribute!
Click to expand...

Again, irrelevant comments that have nothing to do with the question. Do
you see me really intending to load an image and trying to be
screen-reader compatible? Or is it just a stripped down example to get a
point across? An image tag doesn't need a SRC attribute for this example
because I'm not trying to show an image. I'm showing that an element of
a certain size doesn't make it's container DIV with display:block expand
to only that size.
What you want is then something odd.
Click to expand...

No it's not.
Try learning HTML and CSS basics first.
Click to expand...

Try just not being an ass. Either answer the question if you know the
answer, or shut up if you don't.
You got a wrong idea then. Get your money back.
Click to expand...

Try just not being an ass. Either answer the question if you know the
answer, or shut up if you don't.
 
J

Jukka K. Korpela

Stevo said:
Do you have a problem comprehending English?
Click to expand...

Not as bad as you seem to have.
I didn't ask why there
is a background for the div element, as can be clearly seen in the
quoted text above.

My question was why is it the full width of the browser.
Click to expand...

Why does that surprise you? Because you have no clue of HTML?
So the DIV should also be 300 pixels wide.
Click to expand...

I wild and unsound assumption.
I think if you're having
trouble with questions like this then you need to avoid reading and
answering posts here.
Click to expand...

I think if you're having trouble with correct answers, you need to brush up
your understanding.
Is this a full finished HTML page that I've put on the web?
Click to expand...

No, and that's part of your problem.
So what if it's in Quirks mode.
Click to expand...

You have no clue, do you?
Again, irrelevant comments that have nothing to do with the question.
Click to expand...

Invalid HTML is most relevant to the problem you want to create.
Do you see me really intending to load an image and trying to be
screen-reader compatible?
Click to expand...

No, I see you are clueless. Thanks for conforming this by your use of a
forged From field, always a useful clue of clueslessness.
Try just not being an ass. Either answer the question if you know the
answer, or shut up if you don't.
Click to expand...

You did not ask an understandable question, and you keep insulting any
attempts at clarifying what you really wanted to ask.

This makes you a close approximation of an ass, figuratively speaking. An
ass is more useful than you. Thanks for playing. Please do not fix your
forged From field before you have a clue.

Yucca
 
J

John Hosking

Well, no, not necessarily. I can't see that unless I change your code.
But nevermind; I think I know what you mean to try to communicate.

A URL helps us (a) make sure we're talking about the same thing and (b)
see whatever symptoms you're describing. But assuming you really have
valid code and a "standards mode" doctype somewhere, the simple example
gives us clue enough.

A block-level, non-replaced element in normal flow, such as, for
example, your non-floated div above, takes on the width of its
containing block's width. Read e.g. the text around
<http://www.w3.org/TR/CSS21/visudet.html#blockwidth>.

BTW, the "display:block;" in your sample is extraneous, as div is by
default a block-level element displaying as a block.
By the way, I know that just setting width:300px and height:300px in the
DIV's style will achieve what I want. I find it strange though that a
DIV with style set to display:block would expand beyond the size of it's
contents. I thought that was the whole idea of display:block, that it
would block out that area of the window [...] based on what's in it.
Click to expand...

It's "block", as in "clump", as opposed to in-line flowing and breaking
type elements. This probably won't help you
<http://www.w3.org/TR/html401/sgml/dtd.html#flow> but maybe this will
<http://www.w3.org/TR/html401/struct/global.html#h-7.5.3>.
Or perhaps <http://www.htmldog.com/guides/htmlintermediate/spandiv/>hat
helps any.


Avoiding your question for amoment, and just looking at your example,
maybe you just want a yellow border on your image anyway, hmm?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Silly test page</title>
<style type="text/css">
img { border:3px solid yellow; }
</style>
</head>
<body>
<div>
<img src="http://www.w3.org/Icons/w3c_home" alt="W3C logo">
after text
</div>
</body></html>
 
S

Stevo

John said:
Stevo wrote:
A block-level, non-replaced element in normal flow, such as, for
example, your non-floated div above, takes on the width of its
containing block's width. Read e.g. the text around
<http://www.w3.org/TR/CSS21/visudet.html#blockwidth>.
Click to expand...

Thanks John. I knew there'd be a normal person here ;-)

That article does explain what I'm seeing and why.
Avoiding your question for amoment, and just looking at your example,
maybe you just want a yellow border on your image anyway, hmm?
Click to expand...

No, I don't want a yellow DIV background, I just made it yellow so the
size of it could be seen quickly in the browser. I also don't want to
put an image in the DIV, use it without a doctype, etc. It was a thrown
together block of html to illustrate how a DIV was somehow larger than
its contents.
 
J

Jukka K. Korpela

Stevo said:
Jukka K. Korpela wrote:

<something I didn't bother reading>
Click to expand...

Thank you for your continued cluelessness indicators. Using forged From
field is _so_ revealing.

You surely contribute to keeping Usenet a useful medium by signalling in
your headings that the content is less useful than shit,
 
D

dorayme

Stevo <[email protected]> said:
Can anyone explain why in this simple example code below, the yellow
background color goes across the whole width of the page? You can see
that the image is only 300 pixels wide (I've also tried using a table
instead of an image) yet the DIV expands to the full width of the page.
It doesn't expand to the whole height of the page, only the width.
Click to expand...

A div is 100% the width of its container by default. The content is
irrelevant to the width. But the content is not irrelevant to the
height, a div gains height to enclose its content unless you do
something special to prevent it.

If you want a div to shrink to fit a content, width-wise, you can change
its nature by {float: left;} and then it will be only as wide as the
content. Perhaps this is a motivating factor in your question?
 
S

Stevo

dorayme said:
A div is 100% the width of its container by default. The content is
irrelevant to the width. But the content is not irrelevant to the
height, a div gains height to enclose its content unless you do
something special to prevent it.

If you want a div to shrink to fit a content, width-wise, you can change
its nature by {float: left;} and then it will be only as wide as the
content. Perhaps this is a motivating factor in your question?
Click to expand...

Thanks. That is extremely useful. I knew of the existence of the float
property, but thought it was purely a positional thing. I didn't realize
it would have the effect of stopping the DIV from taking it's width from
it's parent container.
 
D

dorayme

[QUOTE="Stevo said:
A div is 100% the width of its container by default. The content is
irrelevant to the width. But the content is not irrelevant to the
height, a div gains height to enclose its content unless you do
something special to prevent it.

If you want a div to shrink to fit a content, width-wise, you can change
its nature by {float: left;} and then it will be only as wide as the
content. Perhaps this is a motivating factor in your question?
Click to expand...

Thanks. That is extremely useful. I knew of the existence of the float
property, but thought it was purely a positional thing. I didn't realize
it would have the effect of stopping the DIV from taking it's width from
it's parent container.[/QUOTE]

When something is floated it becomes quite an interesting object and so
too its relations with its parents and siblings and other members of the
family tree. I became a bit fascinated by this and made a few pages to
help me understand it:

<http://netweaver.com.au/floatHouse/>
 
C

Chris F.A. Johnson

Thanks. That is extremely useful. I knew of the existence of the float
property, but thought it was purely a positional thing.
Click to expand...

It is. In order to have a float, you must give the element a
width, otherwise it will fill the full width of its container and
the float is meaningless.
 
S

Stevo

Chris said:
It is. In order to have a float, you must give the element a
width, otherwise it will fill the full width of its container and
the float is meaningless.
Click to expand...

That's not what I found. In my test example, the parent container is the
document body, yet adding float:left (without a width property) was all
it took to stop the DIV taking the parent containers' width.
 
J

John Hosking

Stevo said:
That's not what I found. In my test example, the parent container is the
document body, yet adding float:left (without a width property) was all
it took to stop the DIV taking the parent containers' width.
Click to expand...

Chris and Stevo (et.al.):

In my earlier reply to Stevo I pointed to the W3C text on CSS 2.1
"10.3.3 Block-level, non-replaced elements in normal flow" at
<http://www.w3.org/TR/CSS21/visudet.html#blockwidth> for the non-floated
div provided in the example.

For floats, I now point you to "10.3.5 Floating, non-replaced elements",
<http://www.w3.org/TR/CSS21/visudet.html#float-width>, which details
the shrink-to-fit quality of floated divs. This is what dorayme was
referring to. Note that floating an element takes it "out of the flow",
which may cause effects surprising to the novice.
 
D

dorayme

[QUOTE="Stevo said:
It is. In order to have a float, you must give the element a
width, otherwise it will fill the full width of its container and
the float is meaningless.
Click to expand...

That's not what I found. In my test example, the parent container is the
document body, yet adding float:left (without a width property) was all
it took to stop the DIV taking the parent containers' width.[/QUOTE]

Perhaps Chris meant that there would be no obvious point to a float if
it did not have a width that was less than the default 100% of its
container rather than that the author must actually have specify it. It
gives itself a width, defaulting to the width of its content, roughly
speaking, rather than to its container.

(Here is something, btw, that might surprise, look at how the
scroll-bars affect the look of the respective divs when the window is
narrowed to bring scroll-bars on, operate the bars to bring up the right
hand side and observe the difference between the floated div and the
unfloated one:

<http://dorayme.890m.com/alt/floatAndNonFloat.html>
)
 
D

dorayme

John Hosking said:
For floats, I now point you to "10.3.5 Floating, non-replaced elements",
<http://www.w3.org/TR/CSS21/visudet.html#float-width>, which details
the shrink-to-fit quality of floated divs. This is what dorayme was
referring to. Note that floating an element takes it "out of the flow",
which may cause effects surprising to the novice.
Click to expand...

Funny you should say that, I just posted a possible curiosity for a
novice...

Floats are endlessly fascinating! <g>
 
B

Bergamot

Chris said:
In order to have a float, you must give the element a
width, otherwise it will fill the full width of its container
Click to expand...

That was true in the CSS 2.0 spec, but changed with CSS 2.1. The only
browser I know that follows the 2.0 spec is Mac IE 5.
 
D

dorayme

[QUOTE="Stevo said:
It is. In order to have a float, you must give the element a
width, otherwise it will fill the full width of its container and
the float is meaningless.
Click to expand...

That's not what I found. In my test example, the parent container is the
document body, yet adding float:left (without a width property) was all
it took to stop the DIV taking the parent containers' width.[/QUOTE]

And just one more thing about this matter I forgot to mention in last
post, my memory jogged by Ben mentioning "greedy", folks are using
floats quite a bit these days to make columns rather than to float
single items like pics off to the left or right. Given that there are
often lines of text in these floats, they would stretch to fill the
width of the container if the author did not take steps to limit the
width of the float itself and thus force text to wrap (just what is
wanted for cols). Your experience was due to the particular short
content of your test.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Dropdown menu in a fixed navbar 2
Clickable Div Block 1
An unknown bug doesn't allow the quotes app to work. What's the issue? 3
How to make a div select work? 5
Help with Visual Lightbox: Scripts 2
Image shifts to the right when export the page to pdf 4
Aligned to the left 3
Need help , Having problem with Drag n Drop... 1

Members online

Total: 53 (members: 3, guests: 50)
Robots: 508

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top