How do I create non-breaking variable 2-column CSS layout

Discuss general web development questions. Help others and get help from others.

Moderator: kfury77

How do I create non-breaking variable 2-column CSS layout

Postby Karlis » Wed Oct 24, 2007 12:14 am

Continuing the topic on tables, I'm learning here, so maybe you can help.

How do I create a variable width 2-column design so that:
1) both columns are variable e.g. 30% / 70%
2) the column 2 does not go under or overlap the column 1 if the browser window width is decreased significantly, e.g. to 30 pixels. I need the scrollbar to appear when the minimum width is reached and not the columns to jump around
3) it should look 100% the same (not a single pixel offset) in all web browsers
4) it should be no bigger in size that 150% of the table-based layout code
5) it should not use any javascript

It is easy with tables, but I tried CSS and failed, so I still believe it is not possible :D Somebody, please, open my eyes.
Karlis Blumentals
Blumentals Software
www.blumentals.net
User avatar
Karlis
Site Admin
 
Posts: 3598
Joined: Mon Jul 15, 2002 5:24 pm
Location: Riga, Latvia, Europe

Postby syrupcore » Wed Oct 24, 2007 6:02 am

sure. 75 per hour...
User avatar
syrupcore
Top Contributor
 
Posts: 917
Joined: Thu Jul 21, 2005 12:58 am
Location: Portland, Oregon, usa

Postby syrupcore » Wed Oct 24, 2007 6:26 am

just kidding. :)

pixel perfect is doable but I can't really give you code for it without seeing the layout. With floats and IE6's floated double margin bug, it almost always requires a bit of css hacking. If you need to target IE6 to fix something try:

Code: Select all
* html #whatever{your:stuff;}


Only IE6 will see that. If you need to hack for IE7, use
Code: Select all
*+html #whatever{your:stuff;}


There are 50 ways to do a two column layout. Here's a simple one:

Code: Select all
<head>
  <title></title>

<style type="text/css" media="screen">
* {margin:0;    padding:0;} /* make sure all browser are starting off the same*/
div{ border: 1px solid red;} /* always to start for seeing layouts as the are built up */
#wrapper{
    min-width: 400px; /*experiment with your content*/
    overflow: hidden; /* contain the floated containers*/
}
#main {
    float: left;
    width: 69%;
}
#sub{
    float: left;
    width: 29%;
}
</style>

</head>

<body>
<div id="wrapper">
   <div id="main">
      <h1>Main</h1>
   </div>
   <div id="sub">
      <h2>Sub</h2>
   </div>
</div>
</body>


That works for everything except your strict resizing requirements in IE6. It works down to about 150px in this test. there are ways around it.

one is to invalidate your css with IE6 specific junk:
Code: Select all
#wrapper {
    width:expression(document.body.clientWidth < 550 ? "400px" : "100%" );
}

more on that here: http://www.cameronmoll.com/archives/000892.html

Here's a good little article on 2 column fluid layouts: http://www.456bereastreet.com/archive/2 ... h_elastic/

Hope it helps.

Will
User avatar
syrupcore
Top Contributor
 
Posts: 917
Joined: Thu Jul 21, 2005 12:58 am
Location: Portland, Oregon, usa

Postby Karlis » Wed Oct 24, 2007 6:27 pm

Thanks, Will! Now I can see it is possible, but it takes a lot of tricks and sneaky stuff :)

Though I am still not sold and prefer this:

Code: Select all
<table width="100%" border="1">
  <tr>
    <td width="70%">
      <h1>Main</h1>
    </td>
    <td width="30%">
      <h2>Sub</h2>
    </td>
  </tr>
</table>


at least we know that it is possible and with the time we should use it.
Karlis Blumentals
Blumentals Software
www.blumentals.net
User avatar
Karlis
Site Admin
 
Posts: 3598
Joined: Mon Jul 15, 2002 5:24 pm
Location: Riga, Latvia, Europe

Postby syrupcore » Thu Oct 25, 2007 10:26 am

No doubt, for the requirements you set up, the table based code is cleaner/simpler.

Once you get beyond a simple site column frame like we're discussing here, semantic (x)html/CSS starts to really shine. For instance, the blumentals.net menu is currently:

