<p> tag rule will not show margin

Karen · February 10, 2011

Hi, everyone!

Hoping you can help me. I'm working on a project and created a new CSS rule for <p> to have 10 px margin on all sides. For some reason, it's still smashed up against the sides of the div. I've looked at it a bunch to no avail. I've done this successfully before, but I wonder if I inadvertently did something differently. CSS file is attached.

Thanks a bunch in advance!

Karen

style.css

Andrea · February 10, 2011

Can we see the html, too - or better yet, do you have a link to the page?

Karen · February 10, 2011

It's not yet uploaded anywhere, but here's the file so you can see the code.

index.html

Andrea · February 10, 2011

Your divisions are out of whack - put a background color to the p tag, just for demonstration purposes, and you'll see where your tag lands. I don't have time to upload the page right now, but maybe this will help you out until I can look at it closer.

Karen · February 11, 2011

This is the first time I've had the sidebar div going all the way to the top. If I have a vertical navbar, it's usually under the header div. I guess that's what's messing me up. I tried adding a background color to the p tag, but it didn't really help me. Thanks for your help!

Karen

Karen · February 11, 2011

For example, I'm working on this site and everything worked beautifully... Like I said, the different layout is playing with me. Funny thing is that this is a revamp of my own site. I feel like a dork for not being able to figure it out.

BeeDev · February 11, 2011

You need to look at the layout of the website first, and decide how you're going to flow the divs.

The sidebar obviously should be floated left, however #header shouldn't float right. You need to wrap #header and #content in a container div, and float that container div to the left, so #sidebar and that container div stack to the left. Then you don't need to float #header or #content as they will just stack on top of each other because they're block elements.

I set a 1 px padding on #content because the <p> tags margin was overflowing from the #content div making a gap.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GuppyFish Web Design - Affordable Web Solutions for Business and Non-Profits</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<style type="text/css">
#content, #sidebar { zoom: 1;}
</style>
<![endif]-->
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
background-color: #096;
text-align: center;
}
#sidebar ul li {
text-align: left;
list-style-type: none;
text-indent: 20px;
font-size: 16px;
color: #FFF;
line-height: 30px;
display: block;
height: 30px;
padding-top: 0px;
}

#container {
background-color: #FFF;
text-align: left;
width: 850px;
position: relative;
margin-top: 5px;
margin-bottom: 5px;
margin-right: auto;
margin-left: auto;
}
#sidebar {
float: left;
text-align: center;
background-image: url(../images/navbkgrd.png);
background-repeat: repeat-y;
width: 158px;
margin-bottom: 10px;
padding-bottom: 10px;
background-color: #053968;
}
#container #sidebar img {
margin: 5px;
}

#header {
background-color: #074368;
height: 205px;
text-align: center;
background-image: url(../images/banner.png);
width: 692px;
background-repeat: no-repeat;
background-position: center center;
}
#content {
font-family: Verdana, Geneva, sans-serif;
color: #000;
background-color: #FFF;
float: none;
padding:1px;
}

p {
margin: 10px;

}
#sidebar ul li:hover {
font-style: italic;
text-decoration: underline;
}
#sidebar ul li a {
color: #FFF;
text-decoration: none;
display: block;
}

.container2 {
float:left;
}
</style>
</head>

<body>
<div id="container">
<div id="sidebar">
	<img src="images/fish-mouse.png" width="134" height="196" />
	<p>  </p>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About Karen</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Portfolio</a></li>
		<li><a href="#">Testimonials</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div><!--end sidebar div -->
<div class="container2">
	<div id="header">

	</div><!--end header div -->

	<div id="content">
		<p>content  </p>
	</div>
</div>
</div><!--end container div -->
</body><!--end body div -->
</html>

Karen · February 11, 2011

THANK YOU so much! I wrapped header and content in their own div and floated it left, then put 1px padding on content like you said, and all is well now! I really appreciate it!!

Karen

Karen · February 14, 2011

Wondering if you may help me again... not sure if I should start a new topic. I'd like the color for the sidebar to remain the same all the way through to the bottom. I've tried several things... I created an image to use as the background, and in worked perfectly when repeated in the background of the navbar div. I had thought that making it as the background of the container (positioned left and repeating) would cause it to go all the way to the bottom of the page. When I used it as the bg of the container, it wouldn't even repeat, despite all attempts. I tried using a solid color as the background of the container, and that won't work either. Any thoughts?

BTW, I'm working on doing CSS the "right" way. Before I had been drawing AP Divs and making everything fixed, which is how I got around this before. Thanks again for helping!

Karen

Karen · February 14, 2011

I got the sidebar color to go all the way down by adding a footer and having it clear. Should've known that!

BeeDev · February 15, 2011

There's an article on A List Apart called Faux Columns. This article explains it very well I think, the problem of sidebars not stretching:

http://www.alistapart.com/articles/fauxcolumns/

Worth a read

Sign In

<p> tag rule will not show margin

Recommended Posts

Karen

Andrea

Karen

Andrea

Karen

Karen

BeeDev

Karen

Karen

Karen

BeeDev

Join the conversation

Browse

Activity

Store

Support