Justifying non-textual elements

Dave Benjamin

Is there anything I can do to fully justify DIVs or IMGs without
resorting to JavaScript? I'd like to do what "text-align: justify" does
with text, but it doesn't seem to work with anything else. Here's an
example of what I mean:

<html>
<head>
<title>justified flow test</title>
</head>

<body>
<div style="text-align: justify">
<div style="width: 100px; height: 80px; background: blue;
border: 2px solid gray; float: left; margin: 3px"> </div>
<div style="width: 100px; height: 80px; background: blue;
border: 2px solid gray; float: left; margin: 3px"> </div>
<div style="width: 100px; height: 80px; background: blue;
border: 2px solid gray; float: left; margin: 3px"> </div>
<div style="width: 100px; height: 80px; background: blue;
border: 2px solid gray; float: left; margin: 3px"> </div>
<div style="width: 100px; height: 80px; background: blue;
border: 2px solid gray; float: left; margin: 3px"> </div>
<div style="width: 100px; height: 80px; background: blue;
border: 2px solid gray; float: left; margin: 3px"> </div>
<div style="width: 100px; height: 80px; background: blue;
border: 2px solid gray; float: left; margin: 3px"> </div>
<div style="width: 100px; height: 80px; background: blue;
border: 2px solid gray; float: left; margin: 3px"> </div>
<div style="width: 100px; height: 80px; background: blue;
border: 2px solid gray; float: left; margin: 3px"> </div>
<div style="width: 100px; height: 80px; background: blue;
border: 2px solid gray; float: left; margin: 3px"> </div>
<div style="width: 100px; height: 80px; background: blue;
border: 2px solid gray; float: left; margin: 3px"> </div>
<div style="width: 100px; height: 80px; background: blue;
border: 2px solid gray; float: left; margin: 3px"> </div>
<div style="width: 100px; height: 80px; background: blue;
border: 2px solid gray; float: left; margin: 3px"> </div>
<div style="width: 100px; height: 80px; background: blue;
border: 2px solid gray; float: left; margin: 3px"> </div>
<div style="width: 100px; height: 80px; background: blue;
border: 2px solid gray; float: left; margin: 3px"> </div>
<div style="width: 100px; height: 80px; background: blue;
border: 2px solid gray; float: left; margin: 3px"> </div>
<div style="width: 100px; height: 80px; background: blue;
border: 2px solid gray; float: left; margin: 3px"> </div>
<div style="width: 100px; height: 80px; background: blue;
border: 2px solid gray; float: left; margin: 3px"> </div>
<div style="width: 100px; height: 80px; background: blue;
border: 2px solid gray; float: left; margin: 3px"> </div>
<div style="width: 100px; height: 80px; background: blue;
border: 2px solid gray; float: left; margin: 3px"> </div>
<div style="width: 100px; height: 80px; background: blue;
border: 2px solid gray; float: left; margin: 3px"> </div>
</div>
</body>
</html>

The above "text-align: justify" has no effect, but what I wish it could
do is add spaces in between the DIVs so that the right edges line up
with the right edge of the browser. That way, resizing the browser
window would cause more or less DIVs to show up on each line, but
horizontal space would be added to keep both edges flush with the edges
of the browser window.

I'm guessing this is not possible with CSS, but I was wondering if
anyone knew any tricks...

Thanks,
Dave

Jul 21 '05 #1

Subscribe Post Reply

4348

Spartanicus

Dave Benjamin <ra***@lackingtalent.com> wrote:

Is there anything I can do to fully justify DIVs or IMGs
text-align:justify applies to inline elements only. Divs default to
block, imgs default to inline.
<div style="width: 100px; height: 80px; background: blue;
border: 2px solid gray; float: left; margin: 3px"> </div>

The above "text-align: justify" has no effect
Duh, those divs are block level and on top of that you've floated them.
Either will prevent text-align:justify from applying.
, but what I wish it could
do is add spaces in between the DIVs so that the right edges line up
with the right edge of the browser. That way, resizing the browser
window would cause more or less DIVs to show up on each line, but
horizontal space would be added to keep both edges flush with the edges
of the browser window.

That is sort of possible for inline elements, bar the bottom row since
text-align:justify only applies when a line wraps.
http://homepage.ntlworld.com/spartan...mg_justify.htm

--
Spartanicus

Jul 21 '05 #2

Dave Benjamin

Spartanicus wrote:

Dave Benjamin <ra***@lackingtalent.com> wrote:
Is there anything I can do to fully justify DIVs or IMGs

text-align:justify applies to inline elements only. Divs default to
block, imgs default to inline.

Gotcha.

<div style="width: 100px; height: 80px; background: blue;
border: 2px solid gray; float: left; margin: 3px"> </div>

The above "text-align: justify" has no effect

Duh, those divs are block level and on top of that you've floated them.
Either will prevent text-align:justify from applying.

I didn't realize that it would make a difference. Usually, when I want
to create a generic rectangular page object for testing, I make a DIV,
since I don't have to depend on any other files. But clearly in this
case, it does matter.

