make a div use maximum width

Discussion in 'HTML' started by Gernot Frisch, Aug 21, 2007.

  1. Hi,
    I want the green piece ("Please be wide") to fill the whole space
    between the red and the blue thingy. How can I do that?

    Thank you in advice,
    -Gernot

    PS: My code is as minimal as possible, I know I should use strict-html
    and stuff.


    <html>
    <body>
    <div style="width:50%;">
    <!-- left item -->
    <div style="float:left; width:16px; background-color:Red;"></div>

    <!-- center text -->
    <div style="float:left; background-color:green;">Please be wide</div>
    <!-- right item -->
    <div style="float:right; width:16px; background-color:blue;"></div>
    </div>
    </body>
    </html>
    Gernot Frisch, Aug 21, 2007
    #1
    1. Advertising

  2. Gernot Frisch

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Tue, 21 Aug 2007 08:49:07 GMT
    Gernot Frisch scribed:

    >
    > Hi,
    > I want the green piece ("Please be wide") to fill the whole space
    > between the red and the blue thingy. How can I do that?
    >
    > Thank you in advice,
    > -Gernot
    >
    > PS: My code is as minimal as possible, I know I should use strict-html
    > and stuff.
    >
    >
    > <html>
    > <body>
    > <div style="width:50%;">
    > <!-- left item -->
    > <div style="float:left; width:16px; background-color:Red;"></div>
    >
    > <!-- center text -->
    > <div style="float:left; background-color:green;">Please be wide</div>
    > <!-- right item -->
    > <div style="float:right; width:16px; background-color:blue;"></div>
    > </div>
    > </body>
    > </html>


    Put a &nbsp; after <div style="width:50%;">

    --
    Neredbojias
    Half lies are worth twice as much as whole lies.
    Neredbojias, Aug 21, 2007
    #2
    1. Advertising


  3. >
    > Put a &nbsp; after <div style="width:50%;">


    No. Neither in IE6, nor in FF.
    Gernot Frisch, Aug 21, 2007
    #3
  4. Gernot Frisch

    Martin Jay Guest

    On Tue, 21 Aug 2007 10:49:07 +0200, "Gernot Frisch" <>
    wrote:
    >I want the green piece ("Please be wide") to fill the whole space
    >between the red and the blue thingy. How can I do that?


    This is because the centre DIV isn't given a width.

    ><html>
    ><body>
    ><div style="width:50%;">
    > <!-- left item -->
    > <div style="float:left; width:16px; background-color:Red;"></div>
    >
    > <!-- center text -->
    > <div style="float:left; background-color:green;">Please be wide</div>
    > <!-- right item -->
    > <div style="float:right; width:16px; background-color:blue;"></div>
    ></div>
    ></body>
    ></html>


    One solution may be to wrap the left, centre and right DIVs into an
    additional DIV, and give that a green background colour:

    <html>
    <body>
    <div style="width:50%;">

    <div style="background-color: green; float: left;">

    <!-- left item -->
    <div style="float:left; width:16px; background-color:Red;"></div>
    <!-- center text -->
    <div style="float:left; background-color:green;">Please be wide</div>
    <!-- right item -->
    <div style="float:right; width:16px; background-color:blue;"></div>
    </div>

    </div>

    </body>
    </html>
    --
    Martin Jay
    Martin Jay, Aug 22, 2007
    #4

  5. > One solution may be to wrap the left, centre and right DIVs into an
    > additional DIV, and give that a green background colour:


    Perfect! That's the way to do it.
    Gernot Frisch, Aug 22, 2007
    #5
    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. AndrewF
    Replies:
    1
    Views:
    771
    Bruce Barker
    Oct 10, 2005
  2. =?Utf-8?B?cm9kY2hhcg==?=

    how to: div width = browser.width?

    =?Utf-8?B?cm9kY2hhcg==?=, Oct 27, 2006, in forum: ASP .Net
    Replies:
    3
    Views:
    523
    =?Utf-8?B?cm9kY2hhcg==?=
    Oct 30, 2006
  3. Steve Richter
    Replies:
    2
    Views:
    7,912
    Steve Richter
    Jun 15, 2007
  4. tomek milewski
    Replies:
    6
    Views:
    1,306
    tomek milewski
    Jun 25, 2007
  5. phanhuyich
    Replies:
    4
    Views:
    268
Loading...

Share This Page