SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Layout: Content sticking out (overflowing)

    Instead of the class="info" part being extended automatically, it stays constant and just lets the content (blah blah...) to overflow into copyright bar area.

    What is the problem?


    HTML
    Code:
    <body>
        <footer class="main">
                        <div class="info">
                            <div class="info-left">
                                <p> Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah </p>
                            </div>
                            <div class="info-right">
                                info right
                            </div>
                        </div>
                        <div class="copyright-bar">
                             2014. ALL RIGHTS RESERVED.
                        </div>
        </footer>
    </body>
    CSS
    Code:
    		body {
    			width: 100%;
    			color: #FFF;
    			font-family: 'Roboto';
    			font-weight: 100;
    			text-align: center;
    		}
    
    		p {
    			font-size: 18px;
    		}
    
    
                    footer.main {
    			margin-top: 350px;
    			width: 100%;
    			position: relative;
    			background-color: #212121;
    			font-size: 100px;
    		}
    
    		.copyright-bar {
    			padding: 15px;
    			background-color: #191919;
    			font-size: 15px;
    			font-weight: 100;
    		}
    
    		.info {
    			padding: 5%;
    			display: block;
    		}
    
    		.info-right {
    			float: right;
    			font-size: 50px;
    		}
    
    
    		.info-left {
    			float: left;
    			max-width: 450px;
    			width: 60%;
    			font-size: 30px;
    			text-align: left;
    		}

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    You need to add this:

    Code:
    .info {overflow: hidden;}
    That's the easiest way to force the parent to enclose its floated contents.

    Off Topic:

    As an aside, please look at this thread, which explains how to post a more useful/usable code example.

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Problem solved. Thank you.

    Follow up question:
    Even though I have set
    Code:
    html {
      margin: 0;
      padding: 0;
      border: 0;
      outline: 0;
    }
    and width: 100%

    The footer on the left and bottom there are few pixels left, thus showing the background. Unlike the other two sides, right side fully extends out to the end.

    Off topic:
    I will follow the guide lines for the future posts.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by successfulfail View Post
    The footer on the left and bottom there are few pixels left, thus showing the background. Unlike the other two sides, right side fully extends out to the end.
    Yes, you need this:

    Code:
    body {margin: 0; padding: 0;}
    It's a common thing to remove the browser's default margins and paddings in a single reset at the start of the CSS file to prevent things like this happening. Here's an example:

    Code:
    html, body, div, h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img, form, fieldset, legend, label, textarea, span, em, strong, sub, sup, cite, table, tbody, td, tfoot, th, thead, tr, tt, dl, dt, dd, ol, ul, li {margin: 0; padding: 0;}

    Off Topic:

    I will follow the guide lines for the future posts.
    Cool.

  5. #5
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Most browsers apply margins to the body tag by default, what you want is:

    Code:
    body {
      margin: 0;
    }
    Damn, beat me to it!

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    Quote Originally Posted by Wyvers View Post
    Damn, beat me to it!


    Sorry about that. Don't be discouraged, though. We really appreciate you taking the time to answer questions. And I'm outa here now, so the floor is yours!


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
  •