Advanced Search

Results 1 to 3 of 3

Thread: Problem with CSS Liquid Layout #2.1- (Fixed-Fluid)

  1. #1
    Join Date
    Dec 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Problem with CSS Liquid Layout #2.1- (Fixed-Fluid)

    Hi.

    My first post, be nice!

    I'm having trouble with the CSS Liquid Layout #2.1- (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:
    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
    Last edited by timjs; 12-07-2006 at 03:12 PM.

  2. #2
    Join Date
    Nov 2006
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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
    Code:
    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:
    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>
    <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

  3. #3
    Join Date
    Dec 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •