SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What is wrong with this CSS

    Hi,

    I am trying to put everything in a containing CSS area called #container (which has a border) but it is not recognising it unless I put some text after the CSS within the #container.

    In other words: In the below code, if you remove the words "WHAT IS WRONG" you will see the #container moves up and does not house the #div container and it contents (#div1 and # div 2)? How can I make it so I do not have to write some text where "WHAT IS WRONG" is?

    If I add 'float:left;' to #container it works. But I want it centred and it does not work if I write 'centred'. I thought 'margin:0 auto 0 auto;' which I have included would be fine to centre it, which it does (but not when I write float left).

    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>
    
    
    
    #divcontainer {
    width: 970px;
    float: left;
    }
    
    #div1 {
    width: 510px;
    float: left;
    }
    
    #div2 {
    width: 420px;
    float: right;
    }
    
    #container {
    	width:975px;
          margin:0 auto 0 auto;
          padding:5px;
          border:1px solid #cccccc;
          background:#ffffff;
    	   }	  
    </style>
    
    </head>
    
    <body>
    
    
    <div id='container'>
    
    <div id='divcontainer'>
    
    <div id='div1'>
    this is some text this is some text this is some text this is some text 
    </div>
    <div id='div2'>
    this is some text this is some text this is some text this is some text 
    </div>
    
    </div>
    WHAT IS WRONG
    </div>
    
    </body>
    </html>
    Thanks,

    Matt.

  2. #2
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does "#divcontainer" need to be floated?

    It seems to be working if I remove the float:left from #divcontainer, and clear the floats for div1 and div2. If you did need #divcontainer to be floated, you could wrap another div around it and float that. It starts behaving weirdly when you have floated elements directly within other floated elements.

    Here is a jsfiddle that seems to be working: http://jsfiddle.net/7u5va/

    To clear the floats for div1 and div2, I added a new div underneath them with the style clear:both. There are more elegant ways of doing this however, type "clearfix hack" or something similar into google to find out more.

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    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>
    
    #container {
        width:975px;
        border:1px solid #ccc;
        background:#eef;
        padding:5px;
        margin:0 auto;
    }
    
    #divcontainer {
        overflow:hidden;
        background:#fee;
        outline:1px solid #f00;
    }
    
    #div1 {
        width:510px;
        float:left;
        background:#cff;
        outline:1px solid #0ff;
    }
    
    #div2 {
        width:420px;
        float:right;
        background:#cfc;
        outline:1px solid #0f0;
    }
    
        </style>
    </head>
    <body>
    
    <div id='container'>
        <div id='divcontainer'>
            <div id='div1'>
                <p>this is some text this is some text this is some text this is some text</p>
            </div>
            <div id='div2'>
                <p>this is some text this is some text this is some text this is some text</p>
            </div>
        </div>
        <p>floats need to be cleared.  See #divcontainer.</p>
    </div>
    
    </body>
    </html>


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
  •