Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   Force DIVs to NOT wrap if they don't fit browser width? (http://www.velocityreviews.com/forums/t160571-force-divs-to-not-wrap-if-they-dont-fit-browser-width.html)

Noozer 01-11-2005 03:44 PM

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>




Spartanicus 01-11-2005 04:58 PM

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

Spartanicus 01-11-2005 05:12 PM

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

Noozer 01-11-2005 06:59 PM

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?



Noozer 01-11-2005 07:08 PM

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.



Spartanicus 01-11-2005 07:50 PM

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

Mark Parnell 01-11-2005 09:44 PM

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

Mark Parnell 01-11-2005 09:46 PM

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

Noozer 01-12-2005 03:59 AM

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.



Mark Parnell 01-12-2005 04:01 AM

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 01:06 AM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.