By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,856 Members | 1,986 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,856 IT Pros & Developers. It's quick & easy.

How do I stop "floats" from floating

P: n/a
Hi,

I have a row of 5 <DIVelements 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
Jun 27 '08 #1
Share this Question
Share on Google+
13 Replies


P: n/a
donpro meinte:
Hi,

I have a row of 5 <DIVelements 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?
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
--
http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
http://web.gregorkofler.com ::: meine JS-Spielwiese
http://www.image2d.com ::: Bildagentur für den alpinen Raum
Jun 27 '08 #2

P: n/a
On 05/27/08 08:15 am, donpro wrote:
>
I have a row of 5 <DIVelements 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?
Wrap them in another div of a fixed width set with ems.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Jun 27 '08 #3

P: n/a
On 27 May, 16:15, donpro <donpro-2...@rogers.comwrote:
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.
Jun 27 '08 #4

P: n/a
Jim Moe wrote:
On 05/27/08 08:15 am, donpro wrote:
>>
I have a row of 5 <DIVelements 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.

--
Berg
Jun 27 '08 #5

P: n/a
On 28 Mai, 17:48, Bergamot <berga...@visi.comwrote:
Jim Moe wrote:
On 05/27/08 08:15 am, donpro wrote:
I have a row of 5 <DIVelements 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.
Jun 27 '08 #6

P: n/a
On 28 Mai, 11:48, Andy Dingley <ding...@codesmiths.comwrote:
On 27 May, 16:15, donpro <donpro-2...@rogers.comwrote:
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.
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.
Jun 27 '08 #7

P: n/a
On 05/28/08 08:48 am, Bergamot wrote:
>>>
I have a row of 5 <DIVelements 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.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Jun 27 '08 #8

P: n/a

Jim Moe wrote:
On 05/28/08 08:48 am, Bergamot wrote:
>>>>
I have a row of 5 <DIVelements 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.
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.

--
Berg
Jun 27 '08 #9

P: n/a
Roy A. wrote:
On 28 Mai, 11:48, Andy Dingley wrote:
>
>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.

--
John
"And now, my children, let us turn to the Book of Margins, chapter 2,
verse 1."
Jun 27 '08 #10

P: n/a
John Hosking wrote:
Roy A. wrote:
>On 28 Mai, 11:48, Andy Dingley wrote:
>>
>>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.
How so? To me it looks like a recommendation to learn about some
technical issues at a website.
--
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

Jun 27 '08 #11

P: n/a
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
--
http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
http://web.gregorkofler.com ::: meine JS-Spielwiese
http://www.image2d.com ::: Bildagentur für den alpinen Raum
Jun 27 '08 #12

P: n/a
Blinky the Shark wrote:
John Hosking wrote:
>Roy A. wrote:
>>On 28 Mai, 11:48, Andy Dingley wrote:
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.

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

--
John
Better even than the UIP: http://improve-usenet.org/ ? ;-)
Jun 27 '08 #13

P: n/a
John Hosking wrote:
Blinky the Shark wrote:
>John Hosking wrote:
>>Roy A. wrote:
On 28 Mai, 11:48, Andy Dingley wrote:
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.

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

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

Jun 27 '08 #14

This discussion thread is closed

Replies have been disabled for this discussion.