|
Force DIVs to NOT wrap if they don't fit browser width?
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> |
Re: Force DIVs to NOT wrap if they don't fit browser width?
"Noozer" <dont.spam@me.here> 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 |
Re: Force DIVs to NOT wrap if they don't fit browser width?
Spartanicus <me@privacy.net> wrote:
>Correct (+ inline-table and inline-tables). Should read Correct (+ inline-blocks and inline-tables). -- Spartanicus |
Re: Force DIVs to NOT wrap if they don't fit browser width?
"Spartanicus" <me@privacy.net> wrote in message news:3628u090l5evhodlr9397ovvo325nh9hnl@news.spart anicus.utvinternet.ie... > Spartanicus <me@privacy.net> 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? |
Re: Force DIVs to NOT wrap if they don't fit browser width?
> 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. |
Re: Force DIVs to NOT wrap if they don't fit browser width?
"Noozer" <dont.spam@me.here> 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 |
Re: Force DIVs to NOT wrap if they don't fit browser width?
Previously in alt.html, Noozer <dont.spam@me.here> 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 |
Re: Force DIVs to NOT wrap if they don't fit browser width?
Previously in alt.html, Noozer <dont.spam@me.here> 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 |
Re: Force DIVs to NOT wrap if they don't fit browser width?
"Mark Parnell" <webmaster@clarkecomputers.com.au> wrote in message news:lvjc7ic6hh0e$.rr172wne43m2$.mark@markparnell. com.au... > Previously in alt.html, Noozer <dont.spam@me.here> 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. |
Re: Force DIVs to NOT wrap if they don't fit browser width?
Previously in alt.html, Noozer <dontspam@me.here> 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 |
| All times are GMT. The time now is 08:11 AM. |
Powered by vBulletin®. Copyright ©2000 - 2013, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.