ansaurus

Question

Centering Multiple floated divs within a container

Answer 1

A:

Set a width on your #intro_container container, otherwise margin: 0 auto; won't work.

Kevin Cupp 2010-01-20 19:55:26

ahh I thought that may be the issue....so I've got to calculate a width that is at least the width of the 2 divs within it and then I should be able to set the margin:0 auto;?

Dan 2010-01-20 19:59:36

Yes, if it's shorter than the width of the two divs, the floated divs will just stack on top of eachother. And if it's bigger, it'll just appear off-center. Be sure to account for any margins or padding, cause that'll add to the width.

Kevin Cupp 2010-01-22 17:51:34

Answer 2

A:

For 0 auto to work, you must specify a width.

You can put everything within a container div, with something like width 900px margin 0 auto, or you can simply apply these styles to intro container.

Right now your css is scaling everything to the viewport width, so float left sends the pictures to the width of intro_container, which has no defined width.

Also note, you can apply your id directly to the image! no need to wrap that in a div. It is good practice to style elements semantically.

DeaconDesperado 2010-01-20 20:00:35

Answer 3

A:

sometimes it's good to center things like that:

<html>
<head>
</head>
<body>
<div style="position:relative;width:400px;height:400px;background-color:green">

  <div style="position:absolute;margin-left:50%; left: -100px; width:200px;height:200px; background-color:red">
here attribute 'left' is half of this container width
  </div>
</div>
</body>
</html>

always working

dfens 2010-01-20 20:03:01

ansaurus

tags:

views:

answers:

Centering Multiple floated divs within a container

related questions