SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    May 2012
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with my background

    Hi guys, I currently have no idea why my website will look like that(Below pic). The background doesn't height doesn't automatically expand or something?
    Can anyone kindly explain to me why it will look like that? What did i do wrongly?? How to solve it? Thanks a lot...


    \2wg9bb4.png

    Here is my HTML code:

    HTML Code:
    <div id="mainContent">
                <div id ="article">
                    <p>testing</p>
                    <p>testing</p>
                    <p>testing</p>
                    <p>testing</p>
                    <p>testing</p>
                    <p>testing</p>
                </div>
                
                 <div id="breakingNews">
                    <p>testing</p>
                    <p>testing</p>
                    <p>testing</p>
                    <p>testing</p>
                    <p>testing</p>
                    <p>testing</p>
                </div>
                
       
              </div>
    Here is my css code:

    Code:
    #mainContent {
        
        width:70%;
        margin:40px auto;
        background-color: white;
        border-radius:5px;
        padding:10px;
        
    }
    
    #article {
        border:1px solid black;
        float:left;
        width:40%;
    }
    
    #breakingNews {
         width:30%;
         border:1px solid black;
         float:left;
         margin-left: 40px;
    }

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Add overflow:hidden; to the #mainContent. You need this whenever you have an element that only contains floated elements in order to get it to expand to contain them.

  3. #3
    SitePoint Member
    Join Date
    May 2012
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    Add overflow:hidden; to the #mainContent. You need this whenever you have an element that only contains floated elements in order to get it to expand to contain them.
    thanks! it works perfectly. Explanation is clear


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
  •