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

  2. Noozer

    Spartanicus Guest

    "Noozer" <> wrote:

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


    Correct (+ inline-table and inline-tables).

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


    css tables (not supported by IE), or using percentages for the widths.

    --
    Spartanicus
     
    Spartanicus, Jan 11, 2005
    #2
    1. Advertising

  3. Noozer

    Spartanicus Guest

    Spartanicus <> wrote:

    >Correct (+ inline-table and inline-tables).


    Should read Correct (+ inline-blocks and inline-tables).

    --
    Spartanicus
     
    Spartanicus, Jan 11, 2005
    #3
  4. Noozer

    Noozer Guest

    "Spartanicus" <> wrote in message
    news:...
    > Spartanicus <> wrote:
    >
    > >Correct (+ inline-table and inline-tables).

    >
    > Should read Correct (+ inline-blocks and inline-tables).


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


    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

    "Noozer" <> wrote:

    >> >Correct (+ inline-table and inline-tables).

    >>
    >> Should read Correct (+ inline-blocks and inline-tables).

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


    inline-block has limited support. Should work in Opera 7+, and it can be
    made to work in IE5+.

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


    Css tables are probably the right tool to use, alas not supported by IE,
    no proper alternative exists.

    --
    Spartanicus
     
    Spartanicus, Jan 11, 2005
    #6
  7. Noozer

    Mark Parnell Guest

    Previously in alt.html, Noozer <> said:

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


    In general that is best, yes.

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
     
    Mark Parnell, Jan 11, 2005
    #7
  8. Noozer

    Mark Parnell Guest

    Previously in alt.html, Noozer <> said:

    > http://members.shaw.ca/mystuff/sample.htm


    None of that wraps here in Moz 1.7.5 or IE6. The URL in your OP does
    though.

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


    Generally horizontal scrolling is considered a *bad* thing. Having them
    wrap is IMHO the correct behaviour.

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
     
    Mark Parnell, Jan 11, 2005
    #8
  9. Noozer

    Noozer Guest

    "Mark Parnell" <> wrote in message
    news:lvjc7ic6hh0e$.rr172wne43m2$...
    > Previously in alt.html, Noozer <> said:
    >
    > > http://members.shaw.ca/mystuff/sample.htm

    >
    > None of that wraps here in Moz 1.7.5 or IE6. The URL in your OP does
    > though.


    Just checked it here in IE6 and the DIV's do move down if they do not fit.

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

    >
    > Generally horizontal scrolling is considered a *bad* thing. Having them
    > wrap is IMHO the correct behaviour.


    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

    Previously in alt.html, Noozer <> said:

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


    That sounds like tabular data to me. Use a table.

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
     
    Mark Parnell, Jan 12, 2005
    #10
  11. Noozer

    Noozer Guest

    "Mark Parnell" <> wrote in message
    news:78aajraykcdv$...
    > Previously in alt.html, Noozer <> said:
    >
    > > The data is formatted in rows for a reason. To wrap to another row

    defeats
    > > part of the purpose for this page.

    >
    > That sounds like tabular data to me. Use a table.


    <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

    Noozer wrote:

    > Why can't I get DIV's to align side by side without floating them?


    You can.

    kind regards,

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Jan 16, 2005
    #12
  13. Noozer

    Uncle Pirate Guest

    Noozer wrote:

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


    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.

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


    No need for tables, just a bit of knowledge.

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


    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:

    > No need for tables,


    So where do I set my pizza & beer?

    --
    D?
    http://wipkip.biz just to raise my PR
     
    Duende, Jan 16, 2005
    #14
  15. Noozer

    Uncle Pirate Guest

    Duende wrote:

    > While sitting in a puddle Uncle Pirate scribbled in the mud:
    >
    >
    >>No need for tables,

    >
    >
    > So where do I set my pizza & beer?
    >


    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

    "Toby Inkster" <> wrote in message
    news:p...
    > Noozer wrote:
    >
    > > Why can't I get DIV's to align side by side without floating them?

    >
    > You can.


    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
    > > it wasn't possible.

    >
    > http://www.kolumbus.fi/ace/ng/few_divs.html try that...
    >
    >
    > > Please see my sample at http://members.shaw.ca/mystuff/sample.htm

    >
    > Define WIDTH for grp1, grp2 and grp3 ?


    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

    "Wÿrm" <> wrote in message
    news:cseotg$dj2$...
    >
    > "Noozer" <> wrote in message
    > news:OnBGd.93661$8l.46265@pd7tw1no...
    >
    > <snip>
    >
    > > I've tried several times. The answers I've recieved here before state

    that
    > > it wasn't possible.

    >
    > http://www.kolumbus.fi/ace/ng/few_divs.html try that...


    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:

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


    Ya but you're a para, I'm just a quad.

    --
    D?
    http://wipkip.biz just to raise my PR
     
    Duende, Jan 16, 2005
    #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. Piet
    Replies:
    0
    Views:
    578
  2. Snef
    Replies:
    18
    Views:
    1,018
  3. CRON
    Replies:
    10
    Views:
    21,083
  4. Dan English

    GridView columns don't respect width or wrap properties!

    Dan English, Jul 6, 2006, in forum: ASP .Net Web Controls
    Replies:
    1
    Views:
    255
    Akash Deep
    Jul 14, 2006
  5. maya
    Replies:
    4
    Views:
    253
Loading...

Share This Page