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

Discussion in 'HTML' started by Stevo, Aug 15, 2008.

  1. Stevo

    Stevo Guest

    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).
    Stevo, Aug 15, 2008
    #1
    1. Advertising

  2. Stevo

    Stevo Guest

    Stevo wrote:
    > 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>


    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.
    Stevo, Aug 15, 2008
    #2
    1. Advertising

  3. Re: need to pre-fill a div with a fixed size spacer, what's the best way?

    Stevo wrote:
    > Stevo wrote:
    >> Can anyone explain why in this simple example code below, the yellow
    >> background color goes across the whole width of the page?


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

    >> You can see
    >> that the image is only 300 pixels wide


    So what?

    >> <html><body>


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

    >> <img width=300 height=300>


    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.


    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.


    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.


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

    Yucca
    Jukka K. Korpela, Aug 15, 2008
    #3
  4. Stevo

    Stevo Guest

    Jukka K. Korpela wrote:
    > Stevo wrote:
    >> Stevo wrote:
    >>> Can anyone explain why in this simple example code below, the yellow
    >>> background color goes across the whole width of the page?

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


    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.

    >>> You can see
    >>> that the image is only 300 pixels wide

    >
    > So what?


    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.

    >>> <html><body>

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


    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.

    >>> <img width=300 height=300>

    >
    > Bogosity alert: grossly invalid markup, without an ALT attribute _or_ a
    > SRC attribute!


    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.

    >> By the way, I know that just setting width:300px and height:300px in
    >> the DIV's style will achieve what I want.

    >
    > What you want is then something odd.


    No it's not.

    >> I find it strange though
    >> that a DIV with style set to display:block would expand beyond the
    >> size of it's contents.

    >
    > Try learning HTML and CSS basics first.


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

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

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


    Try just not being an ass. Either answer the question if you know the
    answer, or shut up if you don't.
    Stevo, Aug 15, 2008
    #4
  5. Re: need to pre-fill a div with a fixed size spacer, what's the best way?

    Stevo wrote:

    > Do you have a problem comprehending English?


    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.


    Why does that surprise you? Because you have no clue of HTML?

    >>>> You can see
    >>>> that the image is only 300 pixels wide

    >>
    >> So what?

    >
    > So the DIV should also be 300 pixels wide.


    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.


    I think if you're having trouble with correct answers, you need to brush up
    your understanding.

    >>>> <html><body>

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

    >
    > Is this a full finished HTML page that I've put on the web?


    No, and that's part of your problem.

    > So what if it's in Quirks mode.


    You have no clue, do you?

    >>>> <img width=300 height=300>

    >>
    >> Bogosity alert: grossly invalid markup, without an ALT attribute
    >> _or_ a SRC attribute!

    >
    > Again, irrelevant comments that have nothing to do with the question.


    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?


    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.


    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
    Jukka K. Korpela, Aug 15, 2008
    #5
  6. Stevo

    John Hosking Guest

    Stevo wrote:
    > Stevo wrote:
    >> 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.


    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.

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


    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.


    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>

    --
    John
    Possessive "its" has no apostrophe. Even on the Internet.
    John Hosking, Aug 15, 2008
    #6
  7. Stevo

    Stevo Guest

    Jukka K. Korpela wrote:

    <something I didn't bother reading>
    Stevo, Aug 15, 2008
    #7
  8. Stevo

    Stevo Guest

    John Hosking wrote:
    > 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>.


    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?


    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.
    Stevo, Aug 15, 2008
    #8
  9. Re: need to pre-fill a div with a fixed size spacer, what's the best way?

    Stevo wrote:

    > Jukka K. Korpela wrote:
    >
    > <something I didn't bother reading>


    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,
    Jukka K. Korpela, Aug 15, 2008
    #9
  10. Stevo

    dorayme Guest

    Re: need to pre-fill a div with a fixed size spacer, what's the best way?

    In article <g84dh5$s52$00$-online.com>, Stevo <>
    wrote:

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


    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?

    --
    dorayme
    dorayme, Aug 15, 2008
    #10
  11. Stevo

    Stevo Guest

    dorayme wrote:
    > Stevo <> wrote:
    >> 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.

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


    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.
    Stevo, Aug 15, 2008
    #11
  12. Stevo

    dorayme Guest

    Re: need to pre-fill a div with a fixed size spacer, what's the best way?

    In article <g84tjg$qtf$00$-online.com>, Stevo <>
    wrote:

    > dorayme wrote:
    > > Stevo <> wrote:
    > >> 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.

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

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


    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/>

    --
    dorayme
    dorayme, Aug 15, 2008
    #12
  13. Re: need to pre-fill a div with a fixed size spacer, what's the best way?

    On 2008-08-15, Stevo wrote:
    > dorayme wrote:
    >> Stevo <> wrote:
    >>> 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.

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

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


    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.

    > I didn't realize
    > it would have the effect of stopping the DIV from taking it's width from
    > it's parent container.


    --
    Chris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com>
    ===================================================================
    Author:
    Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
    Chris F.A. Johnson, Aug 16, 2008
    #13
  14. Stevo

    Stevo Guest

    Chris F.A. Johnson wrote:
    > On 2008-08-15, Stevo wrote:
    >> dorayme wrote:
    >>> 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?

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

    >
    > 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.
    >
    >> I didn't realize
    >> it would have the effect of stopping the DIV from taking it's width from
    >> it's parent container.


    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.
    Stevo, Aug 16, 2008
    #14
  15. Stevo

    John Hosking Guest

    Stevo wrote:
    > Chris F.A. Johnson wrote:
    >> On 2008-08-15, Stevo wrote:
    >>> dorayme wrote:
    >>>> 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?
    >>> Thanks. That is extremely useful. I knew of the existence of the
    >>> float property, but thought it was purely a positional thing.

    >>
    >> 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.
    >>
    >>> I didn't realize it would have the effect of stopping the DIV from
    >>> taking it's width from it's parent container.

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


    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.

    --
    John
    Possessive "its" has no apostrophe. Even on the Internet.
    John Hosking, Aug 16, 2008
    #15
  16. Stevo

    dorayme Guest

    Re: need to pre-fill a div with a fixed size spacer, what's the best way?

    In article <g85op5$dma$00$-online.com>, Stevo <>
    wrote:

    > Chris F.A. Johnson wrote:
    > > On 2008-08-15, Stevo wrote:
    > >> dorayme wrote:
    > >>> 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?
    > >> Thanks. That is extremely useful. I knew of the existence of the float
    > >> property, but thought it was purely a positional thing.

    > >
    > > 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.
    > >
    > >> I didn't realize
    > >> it would have the effect of stopping the DIV from taking it's width from
    > >> it's parent container.

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


    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>
    )

    --
    dorayme
    dorayme, Aug 16, 2008
    #16
  17. Stevo

    dorayme Guest

    Re: need to pre-fill a div with a fixed size spacer, what's the best way?

    In article <48a68265$>,
    John Hosking <> wrote:

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


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

    Floats are endlessly fascinating! <g>

    --
    dorayme
    dorayme, Aug 16, 2008
    #17
  18. Stevo

    Bergamot Guest

    Chris F.A. Johnson wrote:
    >
    > In order to have a float, you must give the element a
    > width, otherwise it will fill the full width of its container


    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.

    --
    Berg
    Bergamot, Aug 16, 2008
    #18
  19. Stevo

    dorayme Guest

    Re: need to pre-fill a div with a fixed size spacer, what's the best way?

    In article <>,
    Bergamot <> wrote:

    > Chris F.A. Johnson wrote:
    > >
    > > In order to have a float, you must give the element a
    > > width, otherwise it will fill the full width of its container

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


    In that case, Mac IE 5.2 is not following the 2.0 spec in this matter.
    It shrinks floats to width without need for explicit author set width.

    Mac folk might care to test on other versions of 5:

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

    --
    dorayme
    dorayme, Aug 16, 2008
    #19
  20. Stevo

    dorayme Guest

    Re: need to pre-fill a div with a fixed size spacer, what's the best way?

    In article <g85op5$dma$00$-online.com>, Stevo <>
    wrote:

    > Chris F.A. Johnson wrote:
    > > On 2008-08-15, Stevo wrote:
    > >> dorayme wrote:
    > >>> 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?
    > >> Thanks. That is extremely useful. I knew of the existence of the float
    > >> property, but thought it was purely a positional thing.

    > >
    > > 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.
    > >
    > >> I didn't realize
    > >> it would have the effect of stopping the DIV from taking it's width from
    > >> it's parent container.

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


    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.

    --
    dorayme
    dorayme, Aug 16, 2008
    #20
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. moondaddy
    Replies:
    1
    Views:
    561
    moondaddy
    Apr 2, 2004
  2. Pietje puk
    Replies:
    0
    Views:
    380
    Pietje puk
    Nov 16, 2004
  3. Showjumper
    Replies:
    5
    Views:
    323
    Showjumper
    Mar 21, 2005
  4. Paul Watt

    Annoying problem with spacer

    Paul Watt, Oct 4, 2005, in forum: HTML
    Replies:
    20
    Views:
    930
    Matt Probert
    Oct 5, 2005
  5. ©®
    Replies:
    0
    Views:
    354
Loading...

Share This Page