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 3 of 3
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts

    overlapping div boxes

    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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    
    #wrapper
    {margin: 0em 0cm 0cm 0cm
    top:0;
    padding:5px;
    background-color: green;}
    
    #topnav
    {float: right;
    width: 25%;
    padding:5px;
    background-color: black;}
    
    #navaftlogo
    {float: left;
    width: 25%;
    padding:5px;
    background-color: blue;}
    
    #logo
    {padding:5px;
    background-color: purple;}
    
    #leftcol
    {padding:5px;
    background-color: yellow;}
    
    #midcol
    {padding:5px;
    background-color: orange;}
    
    #rightcol
    {padding:5px;
    background-color: brown;}
    
    </style>
    
    </head>
    
    <body>
    
    <div id='wrapper'>
    <h1>Lorem ipsum</h1>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec magna dui. Pellentesque pharetra lorem nec massa dapibus eleifend. Duis facilisis, urna vulputate eleifend cursus, tellus arcu tristique neque, eget facilisis sapien arcu non orci. Duis purus est, dictum quis interdum in, convallis non erat. Sed id sem eu velit ornare interdum. Curabitur in fringilla eros. Mauris a felis nec tortor vestibulum rutrum. Praesent lobortis ornare turpis at suscipit. Fusce ac nisl sit amet quam mollis hendrerit ac ac est. Sed neque mi, pretium volutpat fermentum sit amet, consectetur in leo. Donec pulvinar vehicula elit sed elementum. Praesent ac erat ipsum, dictum sagittis nisl. Curabitur vestibulum adipiscing dictum. Nullam gravida nunc a libero gravida id eleifend mi aliquet. Etiam sit amet tellus nec ipsum dapibus volutpat at dignissim nulla. Sed tellus dolor, suscipit eu commodo non, vulputate eget dolor. Vivamus tempu
    </div>
    
    <div id='topnav'>
    <h1>Lorem ipsum</h1>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec magna dui. Pellentesque pharetra lorem nec massa dapibus eleifend. Duis facilisis, urna vulputate eleifend cursus, tellus arcu tristique neque, eget facilisis sapien arcu non orci. Duis purus est, dictum quis interdum in, convallis non erat. Sed id sem eu velit ornare interdum. Curabitur in fringilla eros. Mauris a felis nec tortor vestibulum rutrum. Praesent lobortis ornare turpis at suscipit. Fusce ac nisl sit amet quam mollis hendrerit ac ac est. Sed neque mi, pretium volutpat fermentum sit amet, consectetur in leo. Donec pulvinar vehicula elit sed elementum. Praesent ac erat ipsum, dictum sagittis nisl. Curabitur vestibulum adipiscing dictum. Nullam gravida nunc a libero gravida id eleifend mi aliquet. Etiam sit amet tellus nec ipsum dapibus volutpat at dignissim nulla. Sed tellus dolor, suscipit eu commodo non, vulputate eget dolor. Vivamus tempu
    	</div>
        
        	<div id='logo'>
            <h1>Lorem ipsum</h1>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec magna dui. Pellentesque pharetra lorem nec massa dapibus eleifend. Duis facilisis, urna vulputate eleifend cursus, tellus arcu tristique neque, eget facilisis sapien arcu non orci. Duis purus est, dictum quis interdum in, convallis non erat. Sed id sem eu velit ornare interdum. Curabitur in fringilla eros. Mauris a felis nec tortor vestibulum rutrum. Praesent lobortis ornare turpis at suscipit. Fusce ac nisl sit amet quam mollis hendrerit ac ac est. Sed neque mi, pretium volutpat fermentum sit amet, consectetur in leo. Donec pulvinar vehicula elit sed elementum. Praesent ac erat ipsum, dictum sagittis nisl. Curabitur vestibulum adipiscing dictum. Nullam gravida nunc a libero gravida id eleifend mi aliquet. Etiam sit amet tellus nec ipsum dapibus volutpat at dignissim nulla. Sed tellus dolor, suscipit eu commodo non, vulputate eget dolor. Vivamus tempu
            </div>
            
    			<div id='navaftlogo'>
                <h1>Lorem ipsum</h1>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec magna dui. Pellentesque pharetra lorem nec massa dapibus eleifend. Duis facilisis, urna vulputate eleifend cursus, tellus arcu tristique neque, eget facilisis sapien arcu non orci. Duis purus est, dictum quis interdum in, convallis non erat. Sed id sem eu velit ornare interdum. Curabitur in fringilla eros. Mauris a felis nec tortor vestibulum rutrum. Praesent lobortis ornare turpis at suscipit. Fusce ac nisl sit amet quam mollis hendrerit ac ac est. Sed neque mi, pretium volutpat fermentum sit amet, consectetur in leo. Donec pulvinar vehicula elit sed elementum. Praesent ac erat ipsum, dictum sagittis nisl. Curabitur vestibulum adipiscing dictum. Nullam gravida nunc a libero gravida id eleifend mi aliquet. Etiam sit amet tellus nec ipsum dapibus volutpat at dignissim nulla. Sed tellus dolor, suscipit eu commodo non, vulputate eget dolor. Vivamus tempu
    			</div>	
                    
                    <div id='leftcol'>
    				<h1>Lorem ipsum</h1>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec magna dui. Pellentesque pharetra lorem nec massa dapibus eleifend. Duis facilisis, urna vulputate eleifend cursus, tellus arcu tristique neque, eget facilisis sapien arcu non orci. Duis purus est, dictum quis interdum in, convallis non erat. Sed id sem eu velit ornare interdum. Curabitur in fringilla eros. Mauris a felis nec tortor vestibulum rutrum. Praesent lobortis ornare turpis at suscipit. Fusce ac nisl sit amet quam mollis hendrerit ac ac est. Sed neque mi, pretium volutpat fermentum sit amet, consectetur in leo. Donec pulvinar vehicula elit sed elementum. Praesent ac erat ipsum, dictum sagittis nisl. Curabitur vestibulum adipiscing dictum. Nullam gravida nunc a libero gravida id eleifend mi aliquet. Etiam sit amet tellus nec ipsum dapibus volutpat at dignissim nulla. Sed tellus dolor, suscipit eu commodo non, vulputate eget dolor. Vivamus tempu
                    </div>
                    
                    	<div id='midcol'>
                      	<h1>Lorem ipsum</h1>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec magna dui. Pellentesque pharetra lorem nec massa dapibus eleifend. Duis facilisis, urna vulputate eleifend cursus, tellus arcu tristique neque, eget facilisis sapien arcu non orci. Duis purus est, dictum quis interdum in, convallis non erat. Sed id sem eu velit ornare interdum. Curabitur in fringilla eros. Mauris a felis nec tortor vestibulum rutrum. Praesent lobortis ornare turpis at suscipit. Fusce ac nisl sit amet quam mollis hendrerit ac ac est. Sed neque mi, pretium volutpat fermentum sit amet, consectetur in leo. Donec pulvinar vehicula elit sed elementum. Praesent ac erat ipsum, dictum sagittis nisl. Curabitur vestibulum adipiscing dictum. Nullam gravida nunc a libero gravida id eleifend mi aliquet. Etiam sit amet tellus nec ipsum dapibus volutpat at dignissim nulla. Sed tellus dolor, suscipit eu commodo non, vulputate eget dolor. Vivamus tempu
                        </div>
                        
                        	<div id='rightcol'>
    						<h1>Lorem ipsum</h1>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec magna dui. Pellentesque pharetra lorem nec massa dapibus eleifend. Duis facilisis, urna vulputate eleifend cursus, tellus arcu tristique neque, eget facilisis sapien arcu non orci. Duis purus est, dictum quis interdum in, convallis non erat. Sed id sem eu velit ornare interdum. Curabitur in fringilla eros. Mauris a felis nec tortor vestibulum rutrum. Praesent lobortis ornare turpis at suscipit. Fusce ac nisl sit amet quam mollis hendrerit ac ac est. Sed neque mi, pretium volutpat fermentum sit amet, consectetur in leo. Donec pulvinar vehicula elit sed elementum. Praesent ac erat ipsum, dictum sagittis nisl. Curabitur vestibulum adipiscing dictum. Nullam gravida nunc a libero gravida id eleifend mi aliquet. Etiam sit amet tellus nec ipsum dapibus volutpat at dignissim nulla. Sed tellus dolor, suscipit eu commodo non, vulputate eget dolor. Vivamus tempu
                            </div>
                    	
                              
       	
    
    
    </body>
    </html>
    my code above is all overlapping is css supposed to be like this?

  • #2
    New Coder
    Join Date
    Feb 2008
    Posts
    32
    Thanks
    3
    Thanked 0 Times in 0 Posts
    your div layers are overlapping because you didn't actually position them. they are all in the same spot because of that.
    Code:
    top: 10px; left: 10px;

    div layers are able to position at any exact point/pixel you want it to go on the page. try adding the code above and editing the pixel numbers for each layer until your div is where you would like it to go, and look up css absolute positioning, as well as relative. i prefer absolute most of the time.

    i think that if you're trying to float an image, you need to specify position: relative; in your coding. if you want exact pixels, specify position: absolute;

    hope this helps!
    "Loo loo loo, I've got some apples, loo loo loo, you've got some, too!" - Butters

  • #3
    New Coder
    Join Date
    Feb 2009
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you that has helped a great deal.


  •  

    Posting Permissions

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