Solved

containing css content

Posted on 2014-03-03
5
308 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 43

Accepted Solution

by:
Chris Stanyon earned 500 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

929 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

13 Experts available now in Live!

Get 1:1 Help Now