Why does my sidebar shift downwards when I add content?

mpsn · February 13, 2012

Hi, for my sidebar, I'm not sure why when I add content (eg:The qquick brown fox jumps over the lazy dog.) inside the content div, that the sidebar shifts downwards, you can try, just cut out the The quick brown... and the sidebar shifts back upwards?

Here is my CSS:

===========

/*================PAGE STYLES=============*/
body
{
background-image:url('images/fadedGreenbackground.jpg');
background-attachment:fixed;
}

h3
{
font-family:Verdana,Arial,sans-serif;
text-align:center;
color: #000080;
margin-left:250px;
  border:1px solid black;
}

h5
{
font-family:Verdana, Arial, sans-serif;
text-align:center;
}

.container
{
width:800px;
margin-left:auto;
margin-right:auto;
border:1px solid black;
  padding:100px 5px 0px;
background-color:#9F9;
}

/*=================HEADER STYLE============*/
.header
{
width:750px;
margin-left:auto;
margin-right:auto;
margin-top:-98px;
padding:20px;
border:1px solid black;
background-color:#FFF;
}

.header  img/*this means all images inside div 'header' will have header's style*/
{
width:200px;
height:220px;
margin-top:-10px;/*we have to overlap and go past the header padding of 10px (see above)*/
border-right:1px solid black;
}

/*==================MENU NAV STYLE============*/
.menu/*container for menu nav items*/
{
width:780px;
margin-left:auto;
margin-right:auto;
padding:8px 5px;
border:1px solid black;
text-align:center;
}

.menu ul li 
{
display:inline;
border:1px solid #00FF7F;
background-color:#00FF7F;
margin:0px 6px 0px -4px;
padding:20px 15px 23px 15px; 
font-family:Verdana,Arial,sans-serif;
}

.menu a:link
{
color:#000;
text-decoration:none;
}

.menu ul li a:hover
{
color:#FFF;
text-decoration:underline;
background-color:#006400;
}

.menu a:visited
{
color:#191970;
}

/*===============CONTENT BODY STYLE===========*/
.content
{
width:790px;
margin-left:auto;
margin-right:auto;
margin-top:30px;
padding:400px 5px 0px 5px;
border:1px solid black;
background-color:#FDF5E6;
}

#bodyText
{
background-color:yellow;
border:1px solid black;
margin-left:300px;
margin-right:330px;

}

/*.content p/*NB: p.content NOT same as .content p**/ 
/*{*/
/*background-color:yellow;*/
/*}*/


/*==========SIDEBAR STYLE=================*/
.sidebar
{
width:200px;
margin-top:-390px;
margin-left:500px;
margin-right:300px;/*WHY DOESN"T THIS WORK? why doesn't side bar move 300 from the right towards the left??*/
margin-bottom:10px;
padding:100px 50px 500px 10px;
border:1px solid black;
}


/*===========FOOTER STYLE====================*/
.footer
{
width:750px;
margin-left:auto;
margin-right:auto;
margin-bottom:5px;
padding:20px;
margin-top:10px;
background-color:#00FF7F;
border:1px solid black;
}

Here is my HTML:

============

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div class="container"><!--wrapper for content body: holds header, menu, content body (which in turn holds sidebar), footer-->
<div class="header">
	<img src="images/logo.jpg" title="Welcome to my Website!" alt="Welcome to my Website!"/>

</div>

<div class="menu">
	<ul>
		<li><a href="#home">home</a></li>
		<li><a href="#education">education</a></li>
		<li><a href="#photo">photo gallery</a></li>
		<li><a href="#games">Games</a></li>
		<li><a href="#contact">contact us</a></li>
	</ul>
</div>

<div class="content">
	<p>
		the quick brown fox jumps over the lazy dog.<!--Why does adding this line cause the sidebar to shift downwards????-->
	</p>

	<div class="sidebar">

	</div>

</div>


<div class="footer">

</div>

</div>


</body>

</html>

Any help appreciated.

smerny · February 13, 2012

get rid of crazy margins and padding on the sidebar and add float:right

edit: +"and padding"

mpsn · February 13, 2012

Ok, I'll try that first, also do you know why when I zoom out (CTRL and minus sign), why does the the 'contact us' move out of place, if you try, you will see what I mean.

Appreciate it.

mpsn · February 13, 2012

No, it's still not working after removing margin attribute, and now the sidebar goes to the right (still inside my content 'div') BUT now the sidebar top border is lined up withe the bottom of the 'content' div...

Any help appreciated.

bspace · February 18, 2012

you'd be better putting the sidebar and content in separate divs, like this

	
<div class="content">
<p>the quick brown fox jumps over the lazy dog.</p>
</div>	
<div class="sidebar">
<p>stuff in the sidebar.</p>		
</div>

then your css goes like this

	
.sidebar {
float:left;
left:0px;
position:relative;
width:200px;
}
.content {
float:right;
position:relative;
right:0;
width:590px;
}

don't go adding padding / margin to these unless you can deal with possible box model problems

as regards the way you've got the code right now, it's behaving just like it should

if you wanted to go with it like that you'd have to float you're sidebar left

then either give the in the content a 200px left margin or float it right with a 590px width

Sign In

Why does my sidebar shift downwards when I add content?

Recommended Posts

mpsn

Link to comment

Share on other sites

smerny

Link to comment

Share on other sites

mpsn

Link to comment

Share on other sites

mpsn

Link to comment

Share on other sites

bspace

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information