css beginners first question

[linux1880]

dear frens

while creating divs, should i create like header divs first and then body divs and footer div

or I should create one div and create all the divs inside it ?

Thanks

[Nilsy]

It is good practice to have a container div that hold all other divs like header, content, footer, ect. this way you will have less problems when trying to position other divs as they will be resticted by your outer container div some people call them wrapper divs (you can call it what you want really, however it is better to stick to what other people will recognize)
.

[linux1880]

Thank you so much Nilsy,

I made a container div and used ap divs inside it, however i have seen in other posts in this forum that it's not good to use ap divs.

Now the problem is, when i use divs only it gets so diificult to position, is there a special trick in positioning default divs ?

Thanks

[Nilsy]

when positioning divs you should always position them from left to right with regards to columns and on the style sheet they should be in the same order. most of the divs should float left in some cases like a three column layout then the third column from the left should float right.
if you do have a two or three column layout then it may be better to have them in a container of there own.



<div id=container>

<div id=header> </div>

<div id=main>

<div id=column1> </div>

<div id=column2> </div>

<div id=column3> </div>

</div>

<div id=footer> </div>



</div>

[linux1880]

Thank you nilsy, i did assign the following CSS to the above divs but absolutely mess came while doing with dreamweaver, i am not getting it why it's so hard with statc divs


#container {
background-color: #CCC;

}
#header{
background-color: #666;


#main {
background-color:#09C;
float:left;

}

#column1 {
background-color:#C00;
float:right;

}

#column2{
background:#069;


}

#column3{
background:#069;

}

#footer{
background:#069;


}

[Snookerman]

Close this one:

#header{
background-color: #666;
}

[Nilsy]

Try this


#header{
background-color: #666;
float:left;
width:600px;
}


#main {
background-color:#09C;
float:left;
width:600px;

}

#column1 {
background-color:#C00;
float:left;
width:200px;



}

#column2{
background:#069;
float:left;
width:200px;


}

#column3{
background:#069;
float:right;
width:200px;

}

#footer{
background:#069;
float:left;
width:600px;


}

[linux1880]

Thank you nilsy,

does <container> div does not have to be specified anything ? i did add the tags below to centrally align the whole thing but did not work.


#container{
margin:auto;
padding:auto;

}

also i did not understand why do we need to float all the divs to left ? Is it not the default structure ? Thank you

[Nilsy]

the container div must also float left, this is a good site that explains its use in more detail:

http://www.digital-web.com/articles/web_design_101_floats/