CSS liquid width , min-width issue

Hello forums please advice me on my liquid width layout. Basically I have two columns . Left is for navigation and right is for contents. I need the left content to be 15% width but will have a min width of 145px. However when I resize the browser the right content clears to the bottom heres what I have:

#nav{
float:left;
width: 15%;
min-width:145px;
background-color:#669999;
}

#content
{float:left;
 width: 83%;
 margin-left: 1%;
 background-color:#CCFF00;
 }

I’m trying to do something like the wordpress admin panel layout . Any help will be greatly appreciated. Thanks

@Alex yes you’re right making the nav/sidebar dynamic isn’t a good idea. Thanks

@Paul that code is looking good no more float for the content div. though havn’t tried it yet for mobile browsing.

I won’t be needing any IE6 hack as the project is a CRM and I will ban IE6 and IE7 from accessing the app (For security reasons).

Thanks

It won’t work beacause 145px + 86% will only equal 100% at one exact pixel point and therefore the float will drop as soon as 86% +145px is greater than 100%.

You could make the columns overlap with negative margins but that wouldn’t be too neat.

The best way is as Alex said and not to size the right column but just have the left column at 15% (width a min-width of 145px and the right column can be fluid).

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
    margin:0;
    padding:0;
}
ul {
    margin:0;
    list-style:none;
    padding:0
}
#nav {
    float:left;
    width: 15%;
    min-width:145px;
    background:#699;
    margin-right:1%;
}
#content {
    background:#CF0;
    overflow:hidden;
    min-height:0;
}
* html #content {
    height:1%;
    overflow:visible;
}
</style>
</head>
<body>
<ul id="nav">
    <li>lorem ipsum text goes here etc. lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc. </li>
    <li>lorem ipsum text goes here etc. lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc. </li>
    <li>lorem ipsum text goes here etc. lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc. </li>
    <li>lorem ipsum text goes here etc. lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc. </li>
    <li>lorem ipsum text goes here etc. lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc. </li>
    <li>lorem ipsum text goes here etc. lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc. </li>
    <li>lorem ipsum text goes here etc. lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc. </li>
</ul>
<div id="content">
    <p>lorem ipsum text goes here etc. lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc. lorem ipsum text goes here etc. lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc. lorem ipsum text goes here etc. lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc. </p>
    <p>lorem ipsum text goes here etc. lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc. lorem ipsum text goes here etc. lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc. lorem ipsum text goes here etc. lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc. </p>
    <p>lorem ipsum text goes here etc. lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc. lorem ipsum text goes here etc. lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc. lorem ipsum text goes here etc. lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc. </p>
    <p>lorem ipsum text goes here etc. lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc. lorem ipsum text goes here etc. lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc. lorem ipsum text goes here etc. lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc.lorem ipsum text goes here etc. </p>
</div>
</body>
</html>


(Ignoring IE6 of course which would need the min-width hacks if support is needed.)

In my experience it is best to fix the width of the sidebar permanently and make the content area stretch. If I were you, I’d not even try to make the “#nav” dynamic width. (I’d also rename “#nav” to “#sidebar” since it should actually contain the #nav. [and possibly other things as well] I’d also rename the contained “#nav” [presumably a UL] to “#mainMenu” – but that’s all preference)

Here is an example of how I would approach this in a semi-fluid (min/max) layout: http://battletech.hopto.org/html_tutorials/baselines/threeColumnSemiFluidMaxHeight/template.html That example is fairly easily modified into two columns.

As for making the sidebar itself have a 15% dynamic width with a fixed minimum – we’ll have to wait and see if anyone else can advise you on how to make that work.

Personally I advise against even having percentage widths on columns at all - with IE’s 3 pixel perfect float bug (best solved by floating both columns the same direction and putting a negative right margin on the second column) and Firefox’s being a retard about calculating fractions, it’s just too prone to breakage.

This is why I would fix the side column width in PX and not % (or EM for that matter) and then margin the content. I’ve seen WAY too many broken layouts from people trying to use percents on columns. IT JUST DOESN’T WORK.