Force DIVs to NOT wrap if they don't fit browser width?

Discussion in 'HTML' started by Noozer, Jan 11, 2005.

  1. Noozer

    Noozer Guest

    I've placed a small example at:

    http://members.shaw.ca/mystuff/test.htm

    Code is also pasted below...

    When the browser is not wide enough to fit all the DIV's the rightmost DIV
    wraps below the first DIV. I've tried using the "white-space: nowrap"
    directive in the main DIV's styling as well as in the BODY's styling with no
    effect. The same thing happens when these DIV's are not contained within
    another DIV. I've also investigated the "overflow" directive with little
    success.

    I assume that "white-space" affects only inline content and not block
    content.

    Is there any way to ensure that my DIV's don't move down below each other if
    the browser is not wide enough (short of stuffing it all into a table)?

    (PS Also noticed that IE doesn't apply the padding to the right side of the
    "Maingroup" DIV. Firefox applies the padding, but the background colour does
    not apply to all of the background of the "Maingroup" DIV. Firefox also does
    not wrap the rightmost DIV the same as IE does when it doesn't fit into the
    browser.)

    Thx

    <html>
    <head>
    </head>
    <body>
    <div id="Maingroup" style="float: left; white-space: nowrap; border: 1px
    black solid; padding: 4px;"
    <span class="SectionHead" style="display: block; padding: 2px;
    background-color:#888;">This Group</span>
    <div id="Group1" style="background-color:#F00; float: left;">
    <p>Some stuff here</p>
    <p>More stuff</p>
    </div>
    <div id="Group2" style="background-color:#0F0; float: left;
    clear:right;">
    More stuff here
    </div>
    <div id="Group3" style="background-color:#00F; float: left; white-space:
    nowrap;">
    Even more stuff
    </div>
    <span class="SectionFoot" style="display: block; clear:both;"> --- The
    End --- </span>
    <div>
    </body>
    </html>
     
    Noozer, Jan 11, 2005
    #1
    1. Advertisements

  2. Noozer

    Spartanicus Guest

    Correct (+ inline-table and inline-tables).
    css tables (not supported by IE), or using percentages for the widths.
     
    Spartanicus, Jan 11, 2005
    #2
    1. Advertisements

  3. Noozer

    Spartanicus Guest

    Should read Correct (+ inline-blocks and inline-tables).
     
    Spartanicus, Jan 11, 2005
    #3
  4. Noozer

    Noozer Guest

    Tried to define the main DIV as "display: inline-block" but still made no
    difference.

    <div id="Maingroup" style="display: inline-block; white-space: nowrap;
    border: 1px black solid; padding: 4px;"


    I don't have a server to put my ASP code onto, but I've uploaded the results
    to webspace at:
    http://members.shaw.ca/mystuff/sample.htm
    CSS is at
    http://members.shaw.ca/mystuff/default.css

    When your browser is not wide enough I want the Category DIV's to go off the
    right side of the screen, not wrap below the previous Category DIVs.

    ....or am I missing something?
     
    Noozer, Jan 11, 2005
    #4
  5. Noozer

    Noozer Guest

    I don't have a server to put my ASP code onto, but I've uploaded the
    results
    BTW... any general comments on the code would be welcome.

    ....and finally, what DOCTYPE should someone be using when creating new HTML
    code?

    I assume that...
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    ....should be what I use for new pages.
     
    Noozer, Jan 11, 2005
    #5
  6. Noozer

    Spartanicus Guest

    inline-block has limited support. Should work in Opera 7+, and it can be
    made to work in IE5+.
    Css tables are probably the right tool to use, alas not supported by IE,
    no proper alternative exists.
     
    Spartanicus, Jan 11, 2005
    #6
  7. Noozer

    Mark Parnell Guest

    In general that is best, yes.
     
    Mark Parnell, Jan 11, 2005
    #7
  8. Noozer

    Mark Parnell Guest

    None of that wraps here in Moz 1.7.5 or IE6. The URL in your OP does
    though.
    Generally horizontal scrolling is considered a *bad* thing. Having them
    wrap is IMHO the correct behaviour.
     
    Mark Parnell, Jan 11, 2005
    #8
  9. Noozer

    Noozer Guest

    Just checked it here in IE6 and the DIV's do move down if they do not fit.
    But not the expected or desired behavior.

    The data is formatted in rows for a reason. To wrap to another row defeats
    part of the purpose for this page.

    There will be many more rows added to the page, this was just a sample
    output used for demonstration.
     
    Noozer, Jan 12, 2005
    #9
  10. Noozer

    Mark Parnell Guest

    That sounds like tabular data to me. Use a table.
     
    Mark Parnell, Jan 12, 2005
    #10
  11. Noozer

    Noozer Guest

    <rant>
    Why the hell can't I style a DIV *NOT* to wrap it's content?
    Why can't I get DIV's to align side by side without floating them?
    Why does FLOAT refer the viewport and not the container? (ie, A DIV floated
    within a DIV should be floated in refernce to the parent DIV)
    CSS is such a retarded "language"... did those who invented it have ANY
    layout experience at all???
    </rant>

    This isn't tabular data, but it looks like I'm going to have to get stuck
    into a static layout and stuff my content into tables to obtain the results
    I need.

    My viewport is 300 pixels wide. DIV #1 contains three other DIV's (1a, 1b
    and 1c). Each of these DIVs is 150 pixels wide. Why can't I layout this page
    so that DIV #1c doesn't wrap below DIV #1a?
     
    Noozer, Jan 16, 2005
    #11
  12. Noozer

    Toby Inkster Guest

    You can.

    kind regards,
     
    Toby Inkster, Jan 16, 2005
    #12
  13. Noozer

    Uncle Pirate Guest

    Why can't you? Because you haven't studied up on HOW to? Most of the
    things you are attempting to do can be easily done. Read the specs,
    browse through the properties/attributes and you'll find out how if you
    are serious about learning how. Otherwise, you can just rant and not
    get "questions" answered.
    No need for tables, just a bit of knowledge.
    It sounds as if you are not allowing space for borders. Two divs 150 px
    wide will not fit within a div 300 px wide. Add a bit of width to your
    outside div to allow for border width and/or make sure your borders on
    the inside divs are set to 0 and there is 0 padding on the external div.
    Better yet, if you are displaying images inside the inner divs, toss
    the divs and just apply the float and whatever attributes you wish to
    the img. If you aren't using img inside, then why are you setting px
    widths? If it's text, it's better to use % or em.

    --
    Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
    Webmaster/Computer Center Manager, NMSU at Alamogordo
    Cooordinator, Tularosa Basin Chapter, ABATE of NM; AMA#758681; COBB
    '94 1500 Vulcan (now wrecked) :( http://motorcyclefun.org/Dcp_2068c.jpg
    A zest for living must include a willingness to die. - R.A. Heinlein
     
    Uncle Pirate, Jan 16, 2005
    #13
  14. Noozer

    Duende Guest

    While sitting in a puddle Uncle Pirate scribbled in the mud:
    So where do I set my pizza & beer?
     
    Duende, Jan 16, 2005
    #14
  15. Noozer

    Uncle Pirate Guest

    In your lap. I carry stuff (pizza, beer, etc) around in my lap all the
    time while sitting in my wheelchair. :)

    --
    Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
    Webmaster/Computer Center Manager, NMSU at Alamogordo
    Cooordinator, Tularosa Basin Chapter, ABATE of NM; AMA#758681; COBB
    '94 1500 Vulcan (now wrecked) :( http://motorcyclefun.org/Dcp_2068c.jpg
    A zest for living must include a willingness to die. - R.A. Heinlein
     
    Uncle Pirate, Jan 16, 2005
    #15
  16. Noozer

    Noozer Guest

    I've tried several times. The answers I've recieved here before state that
    it wasn't possible.

    Please see my sample at http://members.shaw.ca/mystuff/sample.htm

    Click the checkboxes to make the sections visible... If your browser is too
    narrow the Category DIV's wrap down below each other instead of disappearing
    off the right side of the browser.

    As broken as it is, my target browser is IE.
     
    Noozer, Jan 16, 2005
    #16
  17. Noozer

    Wÿrm Guest

    Wÿrm, Jan 16, 2005
    #17
  18. Noozer

    Noozer Guest

    I've tried several times. The answers I've recieved here before state
    that
    Dynamically generated so content may end up wider than I specify. I did try
    to specify widths and it did not help.

    I appreciate any help I can get on this... My brain hurts.

    : )
     
    Noozer, Jan 16, 2005
    #18
  19. Noozer

    Noozer Guest

    That does what I'm looking for... so now I know that I'm just doing
    something stupid. Going to figure out what I'm doing wrong no matter how
    long it takes.

    One question... Does it matter if I specify width in EMs or PXs? (I prefer
    EMs so the DIV scales with font size changes).

    Thx
     
    Noozer, Jan 16, 2005
    #19
  20. Noozer

    Duende Guest

    While sitting in a puddle Uncle Pirate scribbled in the mud:
    Ya but you're a para, I'm just a quad.
     
    Duende, Jan 16, 2005
    #20
    1. Advertisements

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 (here). After that, you can post your question and our members will help you out.