CODEWITHSUNDEEP
layouthtmlcss-floatcentering
Dan
Dan

Reputation: 543

Centering Multiple floated divs within a container

Alright, here is a link to the site I am working on. http://danberinger.com/preview.html

I currently have the message inside its own div(#messagebox) and the picture in its own div (#picture). Both of these divs are floated to the left. I put them inside a container div called #intro_container. I would like to center this containing div, but am having trouble with it. I have tried setting the margins to 0 and auto but that did not work. This must be some sort of issue with the amount of different levels of divs that I am trying to work with....

Any help would be greatly appreciated!

Upvotes: 0

Views: 795

Answers (3)

dfens
dfens

Reputation: 5525

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

Upvotes: 0

Mark Grey
Mark Grey

Reputation: 10257

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.

Upvotes: 0

Kevin Cupp
Kevin Cupp

Reputation: 477

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

Upvotes: 1

Related Questions