Justify align divs?

HTML & CSS
1

Is there a way to evenly space out a row of float:left divs that are a fixed width?

Here’s the HTML:

<div id="recent_content_content">
	<div id="recent_tabcontent_1">
		<div class="preview_item">
			<div class="preview_item_img"><img src="images/preview_comingsoon.gif" class="centerimage" alt="" width="85" height="64" /></div>
			<div class="preview_item_text">Subject! This is the way cool subject of the greates production ever! </div>
		</div>
		<div class="preview_item">
			<div class="preview_item_img"><img src="images/preview_comingsoon.gif" class="centerimage" alt="" width="85" height="64" /></div>
			<div class="preview_item_text">Subject! This is the way cool subject of the greates production ever! </div>
		</div>
		<div class="preview_item">
			<div class="preview_item_img"><img src="images/preview_comingsoon.gif" class="centerimage" alt="" width="85" height="64" /></div>
			<div class="preview_item_text">Subject! This is the way cool subject of the greates production ever! </div>
		</div>

	</div>
	<div id="recent_tabcontent_2">Another area with other stuff</div>
</div>

Here’s my CSS file for setting defaults:

body, div, span, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td { margin: 0px; padding: 0px; }
body {
	text-align: center;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 100.01&#37;;
	background-color: #161616;
	color: white;
}
p { margin: .2em 0 .8em 0; }
ul, ol, li { margin: 0 0 0 1.4em; padding: 0px; }
ul, ol { margin-top: .2em; margin-bottom: .8em; }

a img { border: none; }
td img { display: block; }

table { width: 100%; }
.biggest { width: 100%; }
td.smallest, table.smallest { width: 0px; }

.left1 { text-align: left; margin: 0 auto; }
 img.left1 { float: left; }

.right1 { text-align: right; margin: auto 0; }
img.right1 { float: right; }

.center1 { text-align: center; margin: 0 auto; }
.center1 table { margin-left: auto; margin-right: auto; }
img.centerimage { display: block; text-align: center; margin: 0 auto; }

.top1 { vertical-align: top; }

.bottom1 { vertical-align: bottom; }

And here’s the CSS code for the HTML code above:

#recent_tabcontent_1 {
	text-align: justify;
}
.preview_item {
	float:left;
	width: 125px;
	padding: 0px 0px 0px 0px;
}
.preview_item_img img {
	width: 85px;
	height: 64px;
	text-align: center;
	margin: 0 auto;
	border-width: 1px 0px 0px 1px;
	border-color: #5b5b5b;
	border-style: solid;
}
.preview_item_text {
	padding: 4px 0px 0px 0px;
	text-align: center;
	font-size: 70%;
}

The text-align: justify obviously doesn’t work, but if there’s similar code to do the similar thing to divs (rather than text), I’m assuming that’s where it’ll go.

Thanks :slight_smile:

2

Meh, forget it. I’ll just use a table.

No matter how many times I try to get away from tables and use CSS, CSS always ends up being a huge problem (ah yes, the ol’ tables vs CSS debate)

3

Hi Force Flow.

Your code contain a lot of unnecessary “divs”. How all images are displayed with the same size (85x64) you can do it:


<div id="divContent">
    <p>
        <img src="images/preview_comingsoon.gif" class="centerimage" alt="" width="85" height="64" />
         Subject! This is the way cool subject of the greates production ever!
    </p>
    <p>
        <img src="images/preview_comingsoon.gif" class="centerimage" alt="" width="85" height="64" />
        Subject! This is the way cool subject of the greates production ever!
    </p>
</div>

and the css:


.centerimage { float:left; text-align:right; }
#divContent p { clear:both; }

It’s all right?

4

Meh, forget it. I’ll just use a table.

No matter how many times I try to get away from tables and use CSS, CSS always ends up being a huge problem (ah yes, the ol’ tables vs CSS debate)

Ouch,

There isn’t a debate anymore - it’s unanimous, CSS wins hands down.

Though, only when you know what you’re doing with it, replacing the table, tr, td tags withs div tags is not the idea at all.

5

Is there a way to evenly space out a row of float:left divs that are a fixed width?

Give them all the same width’s and margins?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#boxes {
	width: 330px;
}
#boxes div {
	background:#9C0;
	width: 100px;
	height: 100px;
	float: left;
	margin: 5px;
}
</style>
</head>
<body>
<div id="boxes">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
</body>
</html>
6

ascari, I can’t seem to get your technique working in any of the browsers I’m working with (IE6, opera, firefox)

markbrown4, I was looking for something fluid, which is why I didn’t use pre-defined margins/padding.

all4nerds, your solution seems waaay more complex than it needs to be.

That is one of the reasons why I usually end up opting for tables…a lot of things I try to do end up being simple to implement with tables, while with CSS, it ends up being ridiculously complex with all sorts of browser hacks, as it looks like in this case.

Now, I did try the 3-column layout technique, which was very simple to implement. However, the technique only works with 2-3 columns. There won’t always necessarily be 3 items in the row I’m working with.

7

markbrown4, I was looking for something fluid, which is why I didn’t use pre-defined margins/padding.

Then replace the px units with percentages :wink:

But it seems you have your mind made up…

8

I tried that too, but couldn’t get it working.

ascari mentioned that there were too many divs…what would be the “correct” way to encapsulate everything? It’s true that I think of things in terms of tables (after all, it’s what I started with back in '98), so I’m not sure what would be the best way to handle it if not like that.

9