Photoshop Question posted in
The official user guide can be found here.

Clear all elements under a certain div – Photoshop

I’m working on a news feed and I faced the following:
I want to clear all items under the avatar, so there is no wrapped text or anything below.

This image shows the issue:
http://imgur.com/RgReblc

I want it to be like this (made it with Photoshop):
http://imgur.com/1xP7rnn

The code:

.news .news-item .avatar {
  background-image: url("https://dl.dropboxusercontent.com/u/35853519/zakzek.png");
  width: 55px;
  height: 55px;
  background-size: cover;
  float: right;
  margin-left: 15px;
  display: block;
}

JSFiddle (see full screen for better view):
http://jsfiddle.net/shadeed9/6npjgt7y/8/

Thanks,

Tags:

5

Answers


  1. 0

    DEMO

    Add margin 

    .meta{
margin-right: 70px;
}

    DEMO

    or add padding

    .meta{
padding-right: 70px;
}

    or use transform

    Login or Signup to reply.
  2. 0

    Without altering the structure of the HTML, one way to achieve that is to add a margin on the meta content div with CSS. Like so:

    div.meta { margin-right: 75px; }

    That will move everything to the left. Just make the margin larger than your avatar image width and there won’t be any wrapping.

    Login or Signup to reply.
  3. 0

    Giving the avatar and the h2 element the property display: inline-block will do the trick, also set an width for the h2 element.

    http://jsfiddle.net/6npjgt7y/9/

    Login or Signup to reply.
  4. 0

    You can use a table, put the avatar in one column and your other contents in second column, like this:

    <div class="news" dir="rtl">
    <div class="news-item">
        <table>
            <tr>
                <td style="vertical-align: top;">
                    <div class="avatar"></div>
                </td>
                <td>
                    <div class="meta">
                        <h1>اطلاق تطبيق مسنجر بلاك بيري رسميًا إلى أندرويد وiOS7</h1>
                        <h2>لندن - "القدس" - كشف مصدر من شركة اتصالات اميركية أن الطلب المسبق على هاتف "أبل" الجديد "آيفون 5 سي" ليس "هائلاً" كما أن حجم المعروض منه ومن النسخة الأعلى سعراً جاء مخيباً للآمال. كشفت "أبل" الأسبوع الماضي النقاب عن أحدث طرازين...</h2>
                        <img src="https://dl.dropboxusercontent.com/u/35853519/apple.jpg" alt="Apple news" />
                        <div class="zakzeks-share">
                            <div class="number"><i class="flaticon-social19"></i>عدد الزقزقات 17</div>

                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div> <!-- End of news -->
    Login or Signup to reply.
  5. 0

    If it is about dealing with float, then the overflow:hidden; rule is fine.

    It shows element where float elements are standing as much inside than aside and earlier in the flow of the document.

    http://jsfiddle.net/6npjgt7y/14/

    .meta {
    overflow:hidden;
}

    It’s about layout 🙂
    So does trigger it as well : display:table/inline-block/flex and so does float.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search