CODEWITHSUNDEEP
htmlcss
Jecki
Jecki

Reputation: 802

How do i adjust CSS position

I have the following div which looks like 

 @namehere   texthereee         today       10 retweet
                                replay       
                                favorite

i am trying to edit css to let the final shape look like

@namehere   texthereee  testetest              10 retweet
            today   replay   favorite

my current css looks like 

 .top-tweet, .top-tweet a
 {
font-size: 13px;
text-align: center;
 }
  .col_3 a
 {
font-size: 12px;
 }
 .top-tweet .col_1
 {
width: 60px;
  }
  .top-tweet .col_2
  {
width: 375px;
text-align: left;
  }
  .top-tweet .col_3
  {
width: 100px;
   }
   .top-tweet .col_4
   {
width: 60px;
   }

here html which contain the div that i am looking to adjust , 

         echo "<div class='divrow top-tweet'>";

    echo "<li class='col_1' ><a href='http://www.twitter.com/#!/" . $tweeted_by . "'> <img src='" . $avatar . "' />" . $orig_tweeted_by . " </a></li>";

    echo "<li class='col_2'> <div><a class='text_bigger' href='http://www.twitter.com/#!/" . $tweeted_by . "' style='font-size:13px'>@".$tweeted_by."</a></div>      " . $tweet . "</li>";

    echo "<li class='col_3'> <a href='http://www.twitter.com/#!/" . $tweeted_by . "/status/" . $id . "'>"  . $since . " </a> ";

    echo "<li class='col_3'> <a href='https://twitter.com/intent/tweet?in_reply_to="  . $id . "'> Reply  </a>  ";
    echo "<li class='col_3'> <a href='https://twitter.com/intent/favorite?tweet_id="  . $id . "'> Favorite  </a>  ";


    echo "<li class='col_4'>".$retweet_count."<br>retweet</li>";    
    echo "</div>"; 
}
echo "</div>";

.col_1..3 is today replay fav

Any tips ?

Upvotes: 0

Views: 92

Answers (2)

stacktrace
stacktrace

Reputation: 319

It helps if you post the html you're trying to work with.

Anyway, try this.

​<div class="main">
    <div class="col_1">@namehere</div>
    <div class="col_2">
        <div>text here.. text here..</div>
        <div>
            <div class="action">today</div>
            <div class="action">replay</div>
            <div class="action">favorite</div>
        </div>
    </div>
    <div class="col_3">10 retweet</div>
</div>

.main {width: 500px}
.col_1, .col_3, .action {width: 100px; float: left}
.col_2 {width: 300px; float: left}

Upvotes: 1

NullPoiиteя
NullPoiиteя

Reputation: 57312

try one class in all div and float left all them and set the width you want for

jsfiddle

you can also give different width 

<div class="one">skfhsfs</div> 
<div class="one">skfhsfs</div>
<div class="one">skfhsfs</div>
<div class="one">skfhsfs</div>

css

.one{
    width:100px;
    border:1px solid red;
    float:left;
}​

Upvotes: 1

Related Questions