Can someone explain?

	Home Register Search Help Login

Recent Posts
Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Sponsors
Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.
Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.
Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Can someone explain?

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> Can someone explain?

Page: [1]


pcguy Posts: 137 From: None Status: offline	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

Posts: 720
Joined: 2/22/2002
From: Dallas, TX
Status: offline

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

< Message edited by TexasWebDevelopers -- 3/20/2009 12:42:39 >

_____________________________

(in reply to pcguy)


pcguy Posts: 137 From: None Status: offline	RE: Can someone explain? - 3/20/2009 13:27:11 So you just don't put a width on the inner DIV? (in reply to TexasWebDevelopers)


TexasWebDevelopers Posts: 720 Joined: 2/22/2002 From: Dallas, TX Status: offline	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; } _____________________________ Follow us on TWITTER (in reply to pcguy)


pcguy Posts: 137 From: None Status: offline	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. (in reply to TexasWebDevelopers)

Page: [1]

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> Can someone explain?

Page: [1]

Jump to: 1

New Messages	No New Messages
Hot Topic w/ New Messages	Hot Topic w/o New Messages
Locked w/ New Messages	Locked w/o New Messages

Post New Thread

Reply to Message

Post New Poll

Submit Vote

Delete My Own Post

Delete My Own Thread

Rate Posts