How do I stop "floats" from floating

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

donpro - 27 May 2008 16:15 GMT

Hi,

I have a row of 5 <DIV> elements that have the "float: left" attribute
as I wanted them on the same row. I issue a "clear: left" for the
subsequent element.

All looks great except if I increase the browser text size of contract
the screen, the last DIV floats underneath. Is there anyway to stop
this and keep all on the same row?

Thanks,
Don

Reply to this Message

Gregor Kofler - 27 May 2008 20:11 GMT

donpro meinte:

> Hi,
>
[quoted text clipped - 5 lines]
> the screen, the last DIV floats underneath. Is there anyway to stop
> this and keep all on the same row?

Not really. Since the observed "phenomenon" is how floats work. Perhaps
you can enlarge the container containing the floats (or scale it in
"em", too).

Gregor

Signature

http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
http://web.gregorkofler.com ::: meine JS-Spielwiese
http://www.image2d.com ::: Bildagentur für den alpinen Raum

Reply to this Message

Jim Moe - 27 May 2008 20:46 GMT

> I have a row of 5 <DIV> elements that have the "float: left" attribute
> as I wanted them on the same row. I issue a "clear: left" for the
[quoted text clipped - 3 lines]
> the screen, the last DIV floats underneath. Is there anyway to stop
> this and keep all on the same row?

Wrap them in another div of a fixed width set with ems.

Signature

jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Reply to this Message

Bergamot - 28 May 2008 16:48 GMT

>> I have a row of 5 <DIV> elements that have the "float: left" attribute
>> as I wanted them on the same row.
>>
> Wrap them in another div of a fixed width set with ems.

FYI, ems are not a one-size-fits-all unit.

It wouldn't be the best unit to use unless the content were all text,
and it's debatable even then. % units would allow the widths to scale to
the window size, and px should be used for graphical content.

The best unit to use depends on the specific content and the overall
design/layout.

If the OP posted a URL it would be easier to make a suggestion for his
particular case.

Signature

Berg

Reply to this Message

Roy A. - 28 May 2008 19:59 GMT

> >> I have a row of 5 <DIV> elements that have the "float: left" attribute
> >> as I wanted them on the same row.
>
> > Wrap them in another div of a fixed width set with ems.
>
> FYI, ems are not a one-size-fits-all unit.

So use Inch, inch is a one-size-fits-all unit. On normal screens
an inch is the same or a little bigger than one inch. It depends
on your configuration. On a cellurar phone or a pda, an inch is
not an inch, but something that looks like an inch (considering
that you are holding the device closer to your eyes, and con-
sidering that the letters has to be at least 8-9 pixels height). It
would be different from device to device. But the idea isn't mine.
Teoretical the graphical would match the letters, but that would
never happen.

> It wouldn't be the best unit to use unless the content were all text,
> and it's debatable even then. % units would allow the widths to scale to
> the window size, and px should be used for graphical content.

How come? Isn't that defined in css? I would think that 100% is 100%
of the containing element. So how would that differ?

> The best unit to use depends on the specific content and the overall
> design/layout.

I think most can agree with that.

> If the OP posted a URL it would be easier to make a suggestion for his
> particular case.

If the OP postet an URL, we all could use ower effort to criticise the
content.
That would be nice.

Reply to this Message

Jim Moe - 28 May 2008 20:24 GMT

>>> I have a row of 5 <DIV> elements that have the "float: left" attribute
>>> as I wanted them on the same row.
>>>
>> Wrap them in another div of a fixed width set with ems.
>
> FYI, ems are not a one-size-fits-all unit.

The OP mentioned changing the text size and having the layout degrade. I
assumed he has text in the divs making ems an appropriate unit to recommend.

Signature

jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Reply to this Message

Bergamot - 28 May 2008 23:00 GMT

>>>> I have a row of 5 <DIV> elements that have the "float: left" attribute
>>>> as I wanted them on the same row.
[quoted text clipped - 5 lines]
> The OP mentioned changing the text size and having the layout degrade. I
> assumed he has text in the divs making ems an appropriate unit to recommend.

I guess I missed that part, but it doesn't change the fact that a fixed
width in ems may not be the best thing to do. It depends on the content.

There's another thread in here someplace about a layout with a fixed
width of 60ems. Bad, bad idea, except for people using small default
font sizes.

Signature

Berg

Reply to this Message

Andy Dingley - 28 May 2008 10:48 GMT

