Can't figure out how to horizontally CENTER my content div

Question

I want to CENTER my div so that it's perfectly centered to the middle of the page no matter how big the screen your watching the website on is.

Please Help Thanks!

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="java.js"></script>

<head>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<title>Test Website</title>
<meta name="" content="">

</head>
<body onload="Slider();">

<header>

    <div id="title">
    <h1 class="headertext">Test Website</h1>
    </div>

    <div id="menubar">
        <ul>
          <li><a href="#content">slideshow</a></li>
          <li><a href="#naturepictures">naturepictures</a></li>
          <li><a href="#hello">homepage</a></li>
          <li><a href="#hello">homepage</a></li>
          <li><a href="#hello">contact</a></li>         
      </ul>
     </div>

</header>
    <div class="hide"></div>

        <div id="rightmenu">
            <ul>
                <li><a href="#content">slideshow</a></li>
                <li><a href="#naturepictures">naturepictures</a></li>
                <li><a href="#hello">homepage</a></li>
                <li><a href="#hello">homepage</a></li>
                <li><a href="#hello">contact</a></li>

                <div id="youtubelogo">
                    <a href="http://www.youtube.com" target="_blank">
                    <img src="images/youtubelogo.gif" alt="" width="90" height="50" align="middle">
                    </a>
                </div>          
            </ul>
                <div id="righttriangle1"></div>
                <div id="righttriangle2"></div>
                <div id="righttriangle3"></div>
                <div id="righttriangle4"></div>
                <div id="righttriangle5"></div>
            </div>

        <div id="leftmenu">
            <ul>
                <li><a href="#content">slideshow</a></li>
                <li><a href="#naturepictures">naturepictures</a></li>
                <li><a href="#hello">homepage</a></li>
                <li><a href="#hello">homepage</a></li>
                <li><a href="#hello">contact</a></li>
            </ul>
                <div id="lefttriangle"></div>
        </div>      

        <div id="content">

            <h1 style="font-weight: normal;">Contentpage</h1><br>

            Picture slideshow
            <br>
            <br>

            <div class="slider">
                <img id="1" src="images/car1.jpg" border="0" alt="car1"/>
                <img id="2" src="images/car2.jpg" border="0" alt="car2"/>
                <img id="3" src="images/car3.jpg" border="0" alt="car3"/>
                <img id="4" src="images/car4.jpg" border="0" alt="car4"/>
                <img id="5" src="images/car5.jpg" border="0" alt="car5"/>
            </div><!--slider end-->

            <div class="shadowbottom"></div>    

            <div id="naturepictures">

            <h1 style="font-weight: normal;">Pictures</h1>
            <br>
            <img style="width: 800px; height: 600px;" src="images/nature1.gif"/>

            </div><!--naturepictures end-->

        </div><!--content end-->

</body>
</html>

CSS:

*{
    margin: 0 auto 0 auto;
    text-align: left;
    color: #ffffff;
}

body{
    margin: 0;
    text-align: left;
    font-size: 13px;
    font-family: arial, helvetica, sens-serif;
    color: #ffffff;
    width: 1200px;
    height: auto;
    background: #fdf7e3;
}

header {
    position: fixed;
    width: 100%;
    top: 0;
    background: rgba(0,0,0,0.8);
    z-index: 10;
}

h1{
    color: black;
    text-align: center;
}

.hide
{
    position: fixed;
    width: 100%;
    top: 0;
    background: rgba(255,255,255,1);
    z-index:5;  
    height: 123px;
}
.headertext{
    margin-top: 15px;
    text-align: center;
    color: white;
}

#title{
    font-size: 20px;
    margin: -10px 0 30px 0;
    width: 100%;
    height: 70px;
    border-top: 2px solid #000000;
    border-bottom: 2px solid #000000;
}

#menubar{
    float: left;
    clear: both;
    width: 100%;
    height: 30px;
    list-style: none;
    border-bottom: 2px solid #010000;
}

#menubar ul{
    list-style: none;
    margin-top: -20px;
    text-align: center;
}

#menubar ul li{
    list-style: none;
    display: inline;
    padding-right: 80px;
}

#menubar ul li a{
    color: #ffffff;
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
}

#menubar ul li a:hover{
    border-bottom: 2px solid #ffffff;
}

#rightmenu{
    margin-top: -20px;
    position: fixed;
    right: 0;
    width: 160px;
    height: 530px;
    list-style: none;
    background: rgba(0,0,0,0.8);
    color: #ffffff;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

#rightmenu ul{
    margin-top: 23px;
}

#rightmenu ul li{
    display: block;
    padding-bottom: 50px;
}

