473,832 Members | 2,072 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Replacing small layout table by CSS floats not working properly

Hi there,

for a long time I've been using tables to layout elements on a web page.

Example: Say we have a 2x2 table and I'd like to put text (left aligned)
and buttons (right aligned) in the top right table cell. These elements
should stay on one line and the table should keep a minimum width in
order to prevent wrapping.

-------------------------------------------------
| text | text text Button Button Button |
+------+----------------------------------------+
| text | text |
-------------------------------------------------

A simple and fast solution is to put the elements inside a nested layout
table and adding the NOWRAP attribute to the TD elements.

With the improved CSS support in current browsers, dumping layout tables
in favour of CSS is in order, I guess. So I started with this small
problem and tried to replace the nested layout table using CSS
controlled HTML elements instead. See my solution here:

http://www.mobotixserver.de/~daniel/..._float_en.html

I set the Buttons to "float:righ t" and the table cell to
"white-space:nowrap;". Everything looks ok until the browser window is
resized. The table shrinks as the browser window shrinks. Firefox moves
the Buttons over the text, IE wraps everything.

I can not believe that CSS fails on simple problems like this. How can I
improve my imperfect CSS approach? Thanks for any help.

Cheers
Daniel
Aug 30 '06 #1
7 2628

Daniel Kabs wrote:
I can not believe that CSS fails on simple problems like this.
It doesn't fail, it just takes a different approach to being asked to
do the impossible. If you make a design that needs a certain minimum
width to function, then how can it be expected to render in a smaller
space? _Something_ has to give.

The <tableversion fails because it preserves the table minimum width
at the cost of overflowing the page -- which is still a failure from a
usability viewpoint. It's no better or worse than CSS, it's just
different. If you want this sort of behaviour, set min-width on the
container element.

IE is of course just broken.

Aug 30 '06 #2
Hello Andy,

thanks for your comment. Your point of view is interesting. I never saw
the problem from that perspective.

You are right, something has to give. If the table does not fit on the
browser page, I like to hint the browser what to do. In this case, I'd
like the browser to display the Text and Button elements on one line
without wrapping.

So what happens if the text length increases. Say, because the text has
been translated to french and now needs more space?

Firefox obviously runs the text underneath the buttons, so the buttons
cover the text. I guess, this is because floating elements are taken out
of the usual HTML flow.

There are two solutions. Either wrap or increase the size of the
container element (even beyond the browser window width, so scrollbars
appear). Do you know how to do the latter?
If you want this sort of behaviour, set min-width on the
container element.
The container element in this case is the top right table cell.
I don't know its absolute pixel width as it depends on the text and the
number of buttons. In the layout table solution, I just add the
attribute width="100%" but I guess, setting min-width of a table cell to
100% makes no sense.

Although I do not like the idea of setting absolute sizes, I tried to
set the table to a fixed width of 600px using width and min-width but
this does not change anything. The table still shrinks, text and buttons
wrap.

Cheers
Daniel
Aug 30 '06 #3
Andy Dingley wrote:
Daniel Kabs wrote:
I can not believe that CSS fails on simple problems like this.

It doesn't fail, it just takes a different approach to being asked to
do the impossible. If you make a design that needs a certain minimum
width to function, then how can it be expected to render in a smaller
space? _Something_ has to give.

The <tableversion fails because it preserves the table minimum width
at the cost of overflowing the page -- which is still a failure from a
usability viewpoint. It's no better or worse than CSS, it's just
different. If you want this sort of behaviour, set min-width on the
container element.

IE is of course just broken.
How bigoted this last statement is. Do you know who many problems I've
run into on the NN/Moz/FF side of things? No browser is perfect, and no
browser renders 100% currect, so implying that IE is broken and others
are not to some degree is just unnecessary bias we don't need here.

The fact is, IE sometimes displays things correctly where FF and NN
fail, and vice versa. It's a two, not one, way street.
Aug 30 '06 #4
On 2006-08-30, Wayne Poe wrote:
Andy Dingley wrote:
>Daniel Kabs wrote:
I can not believe that CSS fails on simple problems like this.

It doesn't fail, it just takes a different approach to being asked to
do the impossible. If you make a design that needs a certain minimum
width to function, then how can it be expected to render in a smaller
space? _Something_ has to give.