Code: Select all
    <table width="100%" cellspacing="4" cellpadding="4" border="0">
      <tbody><tr>
        <td width="100%" valign="top">
        <table width="100%" cellspacing="0" cellpadding="4" border="0">
    <tbody><tr>
      <td width="100%"><img width="8" height="7" src="http://www.blumentals.net/images/am.gif"/>   
      <a href="index.php" class="menulink">Overview</a></td>
    </tr>
      <tr>
      <td width="100%"><img width="8" height="7" src="http://www.blumentals.net/images/am.gif"/>   
      <a href="features.php" class="menulink">Features</a></td>
    </tr>
      <tr>
      <td width="100%"><img width="8" height="7" src="http://www.blumentals.net/images/am.gif"/>   
      <a href="tour.php" class="menulink"><b>Screenshots</b></a></td>
    </tr>
      <tr>
      <td width="100%"><img width="8" height="7" src="http://www.blumentals.net/images/am.gif"/>   
      <a href="compare.php" class="menulink">Compare</a></td>
    </tr>
      <tr>
      <td width="100%"><img width="8" height="7" src="http://www.blumentals.net/images/am.gif"/>   
      <a href="benefits.php" class="menulink">Benefits</a></td>
    </tr>
      <tr>
      <td width="100%"><img width="8" height="7" src="http://www.blumentals.net/images/am.gif"/>   
      <a href="download.php" class="menulink">Download</a></td>
    </tr>
      <tr>
      <td width="100%"><img width="8" height="7" src="http://www.blumentals.net/images/am.gif"/>   
      <a href="order.php" class="menulink">Purchase</a></td>
    </tr>
      <tr>
      <td width="100%"><img width="8" height="7" src="http://www.blumentals.net/images/am.gif"/>   
      <a href="upgrade.php" class="menulink">Upgrade</a></td>
    </tr>
      <tr>
      <td width="100%"><img width="8" height="7" src="http://www.blumentals.net/images/am.gif"/>   
      <a href="testimonials.php" class="menulink">Testimonials</a></td>
    </tr>
      <tr>
      <td width="100%"><img width="8" height="7" src="http://www.blumentals.net/images/am.gif"/>   
      <a href="faq.php" class="menulink">Support and FAQ</a></td>
    </tr>
      <tr>
      <td width="100%"><img width="8" height="7" src="http://www.blumentals.net/images/am.gif"/>   
      <a href="friend.php" class="menulink">Tell Your Friend</a></td>
    </tr>
  </tbody></table><br/>        </td>
      </tr>
    </tbody></table>


it could be:
Code: Select all
HTML
  <ul id="subnav">
      <li><a href="index.php">Overview</a></li>
      <li><a href="features.php">Features</a></li>
      <li><a href="tour.php">Screenshots</a></li>
      <li><a href="compare.php">Compare</a></li>
      <li><a href="benefits.php">Benefits</a></li>
      <li><a href="download.php">Download</a></li>
      <li><a href="order.php">Purchase</a></li>
      <li><a href="upgrade.php">Upgrade</a></li>
      <li><a href="testimonials.php">Testimonials</a></li>
      <li><a href="faq.php">Support and FAQ</a></li>
      <li><a href="friend.php">Tell Your Friend</a></li>
  </ul>

CSS:
#subnav li{display: block; list-style-type: none; margin: 0; padding: 0;}

#subnav li a{
   background: transparent url(/images/am.gif) 0 50% no-repeat;
   color:#003495;
   font: 11px Tahoma,Verdana,Arial,san-serif;
   padding: 4px 4px 4px 15px;
   text-decoration:none;
}

bonus: css is cached after first page load!


The main problem with table code comes with regard to maintenance. Your display stuff is mixed in with your content. If later you want to change the design, you'll need to edit each page of your site. The non-table version will allow you to change the design on the fly while only editing a single CSS file. For instance, what if you decide you want a fixed width layout? Or, what if you want Sub area to appear first in the browser, say to the left of the Main area? Or below the main area? These changes are trivial with CSS.

I think the ability to change your layout/styling site wide from a single spot is massive and could/should be used a lot more around the web. There are amazing analytics tools around now. Why aren't more people tweaking their websites to respond to analytics data? Or experimenting with small changes to see if they help 'conversions'? Yahoo does this constantly - moving the search box 30 pixels left or changing the order of buttons... All of this can be accomplished very quickly with CSS. Doing it to a table based layout (even in a templated cms system) is cumbersome and doesn't allow site owners to adapt quickly. Most of us "launch" a site and then add/remove entire sections or just let it sit until the next launch. Instead, we should be analyzing, changing, analyzing, changing... A site launch being only part one of an ongoing process - an ongoing process enabled by modern web technologies, CSS in particular.

Then there's accessibility, page-weight (loadtimes/bandwidth costs), source order, nesting, semantics (and related drop in SEO), td styling headaches...

Make the jump Karlis! It's undeniably heartburn inducing at the beginning but once you get over the hump (and there's lots and lots of help out there) you'll see it's the only way to go! Plus, your editor is so damn good at it...

10 cents,
will
User avatar
syrupcore
Top Contributor
 
Posts: 917
Joined: Thu Jul 21, 2005 12:58 am
Location: Portland, Oregon, usa

Postby Karlis » Mon Oct 29, 2007 6:06 pm

About the menu - it is a good one actually, will try to get my hands dirty as time permits :-)
Karlis Blumentals
Blumentals Software
www.blumentals.net
User avatar
Karlis
Site Admin
 
Posts: 3598
Joined: Mon Jul 15, 2002 5:24 pm
Location: Riga, Latvia, Europe


Return to Web Developer Talk

Who is online

Users browsing this forum: No registered users and 11 guests