#1
  1. No Profile Picture
    Registered User
    SEO Chat Explorer (0 - 99 posts)

    Join Date
    Sep 2010
    Posts
    2
    Rep Power
    0

    Text-align: justify in 2 different width


    I want to create text-align: justify in 2 different width (1 and 2) like below.

    texttexttexttexttexttexttexttexttexttexttexttext (1)
    texttexttexttexttexttexttexttexttexttexttexttext (1)
    texttexttexttexttexttext (2)
    texttexttexttexttexttext (2)
    texttexttexttexttexttexttexttexttexttexttexttext (1)
    texttexttexttexttexttext (2)
    texttexttexttexttexttexttexttexttexttexttexttext (1)
    texttexttexttexttexttexttexttexttexttexttexttext (1)
    texttexttexttexttexttext (2)

    these are inside <p>.
    I created <span> and added display: block; text-align: justify; for (1) and this worked.
    But to create (2) text-align: justify, I created a div class and set width to 50% and also tried to create <p class="2"> and set the width 50% but both way the text wont get justifyed...

    Please give me an advice on this.
  2. #2
  3. No Profile Picture
    Registered User
    SEO Chat Explorer (0 - 99 posts)

    Join Date
    Sep 2010
    Posts
    2
    Rep Power
    0
    Here is my HTML / CSS Code.
    Would be great if anyone could help me on this?

    As I couldn't align justify on only 2 lines, I created some p class and added letter-spacing on them.
    If there are any other ways to do this, I would like to know.


    <body>
    <div id="page-wrap"> <!-- headerも含めたコンテント。footer抜き -->
    <div id="main-content"><!-- headerを含まない、メインコンテント -->
    <div id="right-col"><!-- 2コラムあります。 -->
    <div id="right-left">
    <p class="space"></p>
    <p class="letterspaceone">line1line1 line1line1 line1line1
    line2line2line2 line2line2line2 line2</p>

      <p>line3line3line3 line3</p>
    <p class="short">line4line4 line4line4</p>
    <p class="letterspacetwo">line5line5 line5</p>
       <p class="justify">line6line6 line6line6 line6 line6
    line7line7 line7 line7line7 line7 line7
    line8 line8line8 line8:</p>
    </div><!-- END right-left -->
    </div><!-- END right-col -->
    </div><!-- END main-content -->
    </div><!-- END pagewrap -->
    </body>


    * {
    margin: 0;
    padding: 0;
    }

    html, body {
    font-size: 90%;
    font-family: Helvetica, Arial, sans-serif;
    height: 100%;
    min-height: 100%;
    margin: 0 auto;

    }

    div#page-wrap {
    width:800px;
    /*min-height: 100%;*/
    margin-left:auto;
    margin-right:auto;
    overflow:auto;*/
    }

    div#main-content {
    margin-left:auto;
    margin-right:auto;
    width: 100%;
    }

    div#main-content div#left-nav {
    float: left;
    width: 230px;
    }

    div#main-content div#right-col {
    float: right;
    width: 557px;
    margin-left: 9px;
    }

    div#main-content div#right-col #right-left {
    float: left;
    width: 45%;
    padding-top: 5px;
    padding-left: 3%;
    }

    div#main-content div#right-col #right-left p,#right-right p {
    font-size: 85%;
    margin: 0px;
    line-height: 1.3em;
    color:#656464;
    text-align:justify;
    }

    div#main-content #right-left .short {
    margin: 0px;
    display: block;
    width: 42%;
    color:#656464;
    line-height: 1.3em;
    text-align: justify;
    }

    div#main-content #right-left .letterspaceone {
    letter-spacing: -0.2px;
    text-align:justify;
    }
    div#main-content #right-left .letterspacetwo {
    letter-spacing: 0.85px;
    }
    div#main-content #right-left .justify {
    width: 100%;
    text-align:justify;
    }
  4. #3
  5. No Profile Picture
    Registered User
    SEO Chat Explorer (0 - 99 posts)

    Join Date
    Feb 2011
    Location
    Eureka Springs, AR
    Posts
    11
    Rep Power
    0

    Major work needed here


    I had a look at what you are trying to do, but could not make any real sense out of your code. It needs some real work. I think you have made it much more complicated than it needs to be.

    Just realize that the <p> width is determined by the width of the container it is in. If it is inside a div with a width of 500px, then simply set one paragraph width to 400px and another to a width of 250px or something like that, then in both of these, set your text-align:justify.

    For instance you could do this.

    p .one {
    width:400px;
    text-align:justify;
    }
    p .two {
    width:250px;
    text-align:justify;
    }

    Then you just do this,

    <p class="one"> Some text goes here.</p>
    <p class="two">Other text here.</p>

    And then just alternate them for whatever effect you are going for.

    That is about as far as I go with the information provided.

    Here is an example css that I tested and works.

    <style type="text/css">
    *{
    margin:0;
    padding:0;
    }
    body{
    background:#ccc;
    width:100%;
    }
    #content{
    margin:0 auto;
    padding:0;
    width:800px;
    height:auto;
    }
    p.one{
    width:400px;
    text-align:justify;
    padding-bottom:15px;
    }
    p.two{
    width:250px;
    text-align:justify;
    padding-bottom:15px;
    }
    </style>



    Hope it helped.
    Last edited by seo-lars; Feb 23rd, 2011 at 08:30 AM.

Similar Threads

  1. Keyword density
    By elitewebs in forum Google Optimization
    Replies: 23
    Last Post: Aug 3rd, 2006, 02:03 PM
  2. Is Text Only Worth The Effort
    By Tambourine in forum Search Engine Optimization
    Replies: 1
    Last Post: Feb 17th, 2006, 04:25 PM
  3. Keywords into anchor text
    By Facundo in forum Search Engine Optimization
    Replies: 10
    Last Post: Dec 17th, 2005, 08:43 PM
  4. Importance of text surrounding anchor text.
    By laiwa in forum Google Optimization
    Replies: 8
    Last Post: Jul 4th, 2004, 03:40 PM
  5. Is it ok to hide text, when you can still read the text?
    By sorvoja in forum Google Optimization
    Replies: 2
    Last Post: Jun 18th, 2004, 04:43 AM

IMN logo majestic logo threadwatch logo seochat tools logo