Log in

View Full Version : Problem with CSS Liquid Layout #2.1- (Fixed-Fluid)


timjs
12-07-2006, 04:01 PM
Hi.

My first post, be nice!

I'm having trouble with the CSS Liquid Layout #2.1- (Fixed-Fluid) (http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/).

I have a table in the contentcolumn / innertube area that I would like to stretch to the full available width in that area. To achieve this I have set the table's width attribute to 100%. This works fine, until I begin to narrow the window's width. The left column begins to creep to the right as I narrow the window beyond a certain point. This point is the minimum width that the table can collapse to, based on the contents of its cells.

The problem happens in IE6, not in FF.

I dont want the left column to creep.

Does anyone have a solution to this?

Here is my code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">

body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}


#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin-left: 200px; /*Set left margin to LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

</style>
</head>
<body>
<div id="maincontainer">
<div id="topsection">
<div class="innertube">
<h1>Stuff</h1>
</div>
</div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">
<table width="100%" border="1px">
<tr>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
</tr>
</table>
</div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube">
<p>stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff </p>
<p>stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff </p>
<p>stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff </p>
</div>
</div>
<div id="footer">
<p>stuff</p>
</div>
</div>
</body>
</html>

I hope someone can help!

Thanks,

Tim
GhettoT
12-07-2006, 07:32 PM
One comment i would like to make (because i like my code be all organized.), is why not make a file called fixed-fluid.css and put

body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}


#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin-left: 200px; /*Set left margin to LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
} in that file then in the HTML put:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<link rel="stylesheet" type="text/css" href="PATH/TO/fixed-fluid.css" />

Now, to answer your question, I had the same problem in a page i was working on. The quick and easy solution i found was to instead of using a size% use size in pixels ([SIZE]px). And that should fix the problem in IE. In FireFox there is no problem, right?

-GT
timjs
12-08-2006, 11:50 AM
Thanks for the response, GT.

I want the table to stretch to fit the available space. If the table has a fixed width (which is what I presume you are saying I should set to a fixed width) then it will not stretch.

How can I get the table to stretch, without the anomoly when the window is resized to a width that is thinner than the thinnest the table can collapse to?

The problem is in IE6. Not in FF.