Reputation: 3100

Align two div's to left

Basically what i want to do is this:

http://jsfiddle.net/wQBq5/20/

without using tables.

Upvotes: 3

Answers (4)

Alex

Reputation: 1668

You can achieve this using float.

You can use something like this (basic example):

html:

<div class="left-container">1</div>
<div class="right-container">
  <div class="number2">2</div>
  <div class="number3">3</div>
</div>

css:

.left-container{float:left;width:100px;}
.right-container{float:left;width:100px;}
.right-container .number2{float:left;width:100%;}
.right-container .number3{float:left;width:100%;}

Upvotes: 0

dnuttle

Reputation: 3830

This fiddle shows the basics: http://jsfiddle.net/cA3su/. But there are differences. For one thing, the "inner" divs don't stretch all the way to the right like the table does. For another, you need to understand how floats and clears work. It takes some practice and experimentation. In short, divs will never work exactly the way tables do. But once you know how to do it, divs get you free of a lot of the headaches that tables create.

Upvotes: 2