The <tableversion fails because it preserves the table minimum width
at the cost of overflowing the page -- which is still a failure from a
usability viewpoint. It's no better or worse than CSS, it's just
different. If you want this sort of behaviour, set min-width on the
container element.
>IE is of course just broken.

How bigoted this last statement is. Do you know who many problems I've
run into on the NN/Moz/FF side of things? No browser is perfect, and no
browser renders 100% currect, so implying that IE is broken and others
are not to some degree is just unnecessary bias we don't need here.

The fact is, IE sometimes displays things correctly where FF and NN
fail, and vice versa. It's a two, not one, way street.
It may be a two-way street, but there are 20 lanes in one direction
and only one in the other.

Firefox is not perfect, but it implememnts vastly more of the
standard (flawed as it is) than IE. Take a look at this:
<http://www.webdevout.n et/browser_support _css.php>.

--
Chris F.A. Johnson <http://cfaj.freeshell. org>
=============== =============== =============== =============== =======
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
Aug 30 '06 #5
Chris F.A. Johnson wrote:
On 2006-08-30, Wayne Poe wrote:
>Andy Dingley wrote:
>>Daniel Kabs wrote:

I can not believe that CSS fails on simple problems like this.

It doesn't fail, it just takes a different approach to being asked
to do the impossible. If you make a design that needs a certain
minimum width to function, then how can it be expected to render in
a smaller space? _Something_ has to give.

The <tableversion fails because it preserves the table minimum
width at the cost of overflowing the page -- which is still a
failure from a usability viewpoint. It's no better or worse than
CSS, it's just different. If you want this sort of behaviour, set
min-width on the container element.
>>IE is of course just broken.

How bigoted this last statement is. Do you know who many problems
I've run into on the NN/Moz/FF side of things? No browser is
perfect, and no browser renders 100% currect, so implying that IE is
broken and others are not to some degree is just unnecessary bias we
don't need here.

The fact is, IE sometimes displays things correctly where FF and NN
fail, and vice versa. It's a two, not one, way street.

It may be a two-way street, but there are 20 lanes in one direction
and only one in the other.
I'm sorry, but when STRICT HTML 4.01 is used i na page, this is just
wrong. I'd pose alsmot a nequal amount of "lanes" either way, as I've
run into countless problem on the NN/Moz/FF side.
Firefox is not perfect, but it implememnts vastly more of the
standard (flawed as it is) than IE. Take a look at this:
It's far from perfect. It's not a bad browser, don't get me wrong, but
it is not near as perfect as many tout it to be. Neither is IE, or NN,
or Opera, or most any browser. FF & co do many unepcted things and so
does IE. FF is no closer to 100% compliance than IE is. There is a big
difference between rendering as epected and rendering according to the
specs.
Aug 30 '06 #6
On 2006-08-30, Wayne Poe wrote:
Chris F.A. Johnson wrote:
>On 2006-08-30, Wayne Poe wrote:
>>Andy Dingley wrote:
....
>>>IE is of course just broken.

How bigoted this last statement is. Do you know who many problems
I've run into on the NN/Moz/FF side of things? No browser is
perfect, and no browser renders 100% currect, so implying that IE is
broken and others are not to some degree is just unnecessary bias we
don't need here.

The fact is, IE sometimes displays things correctly where FF and NN
fail, and vice versa. It's a two, not one, way street.

It may be a two-way street, but there are 20 lanes in one direction
and only one in the other.

I'm sorry, but when STRICT HTML 4.01 is used i na page, this is just
wrong. I'd pose alsmot a nequal amount of "lanes" either way, as I've
run into countless problem on the NN/Moz/FF side.
> Firefox is not perfect, but it implememnts vastly more of the
standard (flawed as it is) than IE. Take a look at this:

