CSS issue with margin: auto
- by user1702273
Hi am having an issue with the margin auto of my website where i have a wrapper div with the width set to 1000px and the margins top and bottom to 0 and left and right to auto. I have a navigation menu in the side bar, where i used java script to replace the same div with different tables. when i click a link in the menu the wrapper shifts right some px and the comes to original, I don't want that action i want the wrapper to be static and not to vary at any time. how can i achieve that.
when i set the margin to just 0, so problem with positioning. But i want the wrapper to be centered.
Here is my css code:
body {
background-color:#E2E3E4;
color:#333;
margin:0;
padding:0;
font-size: 12px;
}
#wrapper {
width:1000px;
margin:0 auto;
margin-bottom:10px;
}
#header1 {
width:1000px;
height:44px;
margin:0 auto;
background-color:#ED6B06;
}
#header2 {
width:1000px;
height:40px;
margin:0 auto;
border-bottom:1px solid #EDE9DE;
}
#header3 {
width:1000px;
height:40px;
margin:0 auto;
border-bottom:1px solid #EDE9DE;
}
#header2 p {
margin:0 auto;
font-size:20pt;
color: #364395;
font-smooth: auto;
margin-left:15px;
margin-top:5px;
}
#welcome {
width:600px;
float:left;
padding:10px;
margin:0 auto;
}
#status{
margin:0 auto;
width:50px;
float:right;
padding:10px;
margin-top:3px;
margin-right:15px;
}
#content {
width:780px;
float:right;
}
#sidebar {
width:150px;
margin-top:15px;
margin-left:10px;
float:left;
border-right:1px solid #EDE9DE;
margin-bottom:25px;
}
#footer {
clear:both;
margin:0 auto;
width:1000px;
height:44px;
border-top:1px solid #EDE9DE;
}
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/style.css" media="screen" />
<title>Pearson Schools Management Portal</title>
</head>
<body id="home">
<div id="wrapper">
<?php include('includes/header1.php'); ?>
<?php include('includes/header2.php'); ?>
<?php include('includes/header3.php'); ?>
<div id="content">
<h2>Welcome to Portal!</h2>
</div> <!-- end #content -->
<?php include('includes/sidebar.php'); ?>
<?php include('includes/footer.php'); ?>
</div> <!-- End #wrapper -->
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<?php include('scripts/index_data.js'); ?>
</body>
