Feed Sign in with OpenID OpenID

Simon Willison’s Weblog

From HTML to CSS

Tom Gilder: “I did this in HTML, how do I do it in CSS?”. A collection of tips for replicating visual formatting effects in old-style HTML with their CSS equivalents. A good resource for people just getting started with CSS.

Posted 1st June 2003 at 2:07 pm

This is From HTML to CSS by Simon Willison, posted on 1st June 2003.

View blog reactions

Next: Using bookmarklets to experiment with CSS

Previous: Mouseless

12 comments

  1. The one I'm stuck on is how to make two columns equal height. In my blog (linked above) I've got two columns. In the normal view, the left column is usually longer than the right one and text will flow over into the right column space when the right column runs out of content. If viewing a single entry (click on a permalink) the left column becomes quite short and the right overflows out of the box they're in. I don't know how to fix either of these and Tom doesn't have a comment section on his page, so maybe he'll read this. :) I tried to use <i> in this comment and was informed that I couldn't. Ok, no big deal. Alt-Left. My comment was gone and I had to re-type it. Is that done on purpose?

    Sam - 1st June 2003 16:48 - #

  2. s/above/below

    Sam - 1st June 2003 16:49 - #

  3. I think that's the fifth complaint I've had about comments being lost this week - it's not intentiaonal, it's just crummy design on my part. I'll try and fix that tonight (and add a preview option while I'm at it).

    As to your columns question, I think I know what the problem is and I'll endeavour to answer it soon - unfortunately it requires a bit more detail than I have time to give right now (revision constraints).

    Simon Willison - 1st June 2003 17:18 - #

  4. Just lost my comment too, it wasn't even there after hitting the back button, as if the page had expired or something. You might put a (required) after both the name and email. My comment was about a similar page: http://css.nu/articles/translate.html and the need for a tool that can automatically convert some HTML items to CSS, such as font tags and tables and (in the future) forms to Xforms. Something like that would help people more quickly convert their pages while learning CSS. HTML-tidy has a -clean option to change font tags to CSS, but that's all.

    a - 1st June 2003 21:18 - #

  5. Someone found it :D

    My motive for doing those was me getting really bored of people on IRC asking me "how do you do X with CSS", so I thought I'd write them up. I might tart the pages up at some point if anyone likes them :)

    Tom Gilder - 2nd June 2003 00:46 - #

  6. Sam -- in lieu of being able to find contact info on your site (and not trying to pre-empt Simon, who may well come up with a more elegant or accurate solution), posting here:

    It took me a little while to figure out how exactly your pages are laid out (had to resort to the DOM inspector, actually), but I think you can solve most of your problems by setting margin-right on .articlecontainer to the width of #rightcontent. What you're seeing is the expected behavior of the float; when the left is a longer column than the right, it wraps under the bottom of the right. Set its right margin to the width of teh right column and it'll be forced to stay in its own "area" of the page.

    James - 2nd June 2003 03:17 - #

  7. Thanks, James. I'm more worried about height though. I realize your solution fixes the main page's problem, but what about the indivitual articles?

    Sam - 2nd June 2003 04:39 - #

  8. Hi Sam...

    In order to solve your article page problem, you just need to insert some block-level element, with a style="clear: both;".

    I think you're wanting something like this.

    PS: I might get round to updating my blog entry form at some point. I'll let you know when I do!

    Andrew Hayward - 2nd June 2003 10:37 - #

  9. In Mozilla 1.4 on Debian I can't tell any difference.

    Sam - 2nd June 2003 14:09 - #

  10. Err... ok...

    No promises, but I've modified the page changes a little. Works fine for me, but I'm with Mozilla 1.3/Windows, so could be rather different.

    (Sorry for taking your comments in an odd direction, Simon!)

    Andrew Hayward - 2nd June 2003 14:29 - #

  11. I looked for your email address on your site too, but couldn't find it. You can email me at slb at my domain. I took a screenshot of the updated page... it looks the same. Email me and I'll point you to the screenshot. Thanks for your help Andrew! Thanks for giving us a forum, Simon!

    Sam - 2nd June 2003 16:26 - #

  12. I like the concept of the site, but some of the examples don't display properly (or at all in some cases) in IE5/Mac. Blue Robot has two ways to do horizonal centering in CSS using Auto-width margins and negative margins. Web Page Design for Designers has a technique for Vertical Centering with CSS.

    kirkaracha - 2nd June 2003 17:18 - #

Comments are closed.

Previously hosted at http://simon.incutio.com/archive/2003/06/01/htmlToCss

A django site