CSS Affecting All Elements Except Sidebar

  • Resolved austastic

    (@austastic)


    13 years, 2 months ago

    I am working on integrating wordpress into an existing site, and I have all of the functionality I want set up correctly. My CSS works perfectly with every other aspect (blog posts, navigation, etc…), and yet no matter what I do I cannot seem to affect the sidebar with CSS. I have tried renaming the div and matching it in the css, I have double checked to make certain that everything matches up. It should work, and yet it doesn’t. My header.php file has the following after the body tag.

    <body>
<div id="container" >
		<div id="jsr_logo"><img src="http://www.austastic.com/jetsetradio/site_images/jsr_logo.png" /></div>
		<div id="content">
		<div id="sidebar"><?php get_sidebar();?></div>
       		<div id="header">
              <?php include("site_nav.php") ?>
        	</div>

            <div id="posts">

    And my CSS is as follows:

    @charset "utf-8";
/* CSS Document */

body {
background-color: #daf3c7;
}
#sidebar {
	width: 140px;
	height: 500px;
	margin-top: 60px;
	margin-left: 10px;
	float:left;
}

#content {
	width: 650px;
	height: 1000px;
	border: 3px solid #0e5a40;
	background-color:#e1f2d5;
	margin-top: -150px;
	margin-right: auto;
	margin-left: auto;
}
#header ul {
	/*Have to set z index so that you can click it above the logo*/
	position: relative;
	z-index:1;
	list-style: none;
	float: right;
	margin-right: 20px;
	margin-top: 25px;
}
#header ul li {
	float: left;
	margin-left: 30px;
}
#header ul li a:link {text-decoration:none; color:#0e5a40;}
#header ul li a:visited {text-decoration:none; color:#0e5a40;}
#header ul li a:hover {text-decoration:underline; color:#0e5a40;}
#header ul li a:active {text-decoration:underline; color:#0e5a40;}

#container {
	width: 800px;
	margin-right: auto;
	margin-left: auto;
}
#jsr_logo {
	position: relative;
	top: 0px;
	left: 10px;
}
#posts {
	width: 460px;
	margin-top: 0px;
	margin-right: 30px;
	float:right;
}
.post {
	border-top: 1px solid #0e5a40;
}
.imgslice {
	padding-top: 10px;
	padding-bottom: 4px;
}
.title {
	padding-top: 6px;
}
.blurb {
	padding-bottom: 20px;
}

    If I remove the <div> tags from around the sidebar it jumps to the top of its parent element, so clearly it knows there is a <div> there. Any ideas on what I might be doing incorrectly?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter austastic

    (@austastic)

    13 years, 2 months ago

    I am an idiot and I was modifying the wrong copy of the .css file.

    David Choi

    (@wpthemes777)

    13 years, 2 months ago

    Can’t tell by the code. Because we can’t see where

    <div id=”container” >

    closes using </div>. And for the CSS code, if you have more than one CSS loading, one can affect another. You can use Chrome browser’s developer tools to find that out.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘CSS Affecting All Elements Except Sidebar’ is closed to new replies.