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 5 of 5
  1. #1
    Senior Coder
    Join Date
    May 2004
    Posts
    1,464
    Thanks
    15
    Thanked 0 Times in 0 Posts

    div covering div

    I have the following html

    the div bottom is supposed to be under the div middle but in firefox it appears over it.

    why?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style>
    #middle{
    width:779px;
    margin-top:4px;
    }
    #midleft{
    float:left;
    width:618px;
    display-block;
    }
    #midright{
    float:right;
    width:163px;
    margin-right:10px;
    display-block;
    }
    .boxright{
    	padding:0px;
    	margin:0px;
    	width:162px;
    	border: 5px solid #969593;
    	height:162px;
    	display:block;
    
    }
    .bottomad{
    	width:780px;
    	height:96px;
    	background-image: url(images/bottomads.gif);
    	text-align:center;
    	display:block;
    
    }
    
    </style>
    </head>
    
    <body>
    <div id=middle>
    			<div id=midleft></div>
    			
    			<div id=midright>
    				<div class=boxright></div>
    				<div class=boxright></div>
    				<div class=boxright></div>
    				<div class=boxright></div>
    			</div>
    		</div>
    	<div class=bottomad></div>
    </body>
    </html>

  • #2
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    All you need to do is clear the divs. Try this!

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style>
    #middle
    {
    width:779px;
    margin-top:4px;
    clear:both; /* we clear the div to prevent other divs starting next to this*/
    float:left; 
    }
    
    #midleft
    {
    float:left;
    width:618px;
    /*display-block;  no such property did you mean display:block;?*/
    }
    
    #midright
    {
    float:right;
    width:163px;
    margin-right:10px;
    }
    
    .boxright
    {
    	padding:0px;
    	margin:0px;
    	width:162px;
    	border: 5px solid #969593;
    	height:162px;
    	 /* display:block; divs are block elements so this is not needed */
    
    }
    
    .bottomad
    {
    	width:780px;
    	height:96px;
    	background-image: url(images/bottomads.gif);
    	text-align:center;
    	clear:both; /* we clear the div to prevent other divs starting next to this*/
            float:left;
    
    }
    
    </style>
    </head>
    
    <body>
    <div id=middle>
    			<div id=midleft></div>
    			
    			<div id=midright>
    				<div class=boxright></div>
    				<div class=boxright></div>
    				<div class=boxright></div>
    				<div class=boxright></div>
    			</div>
    		</div>
    	<div class=bottomad></div>
    </body>
    </html>
    gl
    You can not say you know how to do something, until you can teach it to someone else.

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Why are you floating the bottom ad? No need to float it. Also why do you insist on using invalid doctypes? Every test page I've seen you post has a partial doctype and you always seem to have problems with it. Start using a VALID FULL doctype.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,339
    Thanks
    29
    Thanked 283 Times in 277 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Also why do you insist on using invalid doctypes?
    The system identifier (URL) is optional, so the declaration is not actually invalid.

    However, leaving out the URL can trigger quirks mode in various browsers, so it’s best to include it. If you were to use, for example, the below HTML 4.01 Strict declaration without the system identifier, current browsers would render the page in standards‐compliance mode:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    Of course, esthera is using the Transitional declaration, presumably transitioning his code from HTML 3.2, so his document ends up getting the quirks mode treatment.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Partial doctype is what I should have said.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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