2 Divs problem

HTML & CSS
1

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>
2

Add this to your CSS:

.panel, #content {overflow:hidden;}

When elements are floated, they hang out of their container unless you force the container to wrap around them. overflow: hidden is the easiest way. :slight_smile:

3

Wow perfect! Thank you Ralph you are so good and thank you also for letting me know about this overflow.I thought that when we use the Overflow:hidden; it will hide the scroll bars…by the ways where should i read this overflow can you please give me some link.i want to read this.Thank you again.

4

Here’s an explanation of the situation: http://pageaffairs.com/web/css/containing-floats/

5

Thank you it helps. :slight_smile: