2 Divs problem

**jemz** · Aug 31, 2012 10:04

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.

Code:

#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;
 }

Code:

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

**ralph.m** · Aug 31, 2012 15:32

Add this to your CSS:

Code:

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

**jemz** · Aug 31, 2012 16:23

Originally Posted by ralph.m

Add this to your CSS:

Code:

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

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.

**ralph.m** · Aug 31, 2012 20:05

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

**jemz** · Sep 2, 2012 11:18

Originally Posted by ralph.m

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

Thank you it helps.

User Tag List

Thread: 2 Divs problem

Thread Tools

Display

2 Divs problem

Bookmarks

Bookmarks

Posting Permissions