One of the biggest problems in designing web pages is understanding where a problem occurs and whose influence might be affecting the problem. This is called the "parent/child relationship" of CSS. As you know, while parents usually have their children's best intentions at heart, children often feel intimidated and screwed up by their parents, so understanding this relationship may help you solve your problems.

A WordPress user posted a question on the forum complaining that she wanted her page to feature her header spreading fully across the page's width with the content centered on the page with a lot of space on the left and right sides. She's been poking around with the margins in her header to no avail and turned to us for help.

<div id="page">
	<div id="header">Header Title</div>
 <div id="content">
  		<div class="post">Post babble here...</div>

The CSS attributes for the margins in this example are:

#page { margin-top:5px; margin-right: 100px;
	margin-bottom: 5px; margin-left:100px; }
#header { margin-top:5px; margin-right: 5px; 
	margin-bottom: 5px; margin-left:5px;}
#content { margin-top:5px; margin-right: 20px;
	margin-bottom: 5px; margin-left:20px; }
.post { margin-top:5px; margin-right: 5px; 
	margin-bottom: 5px; margin-left:5px; }

Playing detective with her codes, we found that changing the margins on the header weren't working because they were being influenced by the page margins to begin with. This is where the parent/child relationship shows up. The parent page was telling the child header what to do and it wanted to do something else.

If we changed the right and left margins of page, it eliminated the margin problems for the header. But we've created another problem. The parent page continues its influence and now all of the content is spread across the whole page width. A change needed to also happen with the left and right margins of the content so the wide margins are back in place. To make the whole family happy, the new margins looked like this:

#page { margin-top:5px; margin-right: 5px; 
	margin-bottom: 5px; margin-left:5px; }
#header { margin-top:5px; margin-right: 5px; 
	margin-bottom: 5px; margin-left:5px;}
#content { margin-top:5px; margin-right: 100px; 
	margin-bottom: 5px; margin-left:100px; }
.post { margin-top:5px; margin-right: 5px; 
	margin-bottom: 5px; margin-left:5px; }

Posted in: CSS, WordPress

Related FAQ's

Marius Ion ANGEL HOT SOFT LLC (800) 316-7677