Jump to content
Killersites Forums

<p> tag rule will not show margin

Recommended Posts

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!




Link to post
Share on other sites

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.

Link to post
Share on other sites

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!



Link to post
Share on other sites

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">
<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 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;

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 {

<div id="container">
<div id="sidebar">
	<img src="images/fish-mouse.png" width="134" height="196" />
	<p>  </p>
		<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>
</div><!--end sidebar div -->
<div class="container2">
	<div id="header">

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

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

  • Upvote 1
Link to post
Share on other sites

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!



Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...