> All looks great except if I increase the browser text size of contract
> the screen, the last DIV floats underneath. Is there anyway to stop
> this and keep all on the same row?

This is what float does. If you want to force the grid positioning,
even when it no longer fits into the window size, then use a <table>
instead.

Read http://brainjar.com/css/positioning/ for a good article of float
too.

Reply to this Message

Roy A. - 28 May 2008 20:13 GMT

> > All looks great except if I increase the browser text size of contract
> > the screen, the last DIV floats underneath. Is there anyway to stop
[quoted text clipped - 3 lines]
> even when it no longer fits into the window size, then use a <table>
> instead.

For once I agree with Andy Dingley. If you want a table layout, use
tables. In most cases thats better than emulatin tables with div-
elements.
Don't rely on lynx or text-emulation if you are trying to design
accessible
sites. Most, and every "disabled" person is using a screen reader on
top
of an ordinary webbrowser. It can't be that hard to download and try
out
one for yourself. If you've tryed one, you know that now one is
tabbing around
and hope for some interesting to appear.

> Readhttp://brainjar.com/css/positioning/for a good article of float
> too.

Also remember, its's considered best practice to read htmldog.com.

Reply to this Message

John Hosking - 29 May 2008 02:00 GMT

>> Readhttp://brainjar.com/css/positioning/for a good article of float
>> too.
>
> Also remember, its's considered best practice to read htmldog.com.

That's kind of an overstatement, isn't it?

You make it sound like it overshadows the Bible and Koran.

Signature

John
"And now, my children, let us turn to the Book of Margins, chapter 2,
verse 1."

Reply to this Message

Blinky the Shark - 29 May 2008 07:30 GMT

>>> Readhttp://brainjar.com/css/positioning/for a good article of float
>>> too.
[quoted text clipped - 4 lines]
>
> You make it sound like it overshadows the Bible and Koran.

How so? To me it looks like a recommendation to learn about some
technical issues at a website.

Signature

Blinky
Killing all posts from Google Groups
The Usenet Improvement Project --> http://improve-usenet.org
Found 5/08: a free GG-blocking news *feed* --> http://usenet4all.se

Reply to this Message

John Hosking - 29 May 2008 16:36 GMT

>>>> Readhttp://brainjar.com/css/positioning/for a good article of float
>>>> too.
[quoted text clipped - 5 lines]
> How so? To me it looks like a recommendation to learn about some
> technical issues at a website.

Yeah, sure, that's understood, but: *best* practice?

It's better than any other tutorial or discussion site, better than
referring to the W3C's pages, better than
trial-and-error-and-validate-experimentation, better than these here
newsgroup thingies, better than thinking globally and acting locally,
better than treating others as you would have them treat you (etc.)?

If he had said "it's good practice" in the three places he's dropped
this phrase lately, I wouldn't have wasted the post on it. I *agree*
with *that* .

Signature

John
Better even than the UIP: http://improve-usenet.org/ ? ;-)

Reply to this Message

Blinky the Shark - 29 May 2008 18:26 GMT

>>>>> Readhttp://brainjar.com/css/positioning/for a good article of float
>>>>> too.
[quoted text clipped - 7 lines]
>
> Yeah, sure, that's understood, but: *best* practice?

So is not using tables for nontabular material. That hardly ranks the
advice up with the relious canons. Canona. Canonae. Whatever.

> It's better than any other tutorial or discussion site, better than
> referring to the W3C's pages, better than
> trial-and-error-and-validate-experimentation, better than these here
> newsgroup thingies, better than thinking globally and acting locally,
> better than treating others as you would have them treat you (etc.)?

Then it sounds like "best practice" to me.

> If he had said "it's good practice" in the three places he's dropped
> this phrase lately, I wouldn't have wasted the post on it. I *agree*
> with *that* .

I see you didn't recommend anything better. So I guess "best" still works.

Signature

Blinky
Killing all posts from Google Groups
The Usenet Improvement Project --> http://improve-usenet.org
Found 5/08: a free GG-blocking news *feed* --> http://usenet4all.se

Reply to this Message

Gregor Kofler - 29 May 2008 09:22 GMT

Roy A. meinte:

> Also remember, its's considered best practice to read htmldog.com.

It is? Despite doing web authoring for quite some time now, I haven't
even heard of that site.

Gregor

Signature

http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
http://web.gregorkofler.com ::: meine JS-Spielwiese
http://www.image2d.com ::: Bildagentur für den alpinen Raum

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / May 2008

How do I stop "floats" from floating