CODEWITHSUNDEEP
htmlcss
shadeed9
shadeed9

Reputation: 1826

Clear all elements under a certain div

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,

Upvotes: 0

Views: 98

Answers (5)

Nabi
Nabi

Reputation: 304

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

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105853

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.

Upvotes: 1

LvdM
LvdM

Reputation: 15

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/

Upvotes: 0

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

DEMO

Add margin 

.meta{
margin-right: 70px;
}

DEMO

or add padding

.meta{
padding-right: 70px;
}

or use transform

Upvotes: 1

Leo Bedrosian
Leo Bedrosian

Reputation: 3789

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.

Upvotes: 1

Related Questions