Center a div in the page, but it appears at the bottom of the page

Question

I try to set an HTML page to be like this:

(no need for borders in my opinion)

but I got to this:

Here is my jsFiddle

Is there a more UX wize arragment to get a map with legend, title and related radio boxes?

Is there any more elegant way to re-write my css? I saw few were pointing to display: table for centering some divs.

How can I do the followings?

make the header div be shorter
make the whole container in the middle of the page - vertically and horizontally

Here is my CSS:

    #container {
      height: 600px;
      width: 1100px;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    }

#header {
  padding: 50px;
  background: #93c4d3;
  overflow: hidden;
}

#headerImg,
#headerTitle {
  float: left;
  padding-left: 60px;
}

#map {
  height: 600px;
  width: 1100px;
}

div.lowerSection {
  overflow: hidden;
}

#radioDiv,
#legend {
  float: left;
}

#radioDiv {
  padding-left: 60px;
}

#legend {
  float: right;
  width: 200px;
  height: 100px;
  border: 5px solid cyan;
}

Here is my HTML:

<div id="container">
    <div id="header">

        <img id="headerImg" src="images/marker-icon-2x.png">
        <h1 id="headerTitle"> My Title </h1>

    </div>

    <div id="map"></div>
    <div id="lowerSection">
        <div id="radioDiv">
            <select name="dropdown" size=1>
                <option value="-1">none</option>
                <option value="0">1st alternative</option>
                <option value="1">2nd alternative</option>
                <option value="2">3rd alternative</option>
                <option value="3">4th alternative</option>
            </select>
            <br/>
            <br/>

            <input id="startRadio" type="radio" name="marker" value="0" checked="checked"> start
            <input id="marker_0" type="text">
            <br/>
            <br/>
            <input id="endRadio" type="radio" name="marker" value="1"> end
            <input id="marker_1" type="text">
            <br/>
            <br/>
            <button id="compare_btn" type="button">Beta vs. Prod</button>
        </div>

        <div id="legend">
            <h3>legend:</h3>
        </div>
    </div>

</div>

<script src="js/jquery.min.js"></script>
<!-- <script type="text/javascript" src="routes.js"></script>-->
<script src="js/leaflet.js"></script>
<script type="text/javascript" src="js/beta_map.js"></script>

It is preferred if you can post separate questions instead of combining your questions into one. That way, it helps the people answering your question and also others hunting for at least one of your questions. Thanks! — Paulie_D, Feb 28 '16 at 12:10
As for your actual title question - http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally?rq=1 I'm surprised with your reputation you haven't searched more before posting such a poor question. — Paulie_D, Feb 28 '16 at 12:12
*"make the header div be shorter"*? you can use a fixed `height` for your header or reduce the padding/margin and font-size of its children. Notice how by default `h1` has `user agent` styling applied it by the browser. — Aziz, Feb 28 '16 at 12:23

score 1 · Answer 1 · answered Feb 28 '16 at 12:13

1

for the header div, how about you just fixed its height in css

header{ height:fixed value;}

answered Feb 28 '16 at 12:13

Ian Kaganda

19
4

score 1 · Answer 2 · answered Feb 28 '16 at 12:33

header can be given a fixed height

#header{ height:60px;}

about centering the whole container..

This Should center the container :-

#container {
      height: 600px;
      width: 1100px;
      position: absolute;
      top: 50%;
      bottom: 0;
      left: 50%;
      right: 0;
      margin-top: -300px;
      margin-left: -550px;
    }

Not tested .. but i think should work

score 1 · Answer 3 · answered Feb 28 '16 at 12:42

Since u have in your header padding just remove it and it will be shortened..As for the container just play with height and width (also you have margin: auto and that will place the container at middle of screen)at the #container{} in css and you should find your preference..Simple :)

Center a div in the page, but it appears at the bottom of the page

3 Answers3