473,703 Members | 2,679 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

CSS layout frustration

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 starts overprinting. Nor does there
seem to be a reliable way to specify absolute positioning
when there are multiple elements to be juggled both vertically
and horizontally.

I'm currently trying to use just float positioning (left and
right) with percentage widths, and it *almost* works. (Meaning
that it's *almost* robust, which is why I always quit using
CSS for layout.) The current problem is that if the window
width shrinks to some arbitrary point, the floating elements
are no longer side by side; one drops below the other, while
still remaining "floated" to the left or right. There seems
to be no reason at all for this; the floated elements use
percentage width so that they should always have don't take
the entire page width.

The page is at http://www.firelily.com/test/test3.html with
the styles embedded for easier debugging. Here's the key
part of the stylesheet that seems to need fixing:

#content {
width: 100%;
}

#content #main {
margin: 0 .5em;
float: right;
width: 75%;
}

#content #leftNav {
margin: 0 .5em;
float: left;
width: 20%;
}

The footer is set up the same way, and has the same problems.

The other problem that I can't figure out on this page is the
top margin on the right callout box, which should behave like
the quoted text box just up the page, but doesn't. This is minor,
although if someone can spot what the difference is, I'd love
to hear about it.

The problem occurs with both current IE and back-level Firefox
on WinXP.

Thanks for any suggestions on fixing this page!

Diane
Aug 22 '05 #1
30 3136
Diane Wilson wrote:
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.
Possibly one of Ben's templates will give you clues:

http://benmeadowcroft.com/webdev/css...s/spider1.html
The page is at http://www.firelily.com/test/test3.html with the


Please don't assign a text size smaller than my default. Very hard to
read. IOW, assign 100% to the body element, and then only assign
different (larger) percentages for things like <hx> and possibly
(smaller, but not less than 85%) for copywrite/legalese.

Oh, in your CSS there is a lot of extra stuff. Remember, the C in CSS
is Cascading.

--
-bts
-This space intentionally left blank.
Aug 22 '05 #2
Diane Wilson <di***@firelily .com> wrote:
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."


Alas some of the semi enlightened are trying to convince others that
they should not use tables for layout. Although theoretically correct,
the use of floats for creating a "layout" is fundamentally inappropriate
and an awful hack. In practice the method introduces many problems, both
for the author and (worse) for the user.

Unless you are truly skilled in creating a "CSS layout", you'd do your
visitors a favour by using a table for layout. CSS support in IE isn't
good enough to easily create CSS layouts that are as robust as HTML
tables.

Many "CSS layouts" using floats or absolute positioning are of the very
basic variety, or they introduce all sorts of problems that a comparable
table layout would not suffer from.

--
Spartanicus
Aug 22 '05 #3
In article <2L************ *****@twister.n yroc.rr.com>,
a.*********@exa mple.invalid says...
Diane Wilson wrote:
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.
Possibly one of Ben's templates will give you clues:

http://benmeadowcroft.com/webdev/css...s/spider1.html


Doesn't do nearly enough. For one thing, there's no separate page header,
which means that once the header is added, his absolute positioning
trick for the left and right columns is going to be a serious problem.
He also sidesteps the issue of doing columns within the footer.
The page is at http://www.firelily.com/test/test3.html with the


Please don't assign a text size smaller than my default. Very hard to
read. IOW, assign 100% to the body element, and then only assign
different (larger) percentages for things like <hx> and possibly
(smaller, but not less than 85%) for copywrite/legalese.


This text size is a little smaller than I would normally use; this
is an experimental page with a lot of test stuff going on relative
to styles. I needed to be able to fit a lot of stuff in view to see
how things interact.

At least the text sizing is completely responsive to the text size
option in the browser.
Oh, in your CSS there is a lot of extra stuff. Remember, the C in CSS
is Cascading.


Could you vague that up for me, please?

Diane
Aug 22 '05 #4
In article
<pt************ *************** *****@news.spar tanicus.utvinte rnet.ie>,
in*****@invalid .invalid says...
Diane Wilson <di***@firelily .com> wrote:
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."


Alas some of the semi enlightened are trying to convince others that
they should not use tables for layout. Although theoretically correct,
the use of floats for creating a "layout" is fundamentally inappropriate
and an awful hack. In practice the method introduces many problems, both
for the author and (worse) for the user.

Unless you are truly skilled in creating a "CSS layout", you'd do your
visitors a favour by using a table for layout. CSS support in IE isn't
good enough to easily create CSS layouts that are as robust as HTML
tables.

Many "CSS layouts" using floats or absolute positioning are of the very
basic variety, or they introduce all sorts of problems that a comparable
table layout would not suffer from.

Whic is pretty much why I continue to use tables for layout. They're
versatile, flexible, robust, and mostly bug-free, which is a lot more than
anyone can say about CSS.

I got bugged by all this again when I happened to notice that one of
the local web design firms put "using CSS for page layout" as a
job skill requirement. Unfortunately, their own web site is full
of the same hacks and limitations that everything else I've seen using
CSS is prey to.

