SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: 2 Divs problem

Threaded View

  1. #1
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,005
    Mentioned
    0 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


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
  •