Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Keeping Floats from Wrapping

Reply
Thread Tools

Keeping Floats from Wrapping

 
 
Phonedude
Guest
Posts: n/a
 
      07-29-2008
I have converted my volunteered website -- http://www.mclriverview.org --
from table layout to divs and lists using floats for layout. It works fine
in fullscreen, but as soon as you unmaximize the screen the items start
wrapping, getting worse and worse as you squeeze the horizontal dimension.

Is there any way to force a horizontal scrollbar on the browser so that the
page is still displayed properly?

Or any way to prevent the wrap? I have Googled and Googled, but I can't
find any good answers. (A good answer is one I understand, one that makes
sense, and, ultimately, one that works.)

Thanks,

Larry


 
Reply With Quote
 
 
 
 
Nik Coughlin
Guest
Posts: n/a
 
      07-29-2008
"Phonedude" <(E-Mail Removed)> wrote in message
news:g6lo75$uu1$(E-Mail Removed)...
>I have converted my volunteered website -- http://www.mclriverview.org --
>from table layout to divs and lists using floats for layout. It works fine
>in fullscreen, but as soon as you unmaximize the screen the items start
>wrapping, getting worse and worse as you squeeze the horizontal dimension.
>
> Is there any way to force a horizontal scrollbar on the browser so that
> the page is still displayed properly?
>
> Or any way to prevent the wrap? I have Googled and Googled, but I can't
> find any good answers. (A good answer is one I understand, one that makes
> sense, and, ultimately, one that works.)


min-width + Google for IE6 workaround

 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      07-29-2008
In article <g6lo75$uu1$(E-Mail Removed)>, "Phonedude" <(E-Mail Removed)>
wrote:

> I have converted my volunteered website -- http://www.mclriverview.org --
> from table layout to divs and lists using floats for layout. It works fine
> in fullscreen, but as soon as you unmaximize the screen the items start
> wrapping, getting worse and worse as you squeeze the horizontal dimension.
>
> Is there any way to force a horizontal scrollbar on the browser so that the
> page is still displayed properly?
>
> Or any way to prevent the wrap? I have Googled and Googled, but I can't
> find any good answers. (A good answer is one I understand, one that makes
> sense, and, ultimately, one that works.)
>


Perhaps you are fiddling with your mark up at the moment? But surely
this is not what you want, here are two screenshots:

<http://dorayme.890m.com/alt/justPics/marinecorpnarrow.png>

<http://dorayme.890m.com/alt/justPics/marinecorpswide.png>