I understand about all the bugs and incompatibiliti es in various
browser implementations and display models, but the W3C CSS standards
must take a large share of the blame as well. The ability to put
together a robust and predictable grid structure is the foundation
of any good visual structure. I know that some people have put
together some very interesting pages with CSS, but they all seem to
work around structual weaknesses and omissions in the CSS standard.

Diane
Aug 22 '05 #5
Diane Wilson <di***@firelily .com> wrote:
I understand about all the bugs and incompatibiliti es in various
browser implementations and display models, but the W3C CSS standards
must take a large share of the blame as well. The ability to put
together a robust and predictable grid structure is the foundation
of any good visual structure. I know that some people have put
together some very interesting pages with CSS, but they all seem to
work around structual weaknesses and omissions in the CSS standard.


CSS 2.x does contain a method that can replace HTML tables used for
layout in most situations, but it's not supported by IE, so few people
know about it. But this method (CSS tables) suffers from all the same
problems that HTML tables suffer from, minus the semantic problem.

CSS 2.x contains no good methods for creating a layout. Although there
is a proposed "layout" module for CSS 3, it isn't public so whether any
work has been done on it, and if so, if it promises some long awaited
progress on this front is anyone's guess.

--
Spartanicus
Aug 22 '05 #6

On Mon, 22 Aug 2005, Diane Wilson wrote:
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."


The problem with (mis)using tables for layout is that they are far *too*
"robust". They tend to force their grid construction on the user through
thick and thin, no matter how far their browsing situation differs from
the one that the author had in mind. While it's true that a skilled
author can avoid some of the excesses that are usual in the mass of
"commercial " table-based designs (typical symptoms being pixel-sized text,
pixel-sized table cells, pixel-sized tables, the whole thing becoming
unusable when the reader has to zoom the text in order to read it! - some
even become unusable if the user selected one of the available text sizes
other than the default in their browser!!) - authors with more skill allow
their tables at least *some* flexibility towards the user's situation.
But I prefer techniques that adapt themselves more effectively to a wide
range of situations - for example, if necessary floating marginal material
to the top or foot of the page if the browsing width is insufficient to
accommodate it.

As such, anyone who's struggling to use CSS to mimic the kind of robust
grid that they were hankering for with their previous table designs has,
IMHO, missed the point: they might as well have stuck with their (mis)use
of tables. CSS seems best at doing what tables couldn't do: achieving
flexibility of presentation across a much wider range of browsing
situations (not excluding that the page should look reasonably close to
what the author would like, in the presentation situation which the author
had in mind!), whereas tables are much too "robust" for that, even in the
hands of a skilled author.

IMHO, anyway. I won't claim to be good at it yet myself, but I do think I
can recognise web pages where it's working.
Aug 22 '05 #7
Diane Wilson wrote:
In article <2L************ *****@twister.n yroc.rr.com>,
a.*********@exa mple.invalid says...
Diane Wilson wrote:
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.
Possibly one of Ben's templates will give you clues:

http://benmeadowcroft.com/webdev/css...s/spider1.html


Doesn't do nearly enough. For one thing, there's no separate page
header,


http://benmeadowcroft.com/webdev/css...ft-column.html
He calls it ".title"

<div class="title">
<h1>Left Column Layout</h1>
</div>
which means that once the header is added, his absolute
positioning trick for the left and right columns is going to be a
serious problem. He also sidesteps the issue of doing columns
within the footer.


They are samples. Feel free to modify. Put two divs in the footer, and
align one left and one right.

--
-bts
-This space intentionally left blank.
Aug 22 '05 #8
In article <Pine.WNT.4.63. 0508221946240.8 52@ZORIN>,
fl*****@physics .gla.ac.uk says...

On Mon, 22 Aug 2005, Diane Wilson wrote:
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."
The problem with (mis)using tables for layout is that they are far *too*
"robust". They tend to force their grid construction on the user through
thick and thin, no matter how far their browsing situation differs from
the one that the author had in mind. While it's true that a skilled
author can avoid some of the excesses that are usual in the mass of
"commercial " table-based designs (typical symptoms being pixel-sized text,
pixel-sized table cells, pixel-sized tables, the whole thing becoming
unusable when the reader has to zoom the text in order to read it! - some
even become unusable if the user selected one of the available text sizes
other than the default in their browser!!) - authors with more skill allow
their tables at least *some* flexibility towards the user's situation.
But I prefer techniques that adapt themselves more effectively to a wide
range of situations - for example, if necessary floating marginal material
to the top or foot of the page if the browsing width is insufficient to
accommodate it.


