Posted by: jimmydlg | February 1, 2009

CSS Float Layouts

Well I have no shame in admitting to this point I used tables primarily as my layout devices. They were easy and I’ve been using them forever it seems. I’m quite enjoying using float layouts however.. it seems like it takes a slight bit more work at first, as I have to remember the widths and sizes of all the elements and add them up as I go along (lest they should wrap on me 🙂 but that’s not so bad.

It is quite nice from a code perspective to be able to fill in server content tags with minimal interference in the way of HTML.. I mean, honestly:

<div id="navigation">            
    <uc1:Navigation ID="Navigation1" runat="server" />
</div>
<div id="content">
    <asp:ContentPlaceHolder ID="contentMain" runat="server" />
</div>

Is SO much nicer than:

<table>
    <tr>
        <td class="navigation">
                <uc1:Navigation ID="Navigation1" runat="server" />
        </td>
        <td class="content">
                <asp:ContentPlaceHolder ID="contentMain" runat="server" />
        </td>
    </tr>
</table> 

And this is with the simplest of cases. The method using float layouts also makes more sense when reading back the code. After looking at some of my more complex and recent projects where floated layouts have been my design method, I’ve found it’s easier to maintain the code, and I’m not nearly as reluctant to go back and make fixes (for fear of having to recall what I was trying to accomplish the first time.)

This has probably been one of the more useful transitions in programming practice I’ve gone through in a while, and I look forward to learning more useful practices.

http://webdesign.about.com/od/advancedcss/a/aa010107.htm

http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

http://websitetips.com/css/tutorials/layouts/#floats

Advertisements

Responses

  1. I too felt some of the difficulties in transitioning away from tables to CSS divs. As far as first learning how to code, I feel tables are a much simpler concept to initially handle than all of the margins and floating you have to tinker with in CSS. Actually, some of my blogging for this week covers a CSS tag named “display:table”, which evidently allows you to create table like structures while still playing within the rules of CSS divs. Might want to check it out, I know I would like to get Wayne’s input on exactly what the “display” option can do for us.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: