Keeping Floats from Wrapping

[Phonedude]

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

 

[Nik Coughlin]

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

 

[dorayme]

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

 

[Phonedude]

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

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

 

[Chris F.A. Johnson]

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:

 

[Phonedude]

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

 

[Phonedude]

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

 

[Ari Heino]

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.

 

[Nik Coughlin]

I wonder if there's a site that will show how a page looks on different
browsers

http://browsershots.org/

 

[Phonedude]

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.

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

 

[Phonedude]

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

Well, I got Firefox and IE6 to look pretty much alike. On to the next
hurdle.

Larry

 

[Phonedude]

http://browsershots.org/

A very nice (fantastic!) resource.

Many thanks.

Larry

 

[Chris F.A. Johnson]

....
Well, I got Firefox and IE6 to look pretty much alike. On to the next
hurdle.

Better, but still some problems.

<http://cfaj.freeshell.org/testing/mclriver2.jpg>

 

[Phonedude]

Better, but still some problems.

<http://cfaj.freeshell.org/testing/mclriver2.jpg>


--
Chris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com>
===================================================================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

Pretty bad looking -- what browser please? I used
http://browsershots.org/http://www.mclriverview.org/ to check quite a few
browsers and none had such serious problems as that. Give me a hint
please -- by fixing things I learn to do better and I like that...

Larry

 

[Chris F.A. Johnson]

Pretty bad looking -- what browser please?

It's a matter of font size; the browser is irrelevant.

 

[dorayme]

http://www.mclriverview.org/

[/QUOTE]

input is appreciated

I feel I have been neglecting you, soldier! Let me make up now. I am in
a military mood. <g>

Here are some things that you may find helpful, in no particular order.

<div class="pagewrapper">
<div><br></div>

Don't do this latter line or this sort of thing. Bad drill! If you want
a space above the first real content, put a margin on the element
concerned, namely the very next one. Or, alternatively put a top-padding
on .pagewrapper. Get into the habit of killing two things with one
bullet. It is neater, it goes back to a principle enunciated by an
English Franciscan friar from the 13th Century which basically says that
less is more. It also separates your content from your presentation and
keeps things more manageable for now and the future.

Get rid of the W3C logos before actual publication because, for a start,
few of your visitors will have a clue about their significance. And what
is their significance? If you make any CSS or HTML errors, you run an
unnecessary risk. Modesty is best. And besides, remember, less is more.
In this case you save a complete bullet. Keep that rifle dry for when
you really need it.

Now, I turn to what is possibly just a personal thing of mine, please
ignore it if you feel different. The background is too distracting. The
eye cannot read the text without feeling there are too many soldiers and
flags about. One judiciously placed instance of this famous icon would
be altogether better imo. Plus it would not completely ruin your chances
of a nice discount on a Toyota.

Next, a structural point. Given the information you are displaying, it
is not necessary to force your viewers to use horizontal scroll bars as
many will have to. No one likes using horizontal scroll bars and
especially when it seems unnecessary. What is necessary and unnecessary
in this business? Imagine a table of many cells of information on one
row. Here it is perfectly understandable that sometimes a user with a
narrow browser window should have to scroll sideways. The information
eing on one row means something and it would break the sense of it for
it to fail to be so.

But when you have three boxes of fairly independent bits of information
there is no really good reason for them to be on one line. They might
look nicer on one line. Fine! But they don't look anything if you can't
see them all. So why not consider the aesthetics of the matter to be a
handmaiden to function and usability and float the boxes so that they
wrap if there is not enough width. Best of both worlds, all neat in a
line if there is room. All visible or easily seen (with page down or
scroll down keys and buttons if necessary).

You float three divs with CSS:

div {float: left}

and assign some paddings and margins to suit. Ask if you want examples?

The other thing is this, something you are possibly having trouble with.
If you dimension your boxes in pixels, text can spill out of them if the
text grows because the text can grow bigger than the boxes. So, if you
do not want this to happen (and who does much?), at least give the boxes
widths in em units rather than px. It is generally best not to assign
heights at all but to let the content make the boxes grow height (as
will happen naturally).

 