#rightmenu ul li a{
    font-weight: bold;
    text-decoration: none;
    color: #ffffff;
    font-size: 15px;
    text-align: center;
    margin-left: -15px;
}

#rightmenu ul li a:hover{
    border-bottom: 2px solid #ffffff;
    transition: opacity .5s ease-in;
    opacity: 1;
}

#righttriangle1 {
   width: 0;
   height: 0;
   border-right: 25px solid rgba(0,0,0,0.8);
   border-top: 34px solid transparent;
   border-bottom: 34px solid transparent;
   margin-top: -410px;
   margin-right: 160px;
}

#righttriangle2 {
    width: 0;
    height: 0;
    border-right: 25px solid rgba(0,0,0,0.8);
    border-top: 34px solid transparent;
    border-bottom: 34px solid transparent;
    margin-right: 160px;
}

#righttriangle3 {
   width: 0;
   height: 0;
   border-right: 25px solid rgba(0,0,0,0.8);
   border-top: 34px solid transparent;
   border-bottom: 34px solid transparent;
   margin-right: 160px;
}

#righttriangle4 {
   width: 0;
   height: 0;
   border-right: 25px solid rgba(0,0,0,0.8);
   border-top: 34px solid transparent;
   border-bottom: 34px solid transparent;
   margin-right: 160px;
}

#righttriangle5 {
   width: 0;
   height: 0;
   border-right: 25px solid rgba(0,0,0,0.8);
   border-top: 34px solid transparent;
   border-bottom: 34px solid transparent;
   margin-right: 160px;
}

#leftmenu{
    position: fixed;    
    left: 0;
    margin-top: -20px;
    width: 160px;
    height: 450px;
    list-style: none;
    background: rgba(0,0,0,0.8);
    color: #ffffff;
    border-left: 2px solid #010000;
    border-right: 2px solid #010000;
}

#leftmenu ul{
    margin-top: 23px;
}

#leftmenu ul li{
    display: block;
    padding-bottom: 50px;
}

#leftmenu ul li a{
    font-weight: bold;
    text-decoration: none;
    color: #ffffff;
    font-size: 15px;
    margin-left: -15px;
}

#leftmenu ul li a:hover{
    border-bottom: 2px solid #ffffff;
    transition: opacity .5s ease-in;
    opacity: 1;
}

#lefttriangle{
    margin-top: 89px;
    margin-left: -1px;
    width: 0px; 
    height: 0;
    border-top: 80px solid rgba(0,0,0,0.8);
    border-left: 82px solid transparent; 
    border-right: 82px solid transparent; 
}

#content{
    width: 1000px;
    margin: 0 auto;
    margin-top: 135px;
    color: #000000;
    font-weight: bold;
    text-align: center;
    font-size: 15px;
}

#naturepictures{
    color: black;
    top: 1200px;
    width: 80px;
    height: 300px;
    text-align: center;
    margin-left: 440px;
}

.naturepicture{
    height: 400px;
    width: 600px;
}

.slider{
    margin-top: 20px;
    width: 600px;
    height: 400px;
    overflow: hidden;
    margin: auto;
    border-radius: 10px;
    vertical-align: middle;
}

.shadowbottom{
    background-image:url(../images/shadow.png);
    background-repeat: no-repeat;
    background-position: top;
    width: 850px;
    height: 144px;
    vertical-align: middle;
    margin-top: -50px;
}

.slider img{
    width: 600px;
    height: 400px;
    display: none;
}

I already tried many things but don't understand why it acts weird Thanks for helping

I already tried margin-left: auto; margin-right: auto; – Sander van Hooff Dec 27 '13 at 12:20 — Sander van Hooff, Dec 27 '13 at 12:20
Try ___margin:0 auto;___ – Pranav C Balan Dec 27 '13 at 12:21 — Pranav C Balan, Dec 27 '13 at 12:21

score 0 · Accepted Answer · answered Dec 27 '13 at 12:25

0

try this

#div_id {
 width: 50%;
 margin: 0 auto;
}

answered Dec 27 '13 at 12:25

Jeet

1,350
1
15
32

Pradeep Pansari · Answer 2 · 2013-12-27T14:19:19.130

0

You can try this :

Fiddle Link here

<div class="mainwrapper" >
    <div class="innerwrapper">
    <div class="contentdiv">test</div>
    </div>
</div>

You will find working Example in above JSFiddle link...

Happy New Year...:)

edited Dec 27 '13 at 14:19

answered Dec 27 '13 at 14:14

Pradeep Pansari

1,287
6
10

Can't figure out how to horizontally CENTER my content div

2 Answers2