Link to home
Start Free TrialLog in
Avatar of at_the_biginning
at_the_biginningFlag for United States of America

asked on

Div Align Justify - <div align="justify">

I am havint problems with this div code: <div align="justify">
when i first tried it out, it worked just fine, but after trying to apply the code in a page
with 3 or 4 div frames the code doesn't work and i have to do it all manually.

Recently I asked almost the same question here:
https://www.experts-exchange.com/questions/24344267/Align-Text-And-Justify-It.html

i don't know if you guys understand when i said 3 or 4 div frames
well is like having 3 or 4 separate cells with text in the page.

i was then wondering is there is a div code that can actually be set somewhere in the page
that will set, align and justify the text in all the areas in the pages.

ASKER CERTIFIED SOLUTION
Avatar of v2Media
v2Media
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of at_the_biginning

ASKER


Hello v2Media,

nope, this doesn't seem to work.

and whats up with the " <!-- and --> ". ? ...this way this style is not going to function.
but even if i took off those the code still don't work, try it for yourself and see what i am talking about.

<style type="text/css">
<!--
#wrapper_justify {
        font: 12px Arial, Helvetica, sans-serif;
        text-align: justify;
        width: 140px;
}
-->
</style>

<div id="wrapper_justify">

your example did not show any text align.
but anyway, i test it out with a page and did not work.



What exactly isn't working? All divs are justified after setting the rule to the parent div. I wouldn't have uploaded it if it didn't work. Perhaps you're not explaining your problem clearly? As for your query about css commenting, that's a standard for hiding css from older browsers.

Hello again

could you please re-read my question?
i i really need is to align the text thats all, your example is not allowing me to do that.
like i said, try it yourself and see what you get, if you don't know how to test it, you
have to test it with something like these...

Hello world, Hello world, Hello world
https://www.experts-exchange.com, experts
Hello world, Hello world, Hello world, Hello world


if your example works ok, you should get this result:

Hello      world,     Hello     world,    Hello     world
www .    experts-    exchange.     com,  experts
Hello world, Hello world, Hello world, Hello world



Excuse me mate, copy and paste the code "as is" into a new webpage and open it in any browser you have. To demonstrate further, I've increased the amount of text. ITS ALL JUSTIFIED.

After 15 years of designing websites, you'd think one would be able to justify a fricking paragraph!

If it's not working for you, post the source of the page you're implimenting it in and I'll show you where you're going wrong.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Q_24364149</title>
<style type="text/css">
<!--
#wrapper_justify {
	font: 12px Arial, Helvetica, sans-serif;
	text-align: justify;
	width: 140px;
}
-->
</style>
</head>
<body>
<div id="wrapper_justify">Content for id "wrapper_justify" Goes Here
  <div>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. </div>
  <div>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. </div>
  <div>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. 
  	<div>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. </div>
  </div>
</div>
</body></html>

Open in new window


Hi v2Media,

This time did work, Now i think the problem is me, let me explain.
since i work a lot with pages base on div code, i use a css div code editor, so when ever
i edit something or i start a new project, the result is something like the following page.
Please take a look and see. I try to add your code to it, but it doesn't work, what can it be
that i am doing wrogn?
<head>
<title>EE</title>
 
<style type="text/css">
.ws8 {font-size: 11px;}
.wpmd {font-size: 13px;font-family: 'Arial';font-style: normal;font-weight: normal;}
DIV,UL,OL /* Left */
{
margin-top: 0px;
margin-bottom: 0px;
}
</style>
 
<style type="text/css">
<!--
#wrapper_justify {
        font: 12px Arial, Helvetica, sans-serif;
        text-align: justify;
        width: 140px;
}
-->
</style>
</head>
<body>
 
<div id="text1" style="position:absolute; overflow:hidden; left:34px; top:152px; width:963px; height:315px">
<div class="wpmd">
<div><div id="wrapper_justify"></div>
<div><font class="ws8">The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. </div>
<div><font class="ws8">The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. </div>
<div><font class="ws8">The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. </div>
<div><font class="ws8">The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. </div>
</div></div>
 
