Hello,
I built this Layout, but it's not permanent/fixed. If somebody has
an old computer screen, the columns that make up the layout get shoved
around. You can just make the browser window smaller and will see this.
http://www.jensreulecke.com/tmp/index.html
How can I fix this?
Here is the CSS Code for the layout:
}
#header {
color: #000;
width: 930px;
float: left;
padding: 10px;
border: 0px solid #000;
height: 180px;
margin: 0px 0px 0px 0px;
background: #fff;
}
/*
890 px total for mid columns
*/
#leftcolumn {
color: #333;
border: 0px solid #000;
background: #E7DBD5;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 350px;
width: 150px;
float: left;
}
#content {
float: left;
color: #333;
border: 0px solid #000;
background: #F2F2E6;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 350px;
width: 370px;
display: inline;
}
#rightcolumn {
color: #333;
border: 0px solid #000;
background: #E7DBD5;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 350px;
width:370px;
float: left;
}
#footer {
width: 930px;
clear: both;
color: #333;
border: 0px solid #000;
background: #b32727;
margin: 0px 0px 0px 0px;
padding: 10px;
}
Wrap the entire page in a
Wrap the entire page in a div, e.g. <div id="wrapper">...</div>, and give it a width.
cheers,
gary
Thanks Gary, but if you check
Thanks Gary,
but if you check http://jensreulecke.com/tmp/ you see that if you adjust the window, the columns still move around. I guess they aren't fixed or maybe because I have them align by "floating"? How can I make them permanent?
#leftcolumn {
color: #333;
border: 0px solid #000;
background: #E7DBD5;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 350px;
width: 150px;
float: left;
}
#content {
color: #333;
border: 0px solid #000;
background: #F2F2E6;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 350px;
width: 370px;
float: left;
}
#rightcolumn {
color: #333;
border: 0px solid #000;
background: #E7DBD5;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 350px;
width:370px;
float: left;
Do as I said. cheers, gary
Do as I said.
cheers,
gary
