PDA

View Full Version : 2 columns fluid layout



Uzair
Feb 11th, 2010, 09:30 AM
Hi Experts,

I am trying to create a 2 columns CSS layout.

left column is 147px wide & right one is 773px wide.
In the right column, I again have 2 columns, of which left column has 601px width & right column has 147px width. I want the column with 601px a fluid one.

I tried to remove the width of that column & its parent column but the whole area went below the left column (147px). Please suggest me how can I make that fluid.

Thanks.

Excavator
Feb 11th, 2010, 10:59 AM
Hello Uzair,

When you remove its width that right column will expand to all the area available to it. Margining over the width of your float will bring it up next to your other column.

Here is an example of a simple 2 column layout (http://nopeople.com/CSS/simple_2-column/index.html) with only one float.

Hope that helps.

Uzair
Feb 11th, 2010, 11:52 AM
If I don't specify the width of the right column, then I can't use the block level elements like P in it.

Excavator
Feb 11th, 2010, 05:39 PM
If I don't specify the width of the right column, then I can't use the block level elements like P in it.

I'm not sure I get that, I must be missing something.
Why not?

Did you look at that demo? There is h_, p and a dl ... lots of stuff in that right column that has no width.

Try this -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100% "Comic Sans MS";
background: #FC6;
}
* {
margin: 0;
padding: 0;
border: 0;
}
#container {
width: 920px;
margin: 0 auto;
}
#head {
height: 100px;
background: #000;
}
#left {
height: 400px;
width: 147px;
float: left;
background: #0f0;
}
#main {
height: 400px;
margin: 0 0 0 147px;
background: #999;
}
#insideLeft {
height: 300px;
width: 601px;
float: left;
margin: 0 0 0 0;
background: #6fc;
}
#right {
height: 300px;
margin: 0 0 0 601px;
background: #cfc;
}
</style>
</head>
<body>
<div id="container">
<div id="head"><p>Header</p></div>
<div id="left"><p>Left</p></div>
<div id="main">
<h1>Main</h1>
<div id="insideLeft"><p>inside left</p></div>
<div id="right"><p>inside right</p></div>
<!--end main--></div>
<!--end container--></div>
</body>
</html>

Uzair
Feb 12th, 2010, 07:57 AM
Yes, it works... but only when we give fixed width.

I changed it a little & you will notice that the inside right (gray column) now has moved below the Lorum Ipsum. I removed the width of #container & #insideLeft.

See this...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100% "Comic Sans MS";
background: #FC6;
}
* {
margin: 0;
padding: 0;
border: 0;
}
#container {
/*width: 920px;*/
margin: 0 auto;
}
#head {
height: 100px;
background: #000;
}
#left {
height: 400px;
width: 147px;
float: left;
background: #0f0;
}
#main {
height: 400px;
margin: 0 0 0 147px;
background: #999;
}
#insideLeft {
height: 300px;
/*width: 601px;*/
float: left;
margin: 0 0 0 0;
background: #6fc;
}
#right {
height: 300px;
width: 147px;
background: #cfc;
}
</style>
</head>
<body>
<div id="container">
<div id="head"><p>Header</p></div>
<div id="left"><p>Left</p></div>
<div id="main">
<div id="insideLeft"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultrices bibendum metus, vitae laoreet felis ornare id. Morbi vel orci ut quam mollis interdum pretium ut orci.</p></div>
<div id="right"><p>inside right</p></div>
</div>
</div>
</body>
</html>

Excavator
Feb 12th, 2010, 05:19 PM
Yes, it works... but only when we give fixed width.

I changed it a little & you will notice that the inside right (gray column) now has moved below the Lorum Ipsum. I removed the width of #container & #insideLeft.

For #right and #insideLeft to sit side by side, one of them is going to have to be floated. To float things, you need to give them a width. Figure out which one you want to float and remove the width from the other one.
You also need a margin to allow for the width of the float.

In your example, I put the float on #right and swapped the ordr in the markup. Have a look at this -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100% "Comic Sans MS";
background: #FC6;
}
* {
margin: 0;
padding: 0;
border: 0;
}
#container {
/*width: 920px;*/
margin: 0 auto;
}
#head {
height: 100px;
background: #000;
}
#left {
height: 400px;
width: 147px;
float: left;
background: #0f0;
}
#main {
height: 400px;
margin: 0 0 0 147px;
background: #999;
}
#insideLeft {
height: 300px;
margin: 0 147px 0 0;
background: #6fc;
}
#right {
height: 300px;
width: 147px;
float: right;
background: #cfc;
}
</style>
</head>
<body>
<div id="container">
<div id="head"><p>Header</p></div>
<div id="left"><p>Left</p></div>
<div id="main">
<div id="right"><p>inside right</p></div>
<div id="insideLeft"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultrices bibendum metus, vitae laoreet felis ornare id. Morbi vel orci ut quam mollis interdum pretium ut orci.</p></div>
</div>
</div>
</body>
</html>