0

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;

}
2
Contributors
1
Reply
2
Views
6 Years
Discussion Span
Last Post by Arkinder
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.