Karen Posted February 10, 2011 Report Share Posted 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 Quote Link to comment Share on other sites More sharing options...
Andrea Posted February 10, 2011 Report Share Posted February 10, 2011 Can we see the html, too - or better yet, do you have a link to the page? Quote Link to comment Share on other sites More sharing options...
Karen Posted February 10, 2011 Author Report Share Posted February 10, 2011 It's not yet uploaded anywhere, but here's the file so you can see the code. index.html Quote Link to comment Share on other sites More sharing options...
Andrea Posted February 10, 2011 Report Share Posted 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. Quote Link to comment Share on other sites More sharing options...
Karen Posted February 11, 2011 Author Report Share Posted 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 Quote Link to comment Share on other sites More sharing options...
Karen Posted February 11, 2011 Author Report Share Posted 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. Quote Link to comment Share on other sites More sharing options...
BeeDev Posted February 11, 2011 Report Share Posted 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> 1 Quote Link to comment Share on other sites More sharing options...
Karen Posted February 11, 2011 Author Report Share Posted 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 Quote Link to comment Share on other sites More sharing options...
Karen Posted February 14, 2011 Author Report Share Posted 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 Quote Link to comment Share on other sites More sharing options...
Karen Posted February 14, 2011 Author Report Share Posted 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! Quote Link to comment Share on other sites More sharing options...
BeeDev Posted February 15, 2011 Report Share Posted 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.