3 replies [Last post]
d_raghu9
Offline
newbie
Last seen: 14 years 6 days ago
Joined: 2007-11-27
Posts: 2
Points: 0

Hi,

i am relatively new to css...would like to understand how css layout works. The following is my code whch does not seem to be working

Can someone tell me what is wrong with it. I am trying to create a 3 column css layout.
1st column will hold a image of shade, so as 3rd column.
2nd column will hold the actual website content.

Here is the css

body {
font-family: Arial, Helvetica, sans-serif;
margin-top: 10px;
font-size: 10px;
color: black;
}

#container{
width: 900px;
height: 100%;
border: solid 1px black;
}

#leftshade{
background: url(../images/leftshade.jpg);
width: 15px;
height: 100%;
float: left;
vertical-align: top;
}

#middle{
width: 863px;
height: 100%;
background: white;
border: solid 1px black;

}
#rightshade{
position: relative;
background: url(../images/rightshade.jpg);
width: 15px;
height: 100%;
float: right;

}

and here is the HTML


TEST





 


 dafdfdsf


 







can someone let me know where i am going wrong.....any help much appreciated.

Cheers
Raghu

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 2 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Welcome to the forum,

Welcome to the forum, Raghu.

Please read the stickies at the top of each forum. Among them will be an explanation of how to post your css and html code.

Your following all the instructions will make it easier for us to help you. Not following the instructions will cause the lazy among us (the vast majority) to ignore your quest for help.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

d_raghu9
Offline
newbie
Last seen: 14 years 6 days ago
Joined: 2007-11-27
Posts: 2
Points: 0

Hi thanks for the advice

Hi thanks for the advice gary...just did accordingly....any help much appreciated..

Cheers
Raghu

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 2 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

To begin: It is very

To begin:

  • It is very difficult to use css with empty elements. Use dummy text, eg. Lorem ipsum, if actual content isn't available.
  • You must get into the habit of using a complete and proper strict DTD on every document. Browsers use the DTD to trigger standards, near-standards or quirks mode. Only in standards mode is there any hope of achieving cross-browser compatibility. IE still sucks, but we all learn to deal with its shortcomings.
  • Study §9.5, Visual formatting model for how floats work. This is critical to css positioning.
    • Both float columns must precede the non-float center column in the source.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.