Search code examples
htmlcsspositioningtoolbarstyling

Why is my content area not moving even when I style it in css?

I am making a personal blog that people can download and edit, but the content area is always at the same place - under the toolbar - even when I set the left to 195px. Sorry if this is a bit cluttered and hard to read, but here is my code:

<html>
<head>
<title>[Your Name]'s Blog</title>
<style type="text/css">
div.selector
{
  position: fixed;
  top: 0;
  left: 0;
  width: 189px;
  height: 100%;
  background: #0000FF;
}
</style>
<style type="text/css">
div.scroll
{
top:10;
left:195;
border:double;
border-color:#000000;
background-color:#FFFFFF;
width:500px;
height:900px;
overflow-y:scroll;
overflow-x:hidden;
}
</style>
<style type="text/css">
div.flow 
{
  display:inline;
}
</style>
<script language="JavaScript">
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
</script>
</head>
<body>
<div class="selector">
<div>
<div>
<button onclick ="javascript:ShowHide('Me')" href="javascript:;" >Show/Hide Image</button>

<div class="mid" id="Me" style="DISPLAY: none" >
<img src="[Your Image Link]" alt="[Your Name]"/><br/>
</div>
</div>
<div>
<form method="get" action="http://www.youtube.com/results?search_query=" target="new">
<input type="text"   name="q" size="25"
maxlength="255" value="Search youtube" onfocus="this.value==this.defaultValue?this.value='':null"/>
<input type="submit" value="Search Youtube" />
</form>
</div>
<form method="get" action="http://www.google.com/search">
<div>
<input type="text"   name="q" size="25"
 maxlength="255" value="Google Search" onfocus="this.value==this.defaultValue?this.value='':null"/>
<input type="submit" value="Google Search" />
</div>
</form>
</div>
</div>



<div class="scroll">
<h1><center>[Your Name]'s Blog</center></h1>
<p>Note: Paragraphs are in between &lt;p&gt; and &lt;/p&gt;. Subheadings are in between &lt;h2&gt; and &lt;/h2&gt;.</p>
</div>
</body>
</html>
Solution

  • The top and left declartions won't do anything because they only work when the item is positioned something other than 'static' - either 'relative' or 'absolute'.

    You will want to either add 

    margin-left: 195px;

    Or

    position: relative;

    Also, you don't need to wrap each declaration in it's own separate <style> tag.