...

View Full Version : css with fluid and fixed layout



kamkam
08-02-2011, 01:36 AM
Hi;

I am trying to make my header&content&footer as fluid, the rest of are fixed, but my code does not work, the header&content&footer are not fluid, could anyone help. Thanks.


main.css


* { padding: 0; margin: 0; }

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 922px;
}
#header {
color: #333;
width:97%;
float: left;
padding: 10px;
border: 1px solid #ccc;
height: 100px;
margin: 10px 0px 5px 0px;
background: #E7DBD5;
}

#leftcolumn {
color: #333;
border: 1px solid #ccc;
background: #E7DBD5;
margin: 0px 5px 5px 0px;
padding: 10px;
height: 350px;
width: 195px;
float: left;
}
#content {
float: left;
color: #333;
border: 1px solid #ccc;
background: #F2F2E6;
margin: 0px 5px 5px 0px;
padding: 10px;
height: 350px;
width: 49%;

}
#rightcolumn {
color: #333;
border: 1px solid #ccc;
background: #E7DBD5;
margin: 0px 0px 5px 0px;
padding: 10px;
height: 350px;
width: 195px;
float: left;
}
#footer {
width: 97%;
clear: both;
color: #333;
border: 1px solid #ccc;
background: #BD9C8C;
margin: 0px 0px 10px 0px;
padding: 10px;
}


html


<!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=iso-8859-1" />
<title>Fixed Width CSS Layouts - 3 Column - fw-37-3-col</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body>

<!-- Begin Wrapper -->
<div id="wrapper">

<!-- Begin Header -->
<div id="header">

This is the Header

</div>
<!-- End Header -->


<!-- Begin Left Column -->
<div id="leftcolumn">

Left Column

</div>
<!-- End Left Column -->

<!-- Begin Content Column -->
<div id="content">

Content

</div>
<!-- End Content Column -->

<!-- Begin Right Column -->
<div id="rightcolumn">

Right Column

</div>
<!-- End Right Column -->

<!-- Begin Footer -->
<div id="footer">

This is the Footer

</div>
<!-- End Footer -->

</div>
<!-- End Wrapper -->

</body>
</html>

vikram1vicky
08-02-2011, 07:56 AM
Hi;

I am trying to make my header&content&footer as fluid, the rest of are fixed, but my code does not work, the header&content&footer are not fluid, could anyone help. Thanks.



Dont define width of wrapper, if you want to make it fluid...

kamkam
08-02-2011, 08:06 AM
I changed it, but it does not chnage anything.




* { padding: 0; margin: 0; }

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}

#header {
color: #333;
width:97%;
float: left;
padding: 10px;
border: 1px solid #ccc;
height: 100px;
margin: 10px 0px 5px 0px;
background: #E7DBD5;
}

#leftcolumn {
color: #333;
border: 1px solid #ccc;
background: #E7DBD5;
margin: 0px 5px 5px 0px;
padding: 10px;
height: 350px;
width: 195px;
float: left;
}
#content {
float: left;
color: #333;
border: 1px solid #ccc;
background: #F2F2E6;
margin: 0px 5px 5px 0px;
padding: 10px;
height: 350px;
width: 65%;

}
#rightcolumn {
color: #333;
border: 1px solid #ccc;
background: #E7DBD5;
margin: 0px 0px 5px 0px;
padding: 10px;
height: 350px;
width: 195px;
float: left;
}
#footer {
width: 97%;
clear: both;
color: #333;
border: 1px solid #ccc;
background: #BD9C8C;
margin: 0px 0px 10px 0px;
padding: 10px;
}

vikram1vicky
08-02-2011, 08:15 AM
share mockup of desired layout...

kamkam
08-02-2011, 09:06 AM
Sorry, i can not get what you mean ?

vikram1vicky
08-02-2011, 10:13 AM
create a image of layout you want and share



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum