I need some help in my 2 divs “menu” “main” it will not get inside to the parent which is the content.I hope someone will help me.
#content
{
padding:30px 10px 10px;
position:relative;
background-color:#DCDEE2;
color:yellow;
}
ol#top
{
list-style:none;
margin:-5px -32px;
height:2em;
overflow:hidde;
}
ol#top li {
float: left;
margin: 0 1px 0 0;
}
ol#top a
{
background: url('image/bgtabs.gif')no-repeat scroll 0 -34px transparent;
float:left;
text-decoration: none;
padding:0 0 0 7px;
position:relative;
}
ol#top a span
{
background: url('image/bg_tabs2.gif')no-repeat scroll 100% -34px transparent;
display:block;
float:left;
color:#767676;
font-family: Arial,Helvetica,sans-serif;
font-weight:bold;
float:left;
text-decoration:none;
text-transform:uppercase;
padding:7px 10px 4px 4px;
white-space: no-wrap;
}
ol#top a:hover span
{
color: #BC2A4D;
}
ol#top li
{
font-size:0.85em;
font-weight:bold;
}
#top a:hover
{
background-color:#FFFFFF;
background-position:0 -69px;
}
#top a:hover span
{
background-position:100% -69px;
text-decoration:none;
}
#top #active a
{
background-position: 0 0;
border-bottom: 1px solid #DCDEE2;
}
#top #active a span
{
background-position:100% 0;
padding-bottom:5px;
}
span.corner-top
{
background-image:url('image/corners_left.gif');
background-position:0 0;
margin: -4px -2px 0;
}
span.corner-top span
{
background-image:url('image/corners_right.gif');
background-position:100% 0;
}
span.corner-bottom
{
background-image:url('image/corners_left.gif');
background-position:0 100%;
}
span.corner-bottom span
{
background-image:url('image/corners_left.gif');
background-position:0 100%;
}
span.corner-bottom,
span.corner-top span,
span.corner-top,
span.corner-bottom span
{
background-repeat:no-repeat;
display:block;
height:5px;
line-height:1px;
}
.panel
{
background: url('image/innerbox_bg.gif') repeat-x scroll center top #F3F3F3;
padding: 0;
}
#acp
{
background-color:#FFFFFF;
border:1px solid #999999;
margin:4px 0;
min-width:550px;
padding:3px 1px;
}
#menu
{
border-right:solid 3px #20a7e5;
color:orange;
width:20%;
font-weight:normal;
display:block;
float:left;
padding:0;
position:relative;
}
#menu ul
{
list-style:none;
font-family:Tahoma,Helvetica,sans-serif;
}
#menu li.header
{
display:block;
border-bottom:solid 1px #20a7e5;
text-align:left;
font-weight:bold;
}
#menu li span
{
padding:3px 8px;
}
#main
{
border:solid 1px red;
min-width:76%;
float:left;
margin:0 0 0 3%;
}
body
{
font-size:small;
background:none repeat scroll 0 0 #DBD7D1;
}
<?php
?>
<html>
<head><title>Index</title>
<link href="tabs.css" rel="stylesheet" style="text/css"/>
<style type="text/css">
body
{
font-size:small;
background: none repeat scroll 0 0 #DBD7D1;
}
</style>
</head>
<body>
<ol id="top">
<li id="active"><a href="index.php"><span>General</span></a></li>
<li><a href="page2.php"><span>FORUMS</span></a></li>
<li><a href="page3.php"><span>CUSTOMER</span></a></li>
</ol>
<div id="acp">
<div class="panel">
<span class="corner-top">
<span></span>
</span>
<div id="content">
<div id="menu">
<ul>
<li class="header">Quick Acces</li>
<li><span>Manage users<span></li>
<li><span>Manage posting<span></li>
</ul>
</div>
<div id="main">
This is main
<div>
</div>
<div>
</div>
<body>
</html>