, but what I wish it could
do is add spaces in between the DIVs so that the right edges line up
with the right edge of the browser. That way, resizing the browser
window would cause more or less DIVs to show up on each line, but
horizontal space would be added to keep both edges flush with the edges
of the browser window.

That is sort of possible for inline elements, bar the bottom row since
text-align:justify only applies when a line wraps.
http://homepage.ntlworld.com/spartan...mg_justify.htm

Thanks for the example. Unfortunately, it doesn't seem to work in
Firefox on Windows, though it does work in Opera 8 and MSIE 6. However,
I can already see that this isn't the behavior I want, because the
bottom row doesn't stretch out, nor would I expect it to.

I think I'm going to need to do some sort of dynamic table with
JavaScript, because they want the layout to be a grid, but where the
number of columns depends on how many will fit.

Thanks for the help,
Dave

Jul 21 '05 #3

RobG

Dave Benjamin wrote:
[...]

Thanks for the example. Unfortunately, it doesn't seem to work in
Firefox on Windows, though it does work in Opera 8 and MSIE 6. However,
I can already see that this isn't the behavior I want, because the
bottom row doesn't stretch out, nor would I expect it to.

I think I'm going to need to do some sort of dynamic table with
JavaScript, because they want the layout to be a grid, but where the
number of columns depends on how many will fit.

Are you saying that the grid must be full? i.e. that the dimensions are
always factors of the number of images to display?

Do all rows need to be justified to the entire window, or just the
bottom row to the edges of the rows above?

For the sake of playing, here is your page using a bit of JS and CSS to
make testing simpler. Just change the value of 'numDivs' to get more or
fewer divs:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>justified flow test</title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<style type="text/css">
#XX div {
width: 100px; height: 80px; background: blue;
border: 2px solid gray; float: left; margin: 3px;
}
</style>
</head>
<body>
<div id="XX" style="text-align: justify">
<script type="text/javascript">
var numDivs = 30;
while ( numDivs-- ) { document.write('<div></div>') }
</script>
</div>
</body>
</html>
--
Rob

Jul 21 '05 #4

Christoph Päper

Dave Benjamin:

Is there anything I can do to fully justify DIVs or IMGs without
resorting to JavaScript? I'd like to do what "text-align: justify" does
with text, but it doesn't seem to work with anything else.
What an surprise given its name!
<div style="text-align: justify"> <div> </div>

div div {
display: inline-table;/*<- hack*/ display: inline-block;
width: 100px; height: 80px;
margin: 3px
border: 2px solid gray;
background: blue;
}

In IE 'inline-block' only works with HTML element types that are
'inline' by default, which 'div' is not, so you might want to change that.
I'm guessing

Exactly that's your fault.

Jul 21 '05 #5

by: klaus triendl | last post by:

hi, recently i discovered a memory leak in our code; after some investigation i could reduce it to the following problem: return objects of functions are handled as temporary objects, hence...

C / C++

non-blocking file access possible in c++?

by: Mario | last post by:

Hello, I couldn't find a solution to the following problem (tried google and dejanews), maybe I'm using the wrong keywords? Is there a way to open a file (a linux fifo pipe actually) in...

C / C++

append to non-existing list

by: Yves Glodt | last post by:

Hello, if I do this: for row in sqlsth: ________pkcolumns.append(row.strip()) ________etc without a prior:

Python

Non-virtual methods - why?

by: Adrian Herscu | last post by:

Hi all, In which circumstances it is appropriate to declare methods as non-virtual? Thanx, Adrian.

C# / C Sharp

Mixed-mode and "non-default" app domains

by: Bern McCarty | last post by:

Is it at all possible to leverage mixed-mode assemblies from AppDomains other than the default AppDomain? Is there any means at all of doing this? Mixed-mode is incredibly convenient, but if I...

.NET Framework

memset on structs with non-PODs

by: Patrick Kowalzick | last post by:

Dear all, I have an existing piece of code with a struct with some PODs. struct A { int x; int y; };

C / C++

same overhead in calling virtual and non virtual member function...?

by: ypjofficial | last post by:

Hello All, So far I have been reading that in case of a polymorphic class ( having at least one virtual function in it), the virtual function call get resolved at run time and during that the...

C / C++

Right-Justifying Numeric Output

by: Rich Shepard | last post by:

I have this print statement in a function: print '%2d $%11.2f $%10.2f $%9.2f $%9.2f' %(nper, pv, diff, ten, bonus) and I would like to have the output right justified in the specified...

Python

Help with Non-Aggregate Type Error

by: Ian825 | last post by:

I need help writing a function for a program that is based upon the various operations of a matrix and I keep getting a "non-aggregate type" error. My guess is that I need to dereference my...

C / C++

399

PEP 3131: Supporting Non-ASCII Identifiers

by: =?UTF-8?B?Ik1hcnRpbiB2LiBMw7Z3aXMi?= | last post by:

PEP 1 specifies that PEP authors need to collect feedback from the community. As the author of PEP 3131, I'd like to encourage comments to the PEP included below, either here (comp.lang.python), or...

Python

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Justifying non-textual elements

Similar topics