(the latter taking up most of a high res 20" monitor).

--
dorayme
 
Reply With Quote
 
Phonedude
Guest
Posts: n/a
 
      07-29-2008

"dorayme" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> In article <g6lo75$uu1$(E-Mail Removed)>, "Phonedude" <(E-Mail Removed)>
> wrote:
>
>> I have converted my volunteered website -- http://www.mclriverview.org --
>> from table layout to divs and lists using floats for layout. It works
>> fine
>> in fullscreen, but as soon as you unmaximize the screen the items start
>> wrapping, getting worse and worse as you squeeze the horizontal
>> dimension.
>>
>> Is there any way to force a horizontal scrollbar on the browser so that
>> the
>> page is still displayed properly?
>>
>> Or any way to prevent the wrap? I have Googled and Googled, but I can't
>> find any good answers. (A good answer is one I understand, one that makes
>> sense, and, ultimately, one that works.)
>>

>
> Perhaps you are fiddling with your mark up at the moment? But surely
> this is not what you want, here are two screenshots:
>
> <http://dorayme.890m.com/alt/justPics/marinecorpnarrow.png>
>
> <http://dorayme.890m.com/alt/justPics/marinecorpswide.png>
>
> (the latter taking up most of a high res 20" monitor).
>
> --
> dorayme]


Yes -- you caught me fiddling. I "solved" the wrap problem by simply using
a wrapper div with a set width large enough to hold the page. On larger
clients, yours for example, it will be over on the left side, but should
still be quite usable. I found the work around, and actually uinderstood
it, but could not make the conditional expression work -- and I don't
understand why not. It simply set the width to 980px if the client width
got smaller than that and used "auto" if it were larger. I must have had a
typo or something, but I checked and rechecked and rechecked and simply
could not figure it out. Finally gave up and just set a width. This will
be revisited at some time.

What you caught me doing was redoing my style sheet. I thought it was ok,
but when I put it up on the server and looked at it I saw the results you
posted. I had to go find the problem and correct it. I didn't know you
could put a * { } at the top of your sheet and put all the repetitive stuff
in it, so I took some time and cleaned the sheet up.

It is ok now, I think. Anyone who wants to have a look at
http://www.mclriverview.org should feel free to provide me feedback. I
could use the help and don't mind if you make extraneous comments as well.
Even snideness is tolerated. All comments about layout, style, artistic
merit (if any), technical nits, and such are certainly welcome.

I volunteered to create and administer this site because I am a member of
the league and want to help, but I also want to learn new skills and get up
to date on HTML. I have been programming in various languages since 1972,
but never professionally. I am thinking that building and managing basic
websites might be a hobby that provides a little income on the side and
maybe grow into something beyond a hobby. (Comments about this thought are
welcome as well.)

Larry


 
Reply With Quote
 
Chris F.A. Johnson
Guest
Posts: n/a
 
      07-29-2008
On 2008-07-29, Phonedude wrote:
> I have converted my volunteered website -- http://www.mclriverview.org --
> from table layout to divs and lists using floats for layout. It works fine
> in fullscreen, but as soon as you unmaximize the screen the items start
> wrapping, getting worse and worse as you squeeze the horizontal dimension.


It doesn't work, even on a wide screen:
<http://cfaj.freeshell.org/testing/mclriver.jpg>

> Is there any way to force a horizontal scrollbar on the browser so that the
> page is still displayed properly?
>
> Or any way to prevent the wrap? I have Googled and Googled, but I can't
> find any good answers. (A good answer is one I understand, one that makes
> sense, and, ultimately, one that works.)



--
Chris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
 
Reply With Quote
 
Phonedude
Guest
Posts: n/a
 
      07-29-2008

"Chris F.A. Johnson" <(E-Mail Removed)> wrote in message
news:a84b1$488f7663$cef88ba3$(E-Mail Removed)...
> On 2008-07-29, Phonedude wrote:
>> I have converted my volunteered website -- http://www.mclriverview.org --
>> from table layout to divs and lists using floats for layout. It works
>> fine
>> in fullscreen, but as soon as you unmaximize the screen the items start
>> wrapping, getting worse and worse as you squeeze the horizontal
>> dimension.

>
> It doesn't work, even on a wide screen:
> <http://cfaj.freeshell.org/testing/mclriver.jpg>

[snip]

Wow. That's pretty messed up. What browser is that? Clearly I need to
figure out what's going on there. It looks fine on IE6 at a screen setting
of 1024 wide. The wrapper div is 980 px wide. I wonder if there's a site
that will show how a page looks on different browsers or if I have to
download them all for verifying my work.

Thanks for pointing that out.

Larry


 
Reply With Quote
 
Phonedude
Guest
Posts: n/a
 
      07-29-2008

"Phonedude" <(E-Mail Removed)> wrote in message
news:g6o0jh$lea$(E-Mail Removed)...
>
> "Chris F.A. Johnson" <(E-Mail Removed)> wrote in message
> news:a84b1$488f7663$cef88ba3$(E-Mail Removed)...
>> On 2008-07-29, Phonedude wrote:
>>> I have converted my volunteered website --
>>> http://www.mclriverview.org --
>>> from table layout to divs and lists using floats for layout. It works
>>> fine
>>> in fullscreen, but as soon as you unmaximize the screen the items start
>>> wrapping, getting worse and worse as you squeeze the horizontal
>>> dimension.

>>
>> It doesn't work, even on a wide screen:
>> <http://cfaj.freeshell.org/testing/mclriver.jpg>

> [snip]
>
> Wow. That's pretty messed up. What browser is that? Clearly I need to
> figure out what's going on there. It looks fine on IE6 at a screen
> setting of 1024 wide. The wrapper div is 980 px wide. I wonder if
> there's a site that will show how a page looks on different browsers or if
> I have to download them all for verifying my work.
>
> Thanks for pointing that out.


Nevermind -- I downloaded Firefox and see the problem just as in your jpg.
All I need to do now is figure out what's up with the style sheet and html.
Any hints?

Larry


 
Reply With Quote
 
Ari Heino
Guest
Posts: n/a
 
      07-29-2008
> All I need to do now is figure out what's up with the style sheet and html.
> Any hints?


Frankly I'd start from scratch. IMHO the page looks quite awful. Too
much colors, borders, hr's, tables and pictures you could replace with
text and the background image is not working either. Less is more.
In css, * { margin: 0; } etc. is also a bad idea. Sure you get some
unwanted mrgins set to zero but lose also many needed margins.

--
Ari
 
Reply With Quote
 
Nik Coughlin
Guest
Posts: n/a
 
      07-29-2008
"Phonedude" <(E-Mail Removed)> wrote in message
news:g6o0jh$lea$(E-Mail Removed)...
> I wonder if there's a site that will show how a page looks on different
> browsers


http://browsershots.org/

 
Reply With Quote
 
Phonedude
Guest
Posts: n/a
 
      07-29-2008

"Ari Heino" <(E-Mail Removed)> wrote in message
news:g6o20v$1u5r$(E-Mail Removed)...
>> All I need to do now is figure out what's up with the style sheet and
>> html. Any hints?

>
> Frankly I'd start from scratch. IMHO the page looks quite awful. Too much
> colors, borders, hr's, tables and pictures you could replace with text and
> the background image is not working either. Less is more.
> In css, * { margin: 0; } etc. is also a bad idea. Sure you get some
> unwanted mrgins set to zero but lose also many needed margins.
>
> --
> Ari


I see the background fine in IE6 and Firefox. If you can't see it will you
tell me what browser you're using please? Or is it that you don't like the
way it repeats?
There's only four colors on the page, not counting the links, the background
and the two seals. Scarlet and gold (yellow) are a given on any page
relating to USMC. And the dark green is reminiscent of the uniforms. The
paler yellow background is quite readible, and I like it.

Your input is appreciated though -- thanks.

Larry


 
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
Designer - How to paste text keeping the wrapping VbCrLf ? teo ASP .Net 2 12-15-2007 06:07 PM
Floats to chars and chars to floats Kosio C Programming 44 09-23-2005 09:49 AM
How to handle floats and avoid NaN mehtakrishna2002@yahoo.com Java 7 09-08-2005 10:12 PM
Problems adding floats Klixx0r Java 5 12-13-2004 07:17 PM
Floats become decimals when read from a resultset. Koen Java 4 10-27-2004 02:09 PM



Advertisments