CSS Layout: Content sticking out (overflowing)

HTML & CSS
1

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

<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

		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

You need to add this:

.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

Problem solved. Thank you.

Follow up question:
Even though I have set

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

Yes, you need this:

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:

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. :slight_smile:

5

Most browsers apply margins to the body tag by default, what you want is:


body {
  margin: 0;
}

Damn, beat me to it!

6

[ot]

:stuck_out_tongue:

Sorry about that. :slight_smile: 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! :smiley: [/ot]