Center align the div

Here is the link for my html http://jsfiddle.net/9rprY/18/

In this I need the middle aqua colored div (#events) to come exactly center to the wrapper.

Answers


Change CSS:

#events {
    margin: 0px auto; 
    padding: 48px 0px 10px 10px; 
    position:relative; 
    height:auto;
    width:320px;
    background-color:aqua;
   overflow:hidden;
}

Fiddle demo: http://jsfiddle.net/9rprY/22/


Add the margin to 0 and auto in your css code, as below

#events {
margin: 0px auto; 
padding: 48px 0px 10px 10px; 
position:relative; 
height:auto; 
width:320px;
background-color:aqua
}

float:left; should be removed, I didn't noticed it previously hence edited the answer.


try:

#wrapper{
    width:600px; /* set width of wrapper div */
    display:block;
}
#event{
    margin:0 auto;
    width:320px;
}

Just remove the line:

float: left;

and edit margin and height as:

margin: 0 auto;
height: 25px;

Here is you fiddle


Is this that you want. here is the jsfiddle.

Change #events css to

#events {
   margin: 10px 85px 14px 80px;
z-index: 100;
position: relative;
height: auto;
float: left;
width: 320px;
background-color: cyan;
}

try this one..

chnage events div css

#events {
margin: auto; 
padding: 48px 0px 10px 10px; 
position:relative;
min-height:40px;
height:auto;  
width:320px;
background-color:aqua
}

you can check in jsFiddle http://jsfiddle.net/9rprY/54/


Need Your Help

Object oriented programming , inheritance , copy constructors

c++ oop

Suppose I have a base class Person and I publicly inherit a class Teacher from base class Person.

HTML5 video playing after setting source

javascript html5 node.js html5-video

I'm trying to share html5 video using Node.js.