#1
  1. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2002
    Location
    Queensland, Australia
    Posts
    827
    Rep Power
    142

    CSS fill remaining width of a screen


    Well, I'm finding that using <DIV> with CSS for layout purposes is far more complex then using <TABLE>

    How do I make an element, such as <SPAN>, fill the remaining width of a screen using CSS?

    For example, let's say I have an images and a single line of text enclosed by <DIV>, I want to place a <SPAN> on the right of the the text (also within the DIV) and have it stretch to the right side of the screen.

    Is this possible? It would be simple using tables.
    Ooh, they have the Internet on computers now!
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2002
    Location
    Canberra, Australia
    Posts
    348
    Rep Power
    13
    you could use

    width: 100%;
    text-align: left;

    That may work. I haven't tested it, should work with IE but the rest ???
  4. #3
  5. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2002
    Location
    Queensland, Australia
    Posts
    827
    Rep Power
    142
    Unfortunately the width attribute is calculated on the width of your screen. So if your browser window is 800 pixels wide then "width" will return 800. If you put this element beside something like I want to it will either wrap to the next line or increase the width of your page beyond the width of the window.
  6. #4
  7. Senior Polecat
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Location
    Jersey (the original version)
    Posts
    210
    Rep Power
    12
    i had the very same problem.

    my solution was to create the spav at 100% width - 0px from the top and the left and then use the margin attribute (or it might have been clipping) to force the text over to the right. Then i put my lefthand vertical div over the top of the main span.

    It's a lame way of doing it but it worked for me.

    Of course what you really want is some kind of alternative size system similar to * in framesets but i don't see this being implemented until the next release of CSS

    Icy
    Quidquid latine dictum sit, altum viditur.

    http://www.XSet.co.uk
  8. #5
  9. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    remember you can't normaly set width to a span. its for inline style-
    though browsers like ie let you set width to it, others like mozilla will not,

    you could use display:block in the span and then set a width.
    but then again you could just as well have used a div tag.
  10. #6
  11. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2002
    Location
    Queensland, Australia
    Posts
    827
    Rep Power
    142
    The problem with setting the width is that I don't know how wide the screen is and the content on the left may change width from browser to browser.

    icy_polecat looks to have the best option.

    It's surprising that something this trivial wasn't implemented into the current version of CSS.
  12. #7
  13. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    i'm not completely
    getting your problem
    so if you phrase it a bit better, i might be albe to help,

    why do you want the span to fill the whole width? just to have another background color, or?
  14. #8
  15. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2002
    Location
    Queensland, Australia
    Posts
    827
    Rep Power
    142
    I've attached a picture which shows how I'm using it.

    You will see that between the pale green and the dark green area's there is a black line (border-bottom). But the line stops after the "PELM Enquiries" link. I need it to continue to all the way across.

    The pale green area is dfined by a DIV which enloses a series of SPAN tags and the links that have Border-Bottom set. The dark green is defined by another DIV. I've done it this way as I don't want a border below the link for the current page, in this case "About PELM".

    I was hoping I could simply put in a SPAN after PELM Enquiries to fill this gap with a black line.

    Perhaps there is an easier way to do this?
    Ooh, they have the Internet on computers now!
  16. #9
  17. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2002
    Location
    Queensland, Australia
    Posts
    827
    Rep Power
    142
    My attachment doesn't appear to have attached. I'll try again.
    Attached Images
    Ooh, they have the Internet on computers now!

IMN logo majestic logo threadwatch logo seochat tools logo