It's far from perfect. It's not a bad browser, don't get me wrong, but
it is not near as perfect as many tout it to be. Neither is IE, or NN,
or Opera, or most any browser. FF & co do many unepcted things and so
does IE.
FF does far fewer unexpected things -- if you expect compliance
with the specs.
FF is no closer to 100% compliance than IE is.
That is nonsense.
There is a big difference between rendering as epected and rendering
according to the specs.
If you expect pages to display the way they do in IE, then you will
be disappointed with FF. If you expect pages to be displayed
according to the specs, you will by disappointed with IE.
--
Chris F.A. Johnson <http://cfaj.freeshell. org>
=============== =============== =============== =============== =======
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
Aug 30 '06 #7
Andy Dingley wrote:
>I can not believe that CSS fails on simple problems like this.

It doesn't fail, it just takes a different approach to being asked to
do the impossible.
I reworked the example

http://www.mobotixserver.de/~daniel/..._float_en.html

and now you can easily see that I am *not* asking the impossible.

Please have a look at the last table on the page. The upper right cell
contains text and floated elements. The latter take up no space and as
such do not contribute to the table cell width. So even if the browser
window is large enough, the text overlaps the floated elements.

How can I make the browser use the space that is available, increase the
table width automatically to display text and floated elements next to
each other?
Cheers
Daniel

Sep 4 '06 #8

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

Similar topics

82
10734
by: Peter Diedrich | last post by:
The site design is pretty simple: ============================================ | Head | ============================================ | | | | | | | | | left | center | right | | | | | | | | |
47
9173
by: Neal | last post by:
Patrick Griffiths weighs in on the CSS vs table layout debate in his blog entry "Tables my ass" - http://www.htmldog.com/ptg/archives/000049.php . A quite good article.
4
1749
by: Geoff Hague | last post by:
I've decided I need to rebuild my website from scratch to work properly accross browsers (the previous version of the site worked fine in IE6, but was really wonky in other browsers). What I'm trying for is a simple layout with a header and two colums (left and right) positioned immediately below it. Here's what I've got so far: http://www.captainsoftheworld.com/modernrepublic/test/index.php...
4
2576
by: Spartanicus | last post by:
I've started work on a css layout tutorial. I expect that it will take a minimum of several weeks to get to a complete draft stage. I hope to get better feedback by publishing individual pages. I've uploaded 2 draft pages, an index and a list of definitions: http://www.spartanicus.utvinternet.ie/CssLayout/index.htm.remove http://www.spartanicus.utvinternet.ie/CssLayout/definitions.htm.remove The urls are not valid because of the added...
30
3151
by: Diane Wilson | last post by:
I'm trying (once again) to figure out how to make a robust CSS layout style that can replace tables. I'd like to be able to do a basic two-column layout, with a one-column header, a two column body, and a two-column footer. The problem, and one that always sends me back to using tables, is that word "robust." Absolute positioning gets squirrelly, because it takes the positioned elements completely out of the float scheme, and stuff...
9
2399
by: WeshaTheLeopard | last post by:
Hi all, I have to admit that I'm completely at loss trying to implement the following layout: +-----------document---------+ | | | +--box1---+ +--box2---+ | | | A | | A | |
4
2198
by: Lumpierbritches | last post by:
Thank you once again for any and all assistance. I'm building an application that's getting quite bulky due to the number of forms, macros and procedures. I was wondering if there's a way to use 1 (one) unbound form, if all the fields are the same for multiple forms populating them with Queries? I have a makeshif menu form with command buttons and I would like to eliminate all the forms and replace them with one unbound form for three...
14
4867
by: Anoop | last post by:
Hi, I am new to this newsgroup and need help in the following questions. 1. I am workin' on a GUI application. Does C# provides Layout Managers the way Java does to design GUI? I know that it can be done using the designer but I intentionally don't want to use that. The one reason is that you cannot change the code generated by the designer. The other could be that you have more free hand and control to design your GUI. 2....
53
4150
by: brave1979 | last post by:
Please check out my javascript library that allows you to create any layout for your web page, nested as deep as you like, adjusting to width and height of a browser window. You just describe it in javascript object and that's all. No need to know CSS hacks, no need to clutter your html with tables. http://www.bravelayout.scarabeo.biz/Quickstart
0
9795
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, weíll explore What is ONU, What Is Router, ONU & Routerís main usage, and What is the difference between ONU and Router. Letís take a closer look ! Part I. Meaning of...
0
9642
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10498
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10540
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
10212
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
6951
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5623
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...
2
3970
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3077
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.