• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 384
  • Last Modified:

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:
http://www.experts-exchange.com/Programming/Languages/Scripting/Q_24344267.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.

0
at_the_biginning
Asked:
at_the_biginning
  • 7
  • 6
1 Solution
 
v2MediaCommented:
You're actually using tag attributes, not css, for your styling above.

If you set a style for the parent div, that style is inherited by the divs within.
<!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>Content for New Div Tag Goes Here</div>
  <div>Content for New Div Tag Goes Here</div>
  <div>Content for New Div Tag Goes Here
  	<div>Content for New Div Tag Goes Here</div>
  </div>
</div>
</body></html>

Open in new window

0
 
at_the_biginningAuthor Commented:

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.



0
 
v2MediaCommented:
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.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
at_the_biginningAuthor Commented:

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
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



0
 
v2MediaCommented:
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

0
 
at_the_biginningAuthor Commented:

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

0
 
v2MediaCommented:
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

0
 
at_the_biginningAuthor Commented:

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

0
 
v2MediaCommented:
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.
0
 
at_the_biginningAuthor Commented:

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.
0
 
v2MediaCommented:
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;}
0
 
v2MediaCommented:
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.
0
 
at_the_biginningAuthor Commented:

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;}


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

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 7
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now