Hello there,

 

I have created a basic layout of the design I want to create. But I am confused how to create that design with CSS coding. What I essentially want is that inside the main layer i want three columns one for menu and news other for content and third one for advertisements. But when I create 3 layers inside the main layer they come below each other instead of going in front of each other. I want to show them as this

 

Layer 1 - Layer 2 - Layer 3

 

but it shows as

 

Layer1

Layer2

Layer3

 

they stack against each other but I want them otherwise. I have attached a sample image here

http://tinypic.com/view.php?pic=vfi2ol&s=4

Hi I have limited knowledge but may be able to help you out.

 

First of all you need a wrapper to hold it all in

for exsample

 

#wrapper {

margin: 0 auto;

width: 922px;

}

 

Then you could create the header.

eg.

 

#header {

color: #FFFFFF;

width: 900px; (Edit this so it will look more like you want it too)

float: left;

padding: 10px;

border: 1px solid #DDDDDD;

height: 100px;

margin: 10px 0px 5px 0px;

background: #DDDDDD;

}

 

Then to create the left column

 

#leftcolumn {

color: #FFFFFF;

border: 1px solid #DDDDDD;

background: #DDDDDD;

margin: 0px 5px 5px 0px;

padding: 10px;

height: 350px;

width: 195px;

float: left;-------------This tells where the column should go so left

}

 

then to create the content

#content {

float: left;

color: #DDDDDD;

border: 1px solid #FFFFFF;

background: #DDDDDD;

margin: 0px 5px 5px 0px;

padding: 10px;

height: 350px;

width: 456px;

display: inline;

}

 

Then the right column

 

#rightcolumn {

color: #DDDDDD;

border: 1px solid #FFFFFF;

background: #DDDDDD;

margin: 0px 0px 5px 0px;

padding: 10px;

height: 350px;

width: 195px;

float: left;

position: relative;

}

Then you can import it into you html file

 

To learn css I recommend Htmldog and W3Cschools

Just takes time and patience to learn

 

Cheers

Download my 3 column template from the tutorial section

 

http://www.webdesignerforum.co.uk/index.php?showtopic=13578

 

This will do what you want.