Hi,
I have there or thereabouts finished a site I am building for a university project, the site functions perfectly fine, albeit with a few layout issues.
Basically I just wanted some tips on how to create a fluid layout, as the website doesn't resize itself depending on the monitor size, so if I grab the browser and drag it in the page would re-arrange to adjust. Is it easy to make this happen?
- Is this through setting min-max attributes in my container?
- My background image is currently 1280 x 1024, should this be changed?
Thanks
My CSS
html {
overflow-x: hidden;
}
body{
background-image: url(images/dahlia.jpg);
background-repeat: no-repeat;
background-position: top center;
background-color:black;
}
/*-------------------Layout------------------*/
#container {
width: 900px;
margin: 0 auto;
}
#header {
width: 900px;
height: 165px;
position: relative;
background-image: url(images/banner.png);
}
#horizontalnav {
width: 900px;
height: 40px;
background-color: #F2D6AF;
}
#leftnav {
padding:10px;
float: left;
width: 210px;
height: 590px;
background-color:#FFFFFF;
}
#body {
float:right;
background-color: #FFFFFF;
width: 670px;
height: 610px;
}
#footer {
height: 50px;
clear: both;
background-color:#a33447;
text-align: center;
}
#hcard {
margin-top:20px;
text-align: left;
color:#000000;
}