Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Force DIVs to NOT wrap if they don't fit browser width?

Reply
Thread Tools

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

 
 
Noozer
Guest
Posts: n/a
 
      01-11-2005
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>



 
Reply With Quote
 
 
 
 
Spartanicus
Guest
Posts: n/a
 
      01-11-2005
"Noozer" <(E-Mail Removed)> 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
 
Reply With Quote
 
 
 
 
Spartanicus
Guest
Posts: n/a
 
      01-11-2005
Spartanicus <(E-Mail Removed)> wrote:

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


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

--
Spartanicus
 
Reply With Quote
 
Noozer
Guest
Posts: n/a
 
      01-11-2005

"Spartanicus" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed) anicus.utvinternet.ie...
> Spartanicus <(E-Mail Removed)> 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?


 
Reply With Quote
 
Noozer
Guest
Posts: n/a
 
      01-11-2005
> 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.


 
Reply With Quote
 
Spartanicus
Guest
Posts: n/a
 
      01-11-2005
"Noozer" <(E-Mail Removed)> 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
 
Reply With Quote
 
Mark Parnell
Guest
Posts: n/a
 
      01-11-2005
Previously in alt.html, Noozer <(E-Mail Removed)> 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
 
Reply With Quote
 
Mark Parnell
Guest
Posts: n/a
 
      01-11-2005
Previously in alt.html, Noozer <(E-Mail Removed)> 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
 
Reply With Quote
 
Noozer
Guest
Posts: n/a
 
      01-12-2005

"Mark Parnell" <(E-Mail Removed)> wrote in message
news:lvjc7ic6hh0e$.rr172wne43m2$.mark@markparnell. com.au...
> Previously in alt.html, Noozer <(E-Mail Removed)> 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.


 
Reply With Quote
 
Mark Parnell
Guest
Posts: n/a
 
      01-12-2005
Previously in alt.html, Noozer <(E-Mail Removed)> 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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Centering and scaling divs to fit any browser tcarone07 General Computer Support 0 02-06-2009 07:36 AM
Nike air force one, air force 1, air force one low cut, air force one abdul_razak@indiatimes.com Digital Photography 2 12-31-2008 04:29 PM
Nike Air Force Ones,Air Force One Air Force One-1 lky52193@gmail.com Computer Support 0 01-17-2008 04:40 PM
Nike Air Force Ones,Air Force One Air Force One-1,25th anniversary lky52112@gmail.com Digital Photography 0 01-15-2008 04:46 PM
Nike Air Force Ones,Air Force One Air Force One-1,25th anniversary lky52112@gmail.com Digital Photography 0 01-15-2008 04:34 PM



Advertisments