<div id="text2" style="position:absolute; overflow:hidden; left:34px; top:152px; width:272px; height:220px">
<div class="wpmd">
<div><font class="ws8">Based in Washington, D.C., the Corn Refiners Association is the national trade association representing the corn refining (wet milling) industry of the United States. The association, and its predecessors, have served this important segment of American agribusiness since 1913. </font></div>
<div><font class="ws8"><BR></font></div>
<div><font class="ws8"><BR></font></div>
<div><font class="ws8">Through a series of operating committees of executives from corn refining firms, the association conducts programs of technical service, public relations and government relations</font></div>
<div><font class="ws8"><BR></font></div>
</div></div>
</body>

Open in new window

Firstly, use a doctype declaration, xhtml 1 transitional is the most flexible.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Secondly, stick to valid html for the doctype, so with xhtml, use self closing tags where appropriate for eg <br /> and lowercase everything.

Thirdly, drop <font> tags for <span>. In your case the font tags is not necessary, just apply the class to the div - <div class="ws8"><br /></div>

Lastly, try and understand css inheritance, this is where you're going wrong. When you apply styling to a block level element, all elements contained *within the block* will inherit the style. In the example above, you've closed <div id="wrapper_justify"></div> without anything in it, so of course it's not going to work.!

Check out the corrected code below: -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Q_24364149</title> 
<style type="text/css">
<!--
body {
	font: 11px Arial, Helvetica, sans-serif;
}
div {
	margin: 0;
	padding: 0;
}
#text1,#text2 {
	text-align: justify;
	position:absolute; 
	overflow:hidden; 
	top:25px;
	width:273px;
}
#text1 {
	left:34px;
}
#text2 {
	left:325px;
}
-->
</style>
</head>
<body>
 
<div id="text1">
<div>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. </div>
<div>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. </div>
<div>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. </div>
<div>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. </div>
</div>
 
<div id="text2">
<div>Based in Washington, D.C., the Corn Refiners Association is the national trade association representing the corn refining (wet milling) industry of the United States. The association, and its predecessors, have served this important segment of American agribusiness since 1913. </div>
<div>&nbsp;</div>
<div>Through a series of operating committees of executives from corn refining firms, the association conducts programs of technical service, public relations and government relations</div>
<div class="shim">&nbsp;</div>
</div>
</body>
</html>

Open in new window


Hey this looks even better, but you know whats my other problem now?
i always use object absolute position like for text and also for images.

how can i get arround this?

Thanks

Example:
<div id="text1" style="position:absolute; overflow:hidden; left:34px; top:152px; width:963px; height:315px">

Open in new window

Absolute is absolute, there's no way around it. The only difference in the way I've done it is to put all that css positioning into the style tags in the header.

The more you stay away from inline styling (the way you do it), the better. All that styling in my example can be placed into an external css file and reused in other pages on the site.

OK, but for example, suppose i am creating a page with like 9 images
and some kind of long text description in each of those images, then
i will defenelly have to use the position option for each of them, the
images and also the text.
Yes, you will. However if you follow the css logic that I've used in the example above you'll cut down on the amount of css required to do so. For eg, if you have 3 divs aligned left but at varying distances from the top, you only need 1 rule for left and 3 rules for top...

#text1, #text2, #text3 {
  position: absolute;
  left: 90px;
}
#text1 { top: 90px;}
#text2 {top:140px;}
#text3 {top:240px;}
Afterthought > Consider getting Dreamweaver. With DW you can plonk a div on the page and drag it anyplace; it handles all the css as you move the divs around.

Hey now that you mentioned "Dreamweaver", do you know if this program handle this problem?
i haven't use Dreamweaver since the first and second version, so i am not familiar with it anymore.
the css div editor i use right now is not bad, i can move all objects manually, images, text, and more.
the only thing or problem i am having with it, is the text align in each of the div cells.

could you please give an example on some image or text base on what you just post?
yeah base on my other post, the: Position, Top, Left, etc.

#text1, #text2, #text3 {
  position: absolute;
  left: 90px;
}
#text1 { top: 90px;}
#text2 {top:140px;}
#text3 {top:240px;}


Avatar of Gary
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.