How to center div within another div?


Tags: html,css

Problem :

I'm learning how to use the position relative/absolute.

However, I've come a little stuck.

I'm trying to horizontally center a div within a div but when I add margin: 0 auto; it does nothing.

I've made a Fiddle.

Or here's the code:

<!DOCTYPE HTML>
<html lang="en-UK">
    <head>
        <link href="DivTest.css" rel ="stylesheet" type="text/css">
        <title></title>
    </head>
    <body>
    <div id="header"></div>
    <div id="outer">
        <div id="inner"></div>
    </div>
    </body>
</html>

CSS:

body, html {
     margin: 0;
     width: 100%;
}

#header{
     position: relative;
     width: 100%;
     height: 200px;
     background-color: lightgreen;
     margin: 0 0 20px 0;
}

#outer{
     position: relative;
     width: 800px;
     height: 500px;
     background-color: red;
     margin: 0 auto;

}

#inner{
     position: absolute;
     width: 200px;
     height: 250px;
     background-color: lightblue;
     margin: 0 auto;
}

Any help would be appreciated.



Solution :

Just remove the position:absolute; property for #inner

Fiddle: http://jsfiddle.net/Q8NVH/7/


    CSS Howto..

    How to apply css styles to a tag?

    How do I make elements flow horizontally instead of vertically?

    How to pin the menu to the upper part of the screen?

    How prevent inheriting “position: relative” CSS

    How do i check if cell is colored and get their postion in the table with javascript

    How to display multi-column article from a single column article data source?

    How to use bootstrap grid system overlaying a map

    How can I specify distance between list items?

    How can I apply CSS to dropdownlists?

    How do I apply a css padding to one element but not its child

    Li tag is not aligning correctly in Chrome. How to fix it?

    How to create and style dropdown menus using the wordpress menus section? [closed]

    How do you determine whether a CSS property requires browser specific prefixes?

    How to put the table inside the box

    How can I make use of `::selection` for in chrome browsers?

    How to create a dropdown that is open by default and with custom scrollbars ( see pic from wireframes) in HTML [closed]

    how to flip and rotate an image using css in chrome

    How to set height of my web page in html5

    CSS help - how to keep my div in place with a responsive design

    Rails 4: how to apply custom CSS to Rails form file field

    How can I stop an CSS animation from interfering with a CSS transform transition?

    How do I center a menu option under it's heading option in a drop down menu?

    How to show two rows of div in single div

    How to theorize about this phenomenon about
    tag

    How to make list items of one UL with fixed height be displayed as columns?

    How to align body of the webpage to center?

    How can I force an image to be no larger than the section it's in?

    CSS - how to set some divs inline

    How can I use external HTML form in Joomla site?

    How to remove Menu Item Class form secondary menu