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 Chriss Miller 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
Joined
Jun 20, 2006
Messages
55
Location
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
 

Here's a good article outlining the woes of containers and elements floating in them -- and offers a good list of solutions.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
you sir, are a genius. It worked. Thank you.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top