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
    New Coder
    Join Date
    Oct 2009
    Posts
    51
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Boxes Within Boxes

    Hello,

    Trying to place two DIV boxes inside of another - but the two boxes will not stay within the large wrapper - except for IE (a first). The code validates in Dreamweaver but does not display correctly. What's wrong?

    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>
    
    <style type="text/css">
    <!--
    .bigbox {
    width:800px; 
    border:5px solid #f2f2f2; 
    padding:5px; 
    display:block
    }
    
    .smallleftbox {
    float:left;
    padding:5px;
    width:500px;
    background-color:#0000FF;
    }
    
    .smallrightbox {
    float:left;
    padding:5px;
    width:140px;
    background-color:#FF0000;
    }
    
    -->
    </style>
    </head>
    <body>
    <div class="bigbox">
    <div class="smallleftbox">test1</div>
    <div class="smallrightbox">test2</div>
    </div>

  • #2
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Parent elements are NEVER to expand to contain floated elements. What you see IE doing is a bug. Other browsers are performing correctly.

    To get other more modern browsers to imitate IEs bug, either add 'overflow:auto' to the parent or float the container itself.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello billatl,
    Just a couple changes makes that code valid, see -
    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">
    .bigbox {
    	width: 800px; 
    	border: 5px solid #f2f2f2; 
    	padding:5px; 
    	overflow: auto;
    }
    .smallleftbox {
    	float: left;
    	padding: 5px;
    	width: 500px;
    	background: #0000FF;
    }
    .smallrightbox {
    	float: left;
    	padding: 5px;
    	width: 140px;
    	background: #FF0000;
    }
    </style>
    </head>
    <body>
        <div class="bigbox">
            <div class="smallleftbox">test1</div>
            <div class="smallrightbox">test2</div>
        </div>
    </body>
    </html>
    Have a look at this site which explains what overflow: auto; is doing.


    .
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Oct 2009
    Posts
    51
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thanks, that worked - though I used Hidden do to some unwanted scrollbars

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by billatl View Post
    Thanks, that worked - though I used Hidden do to some unwanted scrollbars
    The appearance of scrollbars might indicate that your box model is off.
    overflow:hidden; may not be the best way to control that.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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