Hi, after like 2 hours of searching the web I haven't found a solution for this. After spending 30 or 40 minutes trying to code it myself and not finding anything that works, it's time to ask here!

Attached is an image of what I want.

I have a certain width to work within, 928px. I want to create four boxes of content distributed between the left and right edges of that space.
To get a few obvious solutions out of the way consider these:

If I float left, everything squishes to the left, of course.
I can float left and then use a right-margin, but this is imprecise and won't align between left and right edges before the floated boxes stack on each other. In fact floats are weird period because they topple over like that.
A table can be used but I don't want to. If I make four cells that are the same width, and center the content in the cells, they will be spaced evenly, but WON'T be distributed edge to edge of the container space.

I tried using 4 layers of divs and setting all the display: styles to table, table-row, table-cell, but couldn't get that to work either, the behavior is weird.

Note that the red boxes are going to be a strait image, nothing fancy, with a border. The title might be heavily styled or may be an image itself.

If possible the method used needs to be fluid and not hard coded to specifics. In other words, maybe there might be 6 boxes another time, or the boxes may have random widths and not the same width, or the boxes may be dynamically generated and thus need to "pop" into the page and be distributed with the rest.

The worst case scenario is that I have to calculate everything exact and just set margins so that it almost looks like it's evenly across.

Maybe this is simple, or I'm going mad, I would think somewhere in the CSS spec or html markup you can do something as trivial as distribute items horizontally or vertically. Maybe not?

At this point I don't care if the solution is DIVs or a table or UL/LI or some <p>s, I just want to do it!

Here is some code, using DIVs with a table display style, but of course the content is not edge to edge of the container block, it's just distributed. If this code even works for you.

<html>
<head>
<title>Distribute DIVs horizontally and fluid</title>
<style type="text/css">
html, body { margin:auto; text-align:center; }
#cage { width: 900px; height:500px; border:1px solid red; margin:15px auto;display:table; }
#row {border:1px dotted green;display:table-row;}
#feature {border:1px solid blue;display:table-cell;text-align:left;}
#inner {width:200px;height:200px;border:1px dotted black;margin:auto;padding:0px;}
</style>
</head>
<body>
<div id="cage">
  <div id="row">
    <div id="feature">
    	<div id="inner">
      	content<br /><img src="someimage.jpg" width="200" height="200" />
      </div>
		</div>
    <div id="feature">
    <div id="inner">
      	content<br /><img src="someimage.jpg" width="200" height="200" />
      </div>
    </div>
    <div id="feature">
    <div id="inner">
      	content<br /><img src="someimage.jpg" width="200" height="200" />
      </div>
    </div>
    <div id="feature">
    <div id="inner">
      	content<br /><img src="someimage.jpg" width="200" height="200" />
      </div>
    </div>
	</div>
</div> 
</body>
</html>

There isn't a ready made way of doing this, but using auto margins, and float commands, with fixed widths, should get you going in the correct direction.

I'll post a sample when I get the chance to write one.

The only way I could get anything close to what I wanted was to have one DIV frame, then each box in their own DIV. I then set those to position:relative and display:inline and used the left:Xpx to set their spacing. I tweaked the spacing down to the last pixel for it to line up the way I wanted, and thankfully, this method worked across the latest versions of FF, IE, Chrome, and Opera.

If anybody else uses this method, remember that when using position:relative, margins don't seem to count, since the objects are positioned explicitly.

If this thread makes its way to the CSS spec people, please for the love of all things merciful create a way to distribute objects evenly in a space! Although I doubt they can, since pretty much anything can be inside a box, I'm not sure how that work work.

Thanks for any further suggestions, I'm sure I won't be the only one needing this effect so this thread will probably get used a lot!

If you placed one image on the right and one one the left and made a table in the middle it my do that for you. I have not tried it but I cant see why it wouldn't work.

jsut declare a different css class or id for the div on the left edge, the div on the right edge and the divs on the inside, float them all left, set the margins like this :

#leftfeature{
margin:0 15px 0 0;
}

.middlefeatures{
margin:0 15px 0 15px;
}

#leftfeature{
margin:0 0 0 15px;
}

(the same result could also be done by setting no margins on the left and right boxes but setting each inner box's left and right margins instead with css id's)

this is assuming you have 30 pixel spaces between your boxes, you said you had 928px wide, lets say you 4 boxes are 200 thats 800 total so that leaves 128 pixels divided in 3 so about 42 pixels spaces leaving u with 2 extra pixels because you chose an uneasy width, pick a site width that divines easily in 2 and 3 and you will be golden... like 960 pixels!

cough www.960.gs cough

PS 960 would actually still leave you with 1 pixel but by setting the 3 spaces to | 53px | 54px | 53px | then you end up with the 160px you need to pad and an good looking page.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.