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,096
    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,117
    Mentioned
    448 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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,096
    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,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Here's an explanation of the situation: http://pageaffairs.com/web/css/containing-floats/
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,096
    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
  •