3 replies [Last post]
oezil
oezil's picture
User offline. Last seen 1 year 21 weeks ago. Offline
newbie
Timezone: GMT-4
Joined: 2010-08-20
Posts: 5
Points: 8

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;

}

gary.turner
gary.turner's picture
User offline. Last seen 2 hours 38 min ago. Offline
rank Moderator
Moderator
Timezone: GMT-6
Joined: 2004-06-25
Posts: 7695
Points: 1511

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

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

oezil
oezil's picture
User offline. Last seen 1 year 21 weeks ago. Offline
newbie
Timezone: GMT-4
Joined: 2010-08-20
Posts: 5
Points: 8

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;

gary.turner
gary.turner's picture
User offline. Last seen 2 hours 38 min ago. Offline
rank Moderator
Moderator
Timezone: GMT-6
Joined: 2004-06-25
Posts: 7695
Points: 1511

Do as I said. cheers, gary

Do as I said.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.