How do I center a dynamic div?


Tags: html,css

Problem :

I'm not sure if this question has been answered (I think it probably has), but how do you center this dynamic div?

(I want #two to align itself to the middle position of #one.)

Right now my jsFiddle does this: http://jsfiddle.net/sE8Sc/4/

HTML :

<div id="one">
</div>
<div id="two">
        <a class="stuff">a</a>
        <a class="stuff">b</a>
        <a class="stuff">c</a>
</div>

CSS :

#one { width:100%; height:200px; background-color:#222; float:left; }
#two { text-align:center; float:left; }
.stuff { width:20px; height:20px; background-color:#444; margin:0 5px; float:left; }

I've tried margin:0 auto;, text-align:center; but still no dice. I'm not looking at declaring a defined margin like margin:0 41%; because if I wanted to add another <a class="stuff"> to the list it would get out of position...

Anyone? This is probably some simple positioning error that I can't figure out.

EDIT : I was looking around, and I saw this demo by Nivo Slider -- http://demo.dev7studios.com/nivo-slider/ -- how is it defining itself with a 960px width?

centered div



Solution :

You'll need to wrap both #one and #two in a containing element. That should set the width. Then all you need to do is remove all the floats (on #one, #two and #two's children). JSFiddle

#wrapper { width:500px; }
#two { text-align:center;}
.stuff { width:20px; height:20px; background-color:#444; margin:0 5px; }

New markup.

<div id="wrapper">
    <div id="one"></div>
    <div id="two">
            <a class="stuff">a</a>
            <a class="stuff">b</a>
            <a class="stuff">c</a>
    </div>
</div>

Without the wrapper two would just be aligned to the center of your window (or a parent with a width).


    CSS Howto..

    How to hook up CSS search bar to JavaScript or another server side language

    How to position two elements side by side?

    How to slide a div with p tag to right with css animation usin max-width?

    How to add styles based on whether top element is empty

    Something in my CSS is causing a random white bar to appear, how do I fix it?

    How to make sure pressed button remain “pressed down”

    how to make multiple inline dropdown lists cross platform compatible?

    How to change the behavior of the following css button?

    How to call image on css?

    how to make this div margin to zero and more nature [closed]

    css how to only make bold fonts for first
      set

    How to style an image created using javaScript

    How can I apply a vertical scrollbar to a div with a percentage height?

    How do I make this responsive layout with CSS?

    How Do I Make My CSS Slider Auto Play? [closed]

    How to select, focused textarea?

    How can I fix this Bootstrap layout issue?

    How to find dependand JS and CSS

    How to overflow in CSS/HTML? [closed]

    twitter bootstrap - how to skip a line?

    How to make this type of image popping out of box using XHTML css

    How to create automatic image gallery slideshow by using HTML,CSS and JavaScript

    How to split page into 4 equal parts?

    How to set the padding of QTableView cells through CSS?

    How can I count HTML elements on a printed page using CSS?

    How to cut down HTTP request on js/css in laravel

    how to apply css style only to homepage

    How to get list of Css class use in the HTML file?

    how to show product info after image in bigger zoom levels

    How to add hover effect to img placed in parent container