Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    35
    Thanks
    2
    Thanked 0 Times in 0 Posts

    How should I position this div?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    		<title>Untitled Document</title>
            
            <style>
    			/* layout */				
    				#wrapper {
    					width: 700px;
    					margin: 0px auto;
    					border: 1px solid;
    				}
    				
    				
    				#sidebar {
    					width: 150px;
    					border: 1px solid;
    				}
    				
    				#navbar {
    					flaot: left;
    				}
    				
    				#main{
    					float: right;
    				}
    				
    				
    				
    	
    			
    		</style>
    </head>
    
    <body>
    		<div id="wrapper">
                
                        
            
                        <div id="sidebar">
                            
                                <ul id="navbar">
                                
                                            <li><a href="#">Home</a></li>
                                            <li><a href="#">Rates</a></li>
                                            <li><a href="#">Portfolio</a></li>
                                            <li><a href="#">Contact</a></li>
                                
                                </ul>
                                
                        </div>
                        
                        <div id="main">
                        	<p> Main Content Here </p>
                        </div>
                       
    		</div>
    </body>
    </html>
    I float the "sidebar" div to the left of the wrapper, and that positions it fine. I now want to position the "main" div to the RIGHT of the wrapper, but when i float it, it falls outside of the whole wrapper div.

    How do i fix this so that the "main" div floats properly to the right of the wrapper.

    Thanks

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Apart form the mis-spelling of float I assume you meant to float the 'sidebar' rather than the 'navbar' (as indicated in your post). Although you could also float the navbar within the sidebar if you want.

    Once you've added float to the sidebar you will also need to add another 'div' after your main div with the css property 'clear: both;' - otherwise the wrapper div will collapse and have no height.

    Or, if you prefer, you could give your wrapper a height.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    New Coder
    Join Date
    May 2011
    Posts
    35
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Why does the wrapper div collapse? Is there a way i can stop the collapse without having to add another div and without setting a height?

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    The collapsing of a div containing floated elements is a known issue.

    You could float the wrapper div as well to resolve this but then you'll need other css properties (and perhaps another div ?) to get it centred again.

    Or add 'overflow: auto' to the wrapper. You might then also need to add 'overflow: hidden' to its children to prevent scrollbars appearing within them.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Posting Permissions

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