ansaurus

Question

How can I align DIV's next to each other each with a width of 1000px?

Answer 1

A:

Floated the elements will stack when their container isn't wide enough to align them horizontally. Put the four divs inside a container that's wide enough for all of them to fit (presumably 4000px + whatever margin and padding you want on each). In your question, you mention 30px, but your example uses a 50px left margin. Here's an example with a 50px left margin. http://jsfiddle.net/brianflanagan/9ZUw5/

Brian Flanagan 2010-10-22 17:22:49

Answer 2

A:

The problem is your viewport. When you float a series of elements, they will wrap to the next line if the viewport is not wide enough to display them on one line. To see what I mean, decrease the width of .b1 to 100.

You can add a container div if you really want this that can scroll horizontally.

With the parent container style of:

overflow: scroll;

Mike 2010-10-22 17:24:42

Answer 3

A:

Add a wrapper and make the wrapper large enough to fit your DIVs:

<div class="wrapper">
   <div class="b1"></div><div class="b1"></div><div class="b1"></div><div class="b4"</div>
</div>


.wrapper {
    width:3500px;
}

Diodeus 2010-10-22 17:27:09

ansaurus

tags:

views:

answers:

How can I align DIV's next to each other each with a width of 1000px?

related questions