[SOLVED] Div issue (newbie to CSS)

[Chezshire]

Hello everyone, and thanks in advance to anyone who can offer some assistance with my div issue. I'm a college student (so i'm very much a newbie here) and I'm trying to build my css template which I will then use to convert my table based layout to a css based design. Currently i'm having a problem getting the divs to work in the header portion of the layout (everything else is workin ok at the moment - although I'm sure there is always room for improvement ) And before anyone asks, I would ask my teacher for help but i'm down with the flu and can't go to class and I'm trying not to fall behind -- so any help is very much appreciated).

 

WHAT I'M TRYING TO DO EXACTLY:

I'm trying to create three boxes (divs) in the header portion of my layout. Within the header div, I want to position the three following boxes as so:

 

[*]#Indicia :: I want this to be position to the left with a total width of 200pxs and a height of 230 pixels (This is working - yeah for me!)

#Banner :: I want to position this to the upper right, with a total of 700pxs and a total height of 130pxs.

#navigation :: I want to position this to the bottom right of the header div. I want it have a total width of 700pxs and a total height of 20pxs.

[*]

 

A mock up of what I'm hoping to ultimately build can be seen here (it's rough, i'll be making some design adjustments etc - but i did do everything down to the logo art so thats kind of kewl): http://xpg.us/xSCC/xFinalP/dinnersforsinners/index.php

 

Current template file i'm working on can be viewed here: http://xpg.us/xSCC/xFinalP/dinnersforsinners/template/index.html

 

MY CODE:

dfs_divs.css:

 
* { 
padding: 0; 
margin: 0; 
}

#wrapper { 
width: 900px;
margin: 0 auto;
}

#header {
background-color:#ccc8b3;

width: 900px; 
height: 230px;

margin: 0px;
border: 0px;
padding: 0px;

float: left;
}

#indicia {
background-color:#fff;

width: 200px; 
height: 230px;

margin: 0px;
border: 0px;
padding: 0px;

float: left;
}

#banner { 
background: #555;
width: 700px;
height: 200px;

margin: 0px;
padding: 0px;
border: 0px;

float: right;
display: inline;
}

#navigation { 
background: #f00;
width: 700px;
height: 30px;

margin: 0px;
padding: 0px;
border: 0px;

float: right;
display: inline;
}

#leftcolumn { 
background: #aa9f4e;

width: 200px;
height: 350px;

margin: 0px;
border: 0px;

float: left;
}

#rightcolumn { 
background: #fffff1;
width: 680px;
height: 330px;

margin: 0px;
padding: 10px;
border: 0px;

float: right;
display: inline;
}

#footer { 
width: 900px;
height: 30px;

background-color:#f3f2ed;

border: 0px;
margin: 0px;
padding: 0px;

clear: both;
}

#login {
width: 200px;
height: 30px;
background-color:#432;

border: 0px;
margin: 0px;
padding: 0px;

float: left;
}

div.login {
min-height: 30px;
display: table-cell;
vertical-align: middle;
}

#legal {
text-align: center;

width: 700px;
height: 30px;
background-color:#432;

border: 0px;
margin: 0px;
padding: 0px;

float: right;
display: inline;
}

[Chezshire]

Problem solved -- I mislabeled on of my divs (duh). I'm a newb. Thank you to those who looked at my problem and were considering answers.