CSS floats

[francis]

Floats are a large part of the CSS spec. They are all well and good until you start to float objects in divs with cont enough content to make the containing element completely envelope the floated object. In standards compliant browsers you get some mighty annoying results (IE does its own thing if there is a width applied to the containg block - beware not cross-browser testing on this one).

Anyway, I came across this page that helps explain the float problem (http://www.complexspiral.com/publications/containing-floats/). There are some structual hacks in there which should be avoided (invisible <hr /> elements for example), but it easily answers some head scratchers that you'll come across eventually. One for the favorites.

Here are some other discussions on float problems:

Mezzoblue (make sure you read the whole article) (http://www.mezzoblue.com/archives/2003/06/24/simple_it_ai/)
Brainjar float (http://www.brainjar.com/css/positioning/default3.asp)

[Stephen Bawa]

thanks for these francis - I've been having a head scratch recently over this very topic (a nav bar marked up as an unordered list in CSS that floats outside of its div container). I'll get stuck in and let you know how it goes when I can.

Toodle pip!

[Stephen Bawa]

Hello all, I'm having considerable difficulty in implementing some basic CSS design.

I have a container DIV that holds a horizontal nav, a main content (text) DIV and a vertical tracklist DIV. The problem is that I cannot seem to position my tracklist to the right of my content.

I was hoping I could do so without readjusting the width/height of the content, but it appears I can only achieve my aim by positioning absolutely and resizing the content accordingly. The problem with this is that it affects the site as a whole, which in this case is a right pig.

Willl someone help me? :wacko:

[francis]

Hi

If you give us a URL to look at, one of us probably will be able to. Without that, there's not much we can do.

Muchos gracias

[Stephen Bawa]

nothing online as yet I'm afraid. It's a site for someone else, so it wont go online till it's finished. Argh!! A paradox...

Any alternate method, eg displaying the code/posting a screen grab?

ta for responding Francis

[francis]

Hi

You're going to have to put the code online somehow. Either post the offending section and related CSS here (not ideal as the forum will get bogged down in code) or put the page up somewhere where it won't be found - you can always take it down again later. We don't need the entire site, but an/the offending items. Screen grabs aren't any good - we need code to see what's wrong.

There's nothing (okay, not much) revolutionary out there on the Web, and unless you're working for Microsoft or Metallica, whacking a page up on the 'net won't cause floods of visitors:D

Cheers

[francis]

This has just popped up on the Web: clearing a float container without source markup (http://www.positioniseverything.net/easyclearing.html). Should be an essential CSS bookmark for people. The solution using the pseudo :after selector is a work of inspired genius - I wish I could think up things like that.

[James]

Oh dear, Francis will hate me for this... :huh:

Stephen - have you considered a table-based layout for your site? As a relative newbie to coding I think you will find it much easier.

CSS is the way forward, but until it is better supported by Internet Explorer you have to hack it around to get the layout to work properly. That's my experience anyway.

Do use CSS for everything else, but don't sweat blood over CSS layout - there are easier alternatives.

[David]

My feelings entirely :)

[francis]

Have fun getting those tables-based layouts (http://www.w3.org/TR/WCAG10-HTML-TECHS/#tables-layout) both accessible (http://www.w3.org/TR/WCAG10-HTML-TECHS/#wrapped-text) and legal (http://www.alistapart.com/articles/accessuk/), you guys.

If you're not going to touch CSS for layout until IE supports it better, then good luck waiting until 2006 for Longhorn and then 2007/2008 until the user base is acceptable enough for you to start work. I predict you'll be left far, far behind in terms of skills.

You're never going to be handed CSS (or anything Web related) on a plate. You're going to have to learn, and that takes time, patience and some pain. Best to dive in sooner rather than later - at least, that's my opinion.

As quoted on some CSS board: "Don't design for IE, hack for it"

[James]

OK Francis, but I think this is really only possible (without big headaches) in the realms of highly professional web design. I don't think it is reasonable or necessary to use CSS layout in amateur sites (no offence Stephen if you're still around).

I suggested CSS for Stephen because:

a. he is new to web design, let him learn the easier stuff first. If I was forced in at the deep end with CSS layout when I was getting to grips with HTML etc I would have quit and not be on this course nor an intranet manager.

b. the site he is building may not have to comply with W3C etc - amateur / personal sites are exempt from any legislation

c. at least table code is easy to learn and universally rendered by browsers

I believe this MA is about theory of coding as well as implementation, but the implementation does not have to reflect the theory, otherwise it would be a computer language course. Fair play and all credit to those that can - I salute you, but I think a sure way to put people off is to force them into CSS layout techniques.

All my opinion - I love the debate! :P

[David]

In teaching terms, CSS layouts would certainly be a progression from table layouts. In the same way as the use of <font> when learning basic HTML would give way to styling in CSS.

As a teacher, I am always concious of the necessity to teach complex topics by layer. Ensure the student understands the principles behind each layer before moving up to the next. Atempting to deliver all the information in one big chunk leads to poor understanding of the concepts and often, tears before bedtime.

Francis, can you say, with hand on heart, that you have never made a table based page layout? Can you remember when you first got to grips with HTML? What was that like?

[francis]

Oh, I've made table-based sites, but I wouldn't do any more. Likewise I've used font tags, but I wouldn't ever again.

CSS for layout (or CSS-P as it's sometimes referred to) is more complex than just whacking some colours, some text-decoration, etc but that's still buggy (eg: no cascade into tables, table cells). David, surely you wouldn't start off teaching Web desgin to a brand new student by using the <font> tags only to then go back and say "oh, all this I've taught you is out of date and officially frowned upon, so never use it"?

When I first got to grips with HTML, it was through sitting down with a copy of HTML For Dummies and notepad. It was somewhat confusing as it was obviously written by a Netscape user and there was a big chunk on using the <blink> tag, with no explanation at it didn't work in IE. A few years later can FrontPage 2000 then DW3. But all the time I was tweaking by hand as well.

CSS was a revelation - I could update pages really easily and significantly reduce my page weight. It made development easier (this was before I got into CSS for layout...) and life was good. But that was back in the day - IE 5 was the latest browser, Netscape was on 4.x and Opera probably just about existed. Things have moved on (some more slowly than others), and it probably wouldn't be the same now.

I'd really argue the point that CSS-P is only in the realm of professional Web design. Have a look at the CSScreator forum (http://www.csscreator.com/css-forum/index.php) - the highest used area is the newbie one. Eric Meyer's fantastic CSS-Discuss (http://www.css-discuss.org/) mailing list has a massive range of posts from stuff that will make you green with envy to real beginners stuff like DOCTYPE switching (http://www.websitearchitecture.net/forum/index.php?showtopic=35&hl=doctype+switching). Again, my feeling is that if you're going to shunt this aside and not work on it, you'll be doing yourself some harm in the long run.

[David]

Neither James nor I are suggesting that CSS-P should be "shunted aside". On the contrary, we should all keep a very careful eye on developments and be prepared to use it wherever it is convenient to do so. But I, for one, am not prepared to spend my time working out IE hacks when I know damn well that a table will do the job just fine for now.

As for your other point about <font>. As a matter of fact, I teach basic web design to a group of non-technical students and the best way I have found to convey the power of CSS is to introduce the <font> tag first to get them going with HTML and then demonstrate how much more control over formatting is gained by the use of CSS. These students are only just computer literate (some of them) and the idea of introducing a XHTML/CSS mix from first principles would completely lose them. Think layers...

[francis]

I once saw a lecture plan that someone I knew was putting together for some new students and he was going to start them off on XHTML1.1 :o I did question the wisdom, but I think he went with it in the end...

Let's hope XP service pack 2 has some good news for us...

[James]

I was having a look through some books so I can give David my top 5, and I found this chapter in "Web Style Guide 2nd Edition" (Lynch / Horton). It sums it up nicely, particularly the final paragraph! ;)

http://www.websitearchitecture.co.uk/barker/forum/csstables.gif

[francis]

In the last 24 hours I've come across (without looking for them) a few articles about tables based design from several proponents of CSS. It's also given me a good chance to road test Opera 7.5 and Firefox 0.8, both of which have some lovely, lovely features.

Webstandards.org (http://www.webstandards.org/buzz/archive/2004_05.html#a000345) link to an article which loses Brownie points in the first few seconds by saying that CSS isn't hard. But there's some good points in there.

Dave Shea of Mezzoblue and CSS Zen Garden responded to it (http://www.mezzoblue.com/archives/2004/05/13/gasp_tables/) well - the reader comments are also good. He then had to respond to his response (http://www.mezzoblue.com/archives/2004/05/15/tables_oh_th/#000585) to further clear things up. Dave's CSS crib sheet (http://www.mezzoblue.com/css/cribsheet/) is well worth a bookmark. In fact, Mezzoblue will be one of my top 5 with probably CSS Zen Garden.

James - Photoshop scanned image rotation:

Click and hold down the eye dropper tool until it expands. Select the measure tool.
Click and drag the tool along an area where a slope is obvious (eg, the top line above the purple header box in your image). Then select Image > Rotate canvas > Arbitary. This will take the angle of the slope the measure tool is at and allow you to rotate the image in the opposite direction to straighten it out. It's a fantastic little tool that is underused (and sometime needs a tiny bit of back-and-forwards if you're being really picky)

[James]

Here's a letter and expert reply on the matter, from June's netmag (it's not April's despite what it says on the page!)

http://www.websitearchitecture.co.uk/barker/forum/tablescssnetmag.gif

[francis]

The WCAG (http://www.w3.org/TR/WAI-WEBCONTENT/#gl-table-markup) are clear on this matter:

5.3 Do not use tables for layout unless the table makes sense when linearized. Otherwise, if the table does not make sense, provide an alternative equivalent (which may be a linearized version). [Priority 2]. Note. Once user agents support style sheet positioning, tables should not be used for layout.

Note that tables for layout is a priority 2 (priority 1 being you MUST do this, down to priority 3, which is hard to achieve stuff).

User agents now do support CSS-P, so it's time to start ditching those tables. However, it should be noted that if you are going to use tables for layout, those tables must be carefully designed and your content tested. Read the linearising tables (http://www.w3.org/TR/WCAG10-HTML-TECHS/#wrapped-text) section to see why.

As for the "many organisations at this time cannot implement layout without tables" comment. What rubbish! That should read "many organisations don't want to recode their site". Have you seen Macromedia's site without CSS? Have a look:

Macromedia's page with CSS (http://www.websitearchitecture.co.uk/storr/forumimgs/macromedia-normal.jpg)
Macromedia's page without CSS (http://www.websitearchitecture.co.uk/storr/forumimgs/macromedia-no-css.gif)

An excellent example of what can be done on a heavily used, commercial site IMHO.

[James]

It is merely the hacks that you have to do for IE that stops me using CSS. I don't dispute that CSS is the way forward. I don't find the hacks at all intuitive, I have to ask you or look on the web, it's too much hassle when good tables do the job.

[francis]

Ah, CSS hacks. How I (don't) love them. Position Is Everything (http://www.positioniseverything.net) is an excellent resource for things regarding CSS-P.