Can someone explain?

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility

Message

pcguy -> Can someone explain? (3/20/2009 10:11:48)
Hi all, I need to know why this is happening with my CSS... If I have a mainContainer, lets say set at 760px Then I have a DIV within it, set to 100%..... If I tell that DIV to have a background color of say black, (everything is still ok), and then tell it to use, say, 25px of padding, I would expect the inside padding of this DIV to do just that.... But what happens is the right side of the DIV, flows outside of the mainContainer - as if the padding has caused it to overflow.... I've since added another DIV within the problematic DIV, and given it 25px of margin, which gets me the effect I need, without the problem overflow... But I can't figure out why that would happen? Can anyone explain? Thanks!

TexasWebDevelopers -> RE: Can someone explain? (3/20/2009 12:34:03)

Here's how we would do it. Width to 100% isn't necessary on the inner div. The way I understand it, you are basically saying--"make the inner div 100% wide--then add padding of 25px" so it adds 50px to the 100% width and wanders outside...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css styles</title>
<style type="text/css">
<!--
body  {
	font: 90% Arial, Helvetica, sans-serif;
	background: gray;
	margin: 0; 
	padding: 0;
	text-align: center; 
	color:white;
}
* {
	margin: 0px;
	padding: 0px;
	text-decoration: none;
}
html {
	height:100%;
	margin-bottom:1px;
}
.wrapper #mainContainer {
	width: 760px;
	margin: 0 auto; 
	text-align: left;
	background-color: gray;
}
.wrapper #mainContent {
	margin:0;
	padding: 25px;
	background-color: black;
}
-->
</style>
</head>
<body class="wrapper">
<div id="mainContainer">
  <div id="mainContent">
    <h1> Main Content </h1>
    <p>Lorem ipsum dolor </p>
<!-- end #mainContent --></div>
<!-- end #container --></div>
</body>
</html>

Tailslide is the real expert though...

pcguy -> RE: Can someone explain? (3/20/2009 13:27:11)
So you just don't put a width on the inner DIV?

TexasWebDevelopers -> RE: Can someone explain? (3/20/2009 13:32:56)
I didn't say that. I said not a width of 100% and then use padding. The div "assumes" 100% width unless you suggest otherwise (correct me TailSlide if this is wrong). You could take your inner div and set if for a width of 50% and float it right and it would work with your 25px padding just as you would expect. .wrapper #mainContent { width:50%; margin:0; padding: 25px; background-color: black; float:right; }

pcguy -> RE: Can someone explain? (3/20/2009 13:50:11)
You didn't say that, but your code did....you're inner DIV didn't specify a width, so that's why I asked..... Ok, I didn't know a DIV tag assumed 100%...that's good to know. Now I understand why that was happening. Thanks for the explanation.

Page: [1]

0.1411133