Solved

containing css content

Posted on 2014-03-03
5
306 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
Comment Utility
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
Comment Utility
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 42

Accepted Solution

by:
Chris Stanyon earned 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
That did it. Thanks.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

771 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now