Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Sep 2002
    Location
    Burlington, VT
    Posts
    125
    Thanks
    0
    Thanked 0 Times in 0 Posts

    minimum width for div

    I feel like i'm swamping this board with questions... I really am trying to figure them out myself I promise, I (literally) haven't moved for 7 hours ...

    today's questions is about minimum width in a div.

    I have 3 images in a row inside a div, which provides a border for the page. I need to make it so that when the page is resized the div stops contracting before the images overlap and makes the image go down a line.

    In explorer that can be done with a spacer image... but in Mozilla and Opera the spacer image doesn't stop the div from contracting.

    I couldn't find another way to do it.

    -Doug

    P.S. I might mention also that I need the div to use percentages, so I can't just specify a hard width via pixels... not that easy
    "The focused mind can pierce through stone."
    - Japanese Maxim

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Not really. You can find 'minwidth' and 'maxwidth' in the specs but it's not supported yet.
    A trick would be to make one large image and maybe slice it horizontally 'to make it load faster', but that would be the same as giving the div an absolute width and make the page less flexible.
    Two links to get you through the weekend:
    In case you're going to specify absolute widths http://www.tantek.com/CSS/Examples/boxmodelhack.html
    Boxes: http://www.thenoodleincident.com/tutorials/box_lesson/

  • #3
    Regular Coder
    Join Date
    Sep 2002
    Location
    Bulgaria
    Posts
    123
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,
    What if You put all Your images in a table cell with nowrap attribute? The table itself will be contained by the DIV. This should stop the DIV from contracting more than needed...

    Alex

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just an idea, maybe it's worth to experiment with. Setting relative sizes on images?
    This works in IE, Moz and Opera on Mac.

    <html>
    <head>
    <title>Untitled</title>
    <style type="text/css">
    <!--
    div {
    width:70%;
    }
    img {
    float:left;
    width:49%;
    border:0px;
    margin:0px;
    }
    br {
    clear:both;
    }
    -->
    </style>
    </head>
    <body>
    <div>
    <img src="" />
    <img src="" /><br />
    </div>
    </body>
    </html>

  • #5
    Regular Coder
    Join Date
    Sep 2002
    Location
    Burlington, VT
    Posts
    125
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ah! I have wasted way too much time trying to recreate my old site using validating code and no tables... it was a really good learning experience but one thing I realized is that you can't look at webpages the same way as you used to when you're designing with standards in mind.
    A lot of good pages online say stuff like "the web is not print, and it's not screen, so don't try to design with pixel precision"

    So i'm giving up my quest to recreate my old page to the "t", and instead i'm using a set width box model using the hacks found here:
    http://www.thenoodleincident.com/tut...son/index.html

    It is not as flexible as my old design, but it does what I want and still looks good... so that's how it will be. Still i'm a little perterbed that I wasn't able to recreate a fairly simple design with the help of many tutorials, and great input from everyone here.

    -Doug
    "The focused mind can pierce through stone."
    - Japanese Maxim

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Netherlands
    Posts
    217
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by MCookie
    Not really. You can find 'minwidth' and 'maxwidth' in the specs but it's not supported yet.
    http://www.xs4all.nl/~ppk/css2tests/width.html


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •