Hello all,
I am having a problem with a CSS layout. I would like to have a webpage with a banner, top navigational links, a left column and a right column. I need those two content encapsulated within a div tag called main. The only problem is I cannot get them to both sit nicely in that main box. Please have a look:
[css]
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin: 0; padding: 0; }
a img,:link img,:visited img { border: none; }
a
{ text-decoration: none; }
a:hover
{ text-decoration: underline; }
body
{
border: 1px solid black;
margin: 30px;
background-color: #e7e78e;
}
td
{
margin: 30px;
padding: 0px;
font-family: Arial, Verdana, sans-serif;
font-size: 11px;
background-color: #fff;
}
/***************************************************/
/******************CSS Classes**********************/
.header
{
margin: 5px;
border: 1px solid black;
height: 100px;
}
.footer
{
}
.main
{
border: 1px solid black;
margin: 5px;
}
.welcome
{
float: left;
border: 1px solid black;
margin: 5px;
width: 75%;
background-color: #e78a27;
}
.whats_new
{
float: left;
border: 1px solid black;
margin: 5px;
width: 23%;
}
.top_menu
{
border: 1px solid black;
margin: 5px;
padding: 5px;
background-color: #ba7428;
}
#links
{
border: 1px solid black;
margin: 5px;
padding: 5px;
}
.backdrop
{
background-color: #e4e426;
}
I am having a problem with a CSS layout. I would like to have a webpage with a banner, top navigational links, a left column and a right column. I need those two content encapsulated within a div tag called main. The only problem is I cannot get them to both sit nicely in that main box. Please have a look:
[css]
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin: 0; padding: 0; }
a img,:link img,:visited img { border: none; }
a
{ text-decoration: none; }
a:hover
{ text-decoration: underline; }
body
{
border: 1px solid black;
margin: 30px;
background-color: #e7e78e;
}
td
{
margin: 30px;
padding: 0px;
font-family: Arial, Verdana, sans-serif;
font-size: 11px;
background-color: #fff;
}
/***************************************************/
/******************CSS Classes**********************/
.header
{
margin: 5px;
border: 1px solid black;
height: 100px;
}
.footer
{
}
.main
{
border: 1px solid black;
margin: 5px;
}
.welcome
{
float: left;
border: 1px solid black;
margin: 5px;
width: 75%;
background-color: #e78a27;
}
.whats_new
{
float: left;
border: 1px solid black;
margin: 5px;
width: 23%;
}
.top_menu
{
border: 1px solid black;
margin: 5px;
padding: 5px;
background-color: #ba7428;
}
#links
{
border: 1px solid black;
margin: 5px;
padding: 5px;
}
.backdrop
{
background-color: #e4e426;
}
HTML:
<div class="header">This is where the banner should go</div>
<div class="top_menu">Professional | Bio | Weblog | Projects</div>
<div class="main">
<div class="welcome"><?php echo 'Content goes in here'; ?></div>
<div class="whats_new">This is what's new</div>
</div>
Please let me know what I am doing wrong