[dorayme]

... when you have three boxes of fairly independent bits of information
there is no really good reason for them to be on one line. They might
look nicer on one line. Fine! But they don't look anything if you can't
see them all. So why not consider the aesthetics of the matter to be a
handmaiden to function and usability and float the boxes so that they
wrap if there is not enough width. Best of both worlds, all neat in a
line if there is room. All visible or easily seen (with page down or
scroll down keys and buttons if necessary).

You float three divs with CSS:

div {float: left}

and assign some paddings and margins to suit. Ask if you want examples?

I got worried about this of mine and took a closer look and I see you
are floating things. So apologies for not noting this.

But you are actually doing other things to constrain and fix width that
I would recommend you don't do to spoil the wrapping functionality that
is otherwise built into floats.

..pagewrapper{width:980px;min-width:980px;}

and complicated things with your boxes and tables. I cannot look at it
just now. Later maybe.

Don't have that 'leadership' image as header, it is poor quality and
quite unnecessary to be an image considering its straightforward look.
Use simple html text and css:

<h2>LEADERSHIP</h2> styled by something like:

h2 {font-size: 170%; background: red; color: yellow;}

 

[Phonedude]

I got worried about this of mine and took a closer look and I see you
are floating things. So apologies for not noting this.

But you are actually doing other things to constrain and fix width that
I would recommend you don't do to spoil the wrapping functionality that
is otherwise built into floats.

.pagewrapper{width:980px;min-width:980px;}

and complicated things with your boxes and tables. I cannot look at it
just now. Later maybe.

Don't have that 'leadership' image as header, it is poor quality and
quite unnecessary to be an image considering its straightforward look.
Use simple html text and css:

<h2>LEADERSHIP</h2> styled by something like:

h2 {font-size: 170%; background: red; color: yellow;}

Wow! Thanks for this very nice feedback. I appreciate your time and effort
to post these two notes. I had already got rid of the BR at the top of the
pagewrap dive using padding. After I thought about what I was doing I
instinctively did what you suggested before you suggested it. Thanks for
pointing it out though -- I think there's one or two other spots like that I
need to look at.

The strange width - min-width mess is the result of an effort I made to
include a conditional expression which I simply could not make work. I gave
up on it for a bit until I get up the mental strength to try again. A
couple of hours of frustration is all I care to deal with at one sitting.
That will be made better soon. The width is fixed because I am anal and
want my boxes to appear side by side -- all three of them. The page isn't
really that wide at 980px so unless you're using a small window you may have
to scroll. I hear what you're saying, but the website is not intended for
people who normally use multiple windows and almost everyone these days has
a full screen min of 1024. Or am I out in left field? The idea of allowing
those boxes (and the three images at the top) to wrap is one that doesn't
feel right to me -- as I said, it may be a personality fault for me -- but I
understand what you're saying. I will think about that some more.

The background appears to be an issue -- you are the second to bring it up.
I understand what you're saying and will think about how to fix it. By the
way -- those are Marines. Not soldiers.

The three heading images are designed to look like patches, although I see
what you're saying about them. I already have a css style that mimics the
look so I may replace them at some point with simple text.

Thank you again for taking the time and making the effort to provide a
novice with your help. It is really appreciated.

Larry

 

[Phonedude]

It's a matter of font size; the browser is irrelevant.

It must be that em vs px issue that others have warned me about. I will
look into it. Thanks.

Larry

 

[Ari Heino]

Dorayme said many thins with wise word I thought also. I was more brutal
Sorry.

If I were you, I'd center the whole content. Do this by giving the
outmost div a width - be it with pixels like now or with percentages -
and then center it with "margin: 0 auto;" in css.

I feel the same way about the background - if it's just a background
image with no bigger meaning, it has to be really subtle. If that's not
possible, give it the room you think it deserves and then fade it to
back or something. Two examples:
1) http://atheino.googlepages.com/index_en.html (my homepage)
2) http://meyerweb.com/eric/css/edge/ (css/edge)
You decide which one is which.