Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

containing css content

Posted on 2014-03-03
5
Medium Priority
?
326 Views
Last Modified: 2014-03-03
why is does the section spill outside of container if I add padding to it? Below is my css and html. Thank you.

html {
	height: 100%;
}
body {
      margin-top: 0;
      background-color: grey;
      height: 100%;
      
	/* IE10 Consumer Preview */ 
	background-image: -ms-radial-gradient(center, circle farthest-corner, #BA200F 0%, #120505 100%);
	
	/* Mozilla Firefox */ 
	background-image: -moz-radial-gradient(center, circle farthest-corner, #BA200F 0%, #120505 100%);
	
	/* Opera */ 
	background-image: -o-radial-gradient(center, circle farthest-corner, #BA200F 0%, #120505 100%);
	
	/* Webkit (Safari/Chrome 10) */ 
	background-image: -webkit-gradient(radial, center center, 0, center center, 506, color-stop(0, #BA200F), color-stop(1, #120505));
	
	/* Webkit (Chrome 11+) */ 
	background-image: -webkit-radial-gradient(center, circle farthest-corner, #BA200F 0%, #120505 100%);
	
	/* W3C Markup, IE10 Release Preview */ 
	background-image: radial-gradient(circle farthest-corner at center, #BA200F 0%, #120505 100%);
	}
	
.container {
	position: relative;
      width: 800px;
      max-width: 90%;
      margin-left: auto;
      margin-right: auto;
      background-color: grey;
      height: 100%;
}
header {
      height: 176px;
      text-align: center;
      background-color: black;
}
header img {
      float: left;
}
h1{
	color: red;
}

.head-container {
      display: inline-block;
      vertical-align: middle;
      margin-top: auto;
      margin-bottom: auto;
}
.heading {
      margin-left: auto;
      margin-right: auto;
      vertical-align: middle;
      text-align: left;
}
#left_box{
	background-color: black;
	color: white;
	font-size: x-large;
	padding: 10px;
	float: left;
}
#right_box{
	background-color: black;
	color: white;
	padding: 10px;
	float: right;
}
#left_box span{
	color: red;
}
nav {
	  width: 100%;
	  height: auto;
      border-top: 10px solid black;
      border-bottom: 1px solid red;
      background-color: red;
      overflow: auto;
      clear: both;
}
nav ul {
      list-style: none;
      float: right;
	padding: 2px;
}
nav li {
      display: inline;
}
nav a {
      font-weight: bold;
      text-decoration: none;
      padding: 1em 1em;
      background-color: white;
      border-top: 5px solid red;
      color: red;
}
nav p{
	color: white;
	padding-left: 5px;
}
section {
      margin: 0 auto;
      height: 400px;
      width: 800px;
      background-color: white;
      clear: both;
}
footer {
	position: absolute;
      bottom: 0;
      width: 100%;
      background-color: #000080;
      border-top: 1px solid red;
      text-align: center;
      color: white;
}

Open in new window


<!DOCTYPE HTML>
	<head>
		<title>Building Contractor</title>
		<link rel="stylesheet" type="text/css" href="styles.css" />
	</head>
	
	<body>
		<div class="container">
			<header>
				<img src="imgs/InnInKeyWestFlorida_bnr.png" />
				<div class="head-container">
					<div class="heading">
						<div id="left_box">
							<span>Kevin Barlow</span><br>Building Contractor<br>
							Key West<br>305-684-2026<br>850-686-5515
						</div>
						<div id="right_box">
							<img src="imgs/united-states-flag_scaled.png" /><br>
							<img src="imgs/united-kingdom-flag_scaled.png" />
						</div>
					</div>
				</div>
			</header>
			<nav>
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">Projects</a></li>
					<li><a href="#">Services</a></li>
					<li><a href="#">Contact Us</a></li>
				</ul>
				<p>Licensed and Bonded <br> FL LIC# CBC1259320</p>
			</nav>
			<section>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
				<img src="imgs/General-contractor-300x200.jpg" />
			</section>
			<footer>
				<h4>Footer place holder &copy; 2014 Kevin Barlow Building Contractor</h4>
			</footer>
		</div>
	</body>
	
</HTML>

Open in new window

0
Comment
Question by:centem
5 Comments
 
LVL 19

Expert Comment

by:Ken Butters
ID: 39900554
Assuming you are seeing the data in the tab <section> spilling outside of the <div class="container"> ?

I checked in IE9, Firefox Version 25, and Chrome version 33 on Windows 7 64bit machine....

None of the three browsers showed your above text spilling outside of the Div Container for me.

Attached is a screenshot of what I see in all three browsers.
3-3-2014-9-05-03-AM.jpg
0
 

Author Comment

by:centem
ID: 39900684
I meant to say is that when I add padding to the section element the section element spans outside to the right of the container element.
0
 
LVL 44

Accepted Solution

by:
Chris Stanyon earned 2000 total points
ID: 39900692
If you add padding to your section it will spill out of the container because of your width. Your container is 800px wide and your section is 800px wide. When you add padding, it gets added to the width, so if you add a left and right padding of 20px to your section, it becomes 840px - which is too wide to fit in the 800px container!
0
 
LVL 58

Expert Comment

by:Gary
ID: 39900733
Read up on box-sizing
http://css-tricks.com/box-sizing/

How you specify your box-sizing will affect if padding etc are added to an elements size or included in the elements size.
0
 

Author Closing Comment

by:centem
ID: 39900769
That did it. Thanks.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

916 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question