Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS question

Status
Not open for further replies.

webslinga

Programmer
Jun 20, 2006
55
0
0
US
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;
}

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
 
you sir, are a genius. It worked. Thank you.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top