SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: 2 Divs problem

  1. #1
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    2 Divs problem

    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>
    Last edited by ralph.m; Aug 31, 2012 at 15:32. Reason: code tags

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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.

  3. #3
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Here's an explanation of the situation: http://pageaffairs.com/web/css/containing-floats/

  5. #5
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Here's an explanation of the situation: http://pageaffairs.com/web/css/containing-floats/
    Thank you it helps.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •