CSS Positioning Separation

Question

I am always weak when it comes to positioning a div, but this situation is a bit difficult to find a solution on the Internet. I am trying to arrange the fields like this:

_ ___ _ |_|| ||_| _ | | |_||___| 

Is there a way to avoid defining each position of one pixel and make them a slot in the three columns that I have?

Answer 1

take a look at this script: http://jsfiddle.net/rREAh/ - is this what you are looking for?

If you need a perfect layout, check out the yahoo layout manager: http://developer.yahoo.com/yui/layout/

Answer 2

Define three containers for each column and place them to the left:

 <div style="float:left;width:Xpx"></div> <div style="float:left;width:Ypx"></div> <div style="float:left;width:Zpx"></div> 

Now you can put all your containers in the appropriate places in these columns.

Answer 3

See: http://jsfiddle.net/qXwKT/

CSS

 .box { background: #ffffff; padding: 5px; border: 1px solid #b3b3b3; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #container { margin: 0 auto; width: 400px; background: #ccc; overflow: hidden } #left, #right { float: left; width: 75px; } #mid { float: left; width: 250px; } #mid .box { margin: 0 10px; border-color: red } #left .box { margin: 0 0 10px 0; border-color: blue } 

HTML:

 <div id="container"> <div id="left"> <div class="box">left 1</div> <div class="box">left 2</div> </div> <div id="mid"><div class="box">mid</div></div> <div id="right"><div class="box">right</div></div> </div> 

Answer 4

Also take a look at this: an example jsfiddle that has a fluid layout.

And the other without a fixed div in the bottom corner.