473,666 Members | 2,386 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

How do I stop "floats" from floating

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
13 4277
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
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
On 27 May, 16:15, donpro <donpro-2...@rogers.com wrote:
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
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
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
On 28 Mai, 11:48, Andy Dingley <ding...@codesm iths.comwrote:
On 27 May, 16:15, donpro <donpro-2...@rogers.com wrote:
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
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

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

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

18
5710
by: day | last post by:
I know I've seen this issue described before, but I can't find it, or the solution now that I need it. I have some css-specified floating divs that contain images or text. The text divs have a background color and text color that differ from the rest of the page, and I'd like them to be positioned from the right edge of the rightmost image div, to the right edge of the browser window. In other words, if the browser window is 800 pixels...
13
2224
by: Alf P. Steinbach | last post by:
The third part of my attempted Correct C++ tutorial is now available, although for now only in Word format (use free Open Office if no Word), and also, it's not yet been extensively reviewed -- comments welcome! "Intro to loops" <url: http://home.no.net/dubjai/win32cpptut/w32cpptut_01_03.doc> As before I expect that here's mental food and technical points that we can strongly disagree about, for both newbie and the experienced.
59
4577
by: Pierre Quentel | last post by:
Hi all, In some program I was testing if a variable was a boolean, with this test : if v in My script didn't work in some cases and I eventually found that for v = 0 the test returned True So I changed my test for the obvious "if type(v) is bool", but I still find it confusing that "0 in " returns True
11
4429
by: Russ | last post by:
I have a couple of questions for the number crunchers out there: Does "pow(x,2)" simply square x, or does it first compute logarithms (as would be necessary if the exponent were not an integer)? Does "x**0.5" use the same algorithm as "sqrt(x)", or does it use some other (perhaps less efficient) algorithm based on logarithms? Thanks, Russ
1
2338
by: Peter Knörrich | last post by:
Hello, I've found another inconsistency, and looking through the list archives I can find mentions of funky stuff like print float('inf') giving Infanity
6
1685
by: Jeffrey Goldberg | last post by:
I suspect that this is a common problem (and so with a known solution/work-around), but my attempts to find it have failed. I have a float (a table of content box) on the left of a page. The headers within the main material either have distinct background colors or borders. These borders don't seem to recognize that they are in material that is wrapped around the float. I can force specific headers to have sufficiently large left...
1
6477
by: laredotornado | last post by:
Hi, I'm using PHP 4.4.4 on Apache 2 on Fedora Core 5. PHP was installed using Apache's apxs and the php library was installed to /usr/local/php. However, when I set my "error_reporting" setting to be "E_ALL", notices are still not getting reported. The perms on my file are 664, with owner root and group root. The php.ini file is located at /usr/local/lib/php/php.ini. Any ideas why the setting does not seem to be having an effect? ...
10
2186
by: mdh | last post by:
Quick question about pointers. Wrote this "trying to understand this better" code: int *ptr, x = 565; ptr= &x; printf("\n\n\nThe value of x is %d\n", x);
12
4492
by: Michael7 | last post by:
Hi Everyone, I've been trying to get two blocks of text to be aligned, one left, one right, on the same line. What I'm trying to mimic is what I did with tables here: http://www.workmenforChrist.org (under the "Site Map" link) I tried floating the blocks with the code: /*Right box on the index page*/
0
8878
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
8560
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8644
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7389
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6200
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4200
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4372
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
2012
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
2
1778
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.