PDA

View Full Version : css fixed width problem



skullomaniac
Jan 27th, 2009, 04:28 PM
hey ppl
im not the classic leecher i promise i'll keep posting
that having been said...

this is the css code so far

why doesn't the page display properly??

* { padding: 0; margin: 0; }


body {

font-family: Arial, Helvetica, sans-serif;

font-size: 13px;
}

#wrapper {

margin: 0 auto;

width: 900px;

}

#header {

color: #333;

width: 900px;

float: left;

padding: 10px;

border: 1px solid #ccc;

height: 100px;

margin: 10px 0px 0px 0px;

background: #BD9C8C;
}

#leftcolumn {

color: #333;

border: 1px solid #ccc;

background: #E7DBD5;

margin: 0px 0px 0px 0px;

padding: 10px;

height: 250px;

width: 210px;

float: left;


}

#leftmiddle {

color: #333;

border: 1px solid #ccc;

background: #F2F2E6;

margin: 0px 0px 0px 0px;

padding: 10px;

height: 250px;

width: 210px;

float: left;

}

#rightmiddle {

color: #333;

border: 1px solid #ccc;

background: #E7DBD5;

margin: 0px 0px 0px 0px;

padding: 10px;

height: 250px;

width: 210px;

float: left;


}

#rightcolumn {

color: #333;

border: 1px solid #ccc;

background: #F2F2E6;

margin: 0px 0px 0px 0px;

padding: 10px;

height: 250px;

width: 210px;

float: left;


}

#footer {

width: 900px;

clear: both;

color: #333;

border: 1px solid #ccc;

background: #BD9C8C;

margin: 0px 0px 10px 0px;

padding: 10px;

}


#c_header1 {
background-image: url(images/c1_bar.jpg);
background-repeat: no-repeat;
text-align: center;
position: absolute;
width:232px;
height:45px;
left:379px;
top: 132px;
border:0px;
margin:0px;


}

#c_header2 {
background-image: url(images/c1_bar.jpg);
background-repeat: no-repeat;
text-align: center;
position: absolute;
width:232px;
height:45px;
left:611px;
top: 132px;
border:0px;
margin:0px;


}

#c_header3 {
background-image: url(images/c1_bar.jpg);
background-repeat: no-repeat;
text-align: center;
position: absolute;
width:232px;
height:45px;
left:843px;
top: 132px;
border:0px;
margin:0px;


}

#c_header4 {
background-image: url(images/c1_bar.jpg);
background-repeat: no-repeat;
text-align: center;
position: absolute;
width:232px;
height:45px;
left:1075px;
top: 132px;
border:0px;
margin:0px;


}

jcdevelopment
Jan 27th, 2009, 04:37 PM
dont use position absolute.

Use paddings and margins when you want to display or position something. It wont look correct in other browsers.

Is there a reason you are using them?

jerry62704
Jan 27th, 2009, 04:58 PM
Do you have a link we could look at?

You should edit your first post and change the "quote" tag to "code" at the top and bottom.

Excavator
Jan 27th, 2009, 05:07 PM
Hello skullomaniac,
Yes, absolute positioning can cause more trouble than it's worth. That doesn't mean we should never use it though. Have a look at http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/

Here's a link to a 4column layout for some ideas: http://csstinderbox.raykonline.com/demos/fixed-3-4c/index.html

skullomaniac
Jan 27th, 2009, 05:08 PM
dont use position absolute.

Use paddings and margins when you want to display or position something. It wont look correct in other browsers.

Is there a reason you are using them?

ok thanks for the info...
anyways there is no particular reason why i'm using position absolute

i'll try to mak changes and post results again...

EDIT: hey excavator, the css example you gave me is really handy! thanks alot buddy!!