Well-constructed layout tables have none of the defects you refer to,
and allow for a fair amount of "float" as well. If (and so far, that's
still a big IF) the web ever makes much headway on mobile devices, the
world will have to change, but so far CSS hasn't blzed that trail well
enough to be a true replacement for tables.
As such, anyone who's struggling to use CSS to mimic the kind of robust
grid that they were hankering for with their previous table designs has,
IMHO, missed the point: they might as well have stuck with their (mis)use
of tables. CSS seems best at doing what tables couldn't do: achieving
flexibility of presentation across a much wider range of browsing
situations (not excluding that the page should look reasonably close to
what the author would like, in the presentation situation which the author
had in mind!), whereas tables are much too "robust" for that, even in the
hands of a skilled author.
That kind of misses the point, and underscores one of my basic complaints
about CSS. There are *centuries* of experience with text layout and
visual design. Much of it translates very well to flexible media like
the web. However, CSS was seemingly designed in deliberate contempt of that
body of experience. It's not just the CSS layout problems; it's part of the
basic vocabulary and capability of fundamentals like text and paragraph
typography controls.

CSS has also perpetuated some of the worst aspects of the things it
was designed to replace. As much as I hate <font> tags, the average
user has a lot more flexibility to deal with under-sized type if a
page is written using <font size="small"> than if the page is written
with <span style="font-size: 8px;"> (or equivalent with proper external
style sheets). One resizes automatically when I select larger type
size from IE's menu bar; the other doesn't. The web would be a much
friendlier environment if CSS had not supported absolute type sizes,
especially in pixels or points. (Inline style definitions are another
hot button, but I'll stay off that one for today.)

Font-sizing rants aside, the basics of visual design and visual
structure don't change so much from one medium to another. Things
like running headings and running footings are extremely useful in
print, and have their functional equivalent in page headers and footers
on the web. It's something that's easy with tables and very difficult
with CSS.
IMHO, anyway. I won't claim to be good at it yet myself, but I do think I
can recognise web pages where it's working.


Alan, I know you've been doing web pages longer than most of us, and the
fact that neither you nor many other talented people have become "good
at it" yet is indicative of the problems inherent in CSS.

When I do see attractive pages in CSS (such as Zen Garden), I can almost
hear the sigh of relief from the designer along the lines of "ahhh,
another page where I've avoided the necessity of complex headers and
footers!". The problems don't show up until you try to translate those
techniques to a different visual structure. CSS isn't just limiting;
it's constricting.

Diane
Aug 22 '05 #9
Diane Wilson <di***@firelily .com> wrote:
CSS has also perpetuated some of the worst aspects of the things it
was designed to replace. As much as I hate <font> tags, the average
user has a lot more flexibility to deal with under-sized type if a
page is written using <font size="small"> than if the page is written
with <span style="font-size: 8px;"> (or equivalent with proper external
style sheets). One resizes automatically when I select larger type
size from IE's menu bar; the other doesn't. The web would be a much
friendlier environment if CSS had not supported absolute type sizes,
especially in pixels or points.


CSS does not support non resizable font sizes, the issue you are
referring to is one of the many CSS defects in IE. This one is simple to
avoid, don't use px sized text.

--
Spartanicus
Aug 22 '05 #10

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

Similar topics

10
11049
by: Frog | last post by:
Hi, i'm not a programmer so I have a very stupid question. I'm trying to make a practical script. I need to run an executable program in it but i can't get it to work. Maybe someone here can figure it out easily: ----- #! /python a = (recipient's e-mail address) pgp -feat a
82
10680
by: Peter Diedrich | last post by:
The site design is pretty simple: ============================================ | Head | ============================================ | | | | | | | | | left | center | right | | | | | | | | |
7
1709
by: June Moore | last post by:
Hi all, I have a printout of a barcode label with various sections of info, e.g. sender, receiver, product details, notes... etc. I am currently designing a page which must look exactly like the this label when printed. The problem in HTML is that the table layout cannot be adjusted to the exact size that I would have liked it to be, and this causes a lot of frustration indeed. I need advice from people in this group on how I can solve...
47
9143
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.
9
2390
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 | |
3
3490
by: Young H. Rhiu | last post by:
See: http://hilug.org/img/app_layout.GIF I'm implementing an album-like application with wxpython but I'm new to wxPython though I know how to program with python. The problem is that it's not easy for me to deal with drawing layout stuff with wxpython. What layout I'm thinking of looks like the gif image above. The application is about saving some comments for each pictures on the filesystem. There are two windows. The above one is a...
10
9202
by: Luke | last post by:
Hi. I am trying to make correct layout, here is an example of (dynamically generated content via jsp): http://localhost/www/layout.htm Most outer div is positioned absolute (if not then it will not grow when content inside div.body is greater than width of window of user agent), anyway anyone knowlegable can see it in sources...
1
1781
by: Rob R. Ainscough | last post by:
I'm at a new level of frustration just trying to get my controls to line up and stay in place. I'm using a MultiView containing 4 views - some views have Panels. I can't use absolution position on my controls because in MultiView that means when the views are switched (ActiveViewIndex) the controls in the new view are absolution position which means they are displayed lower down the page (where they were arranged in the original view...
11
1327
by: Lloyd Sheen | last post by:
Why oh why can I not edit and continue??? VS 2005 Pro. Multi project solution. All solutions set to debug. But I cannot edit the source when debugging. Any ideas??
0
8739
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
8654
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
9234
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...
0
9089
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...
0
7832
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
6575
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
4412
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...
1
3107
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2406
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.