CODEWITHSUNDEEP
htmlcssresponsive-design
gsiradze
gsiradze

Reputation: 4733

Responsive background image Social Icons

I have that section:

<section class="socialIcons">
  <div class="fbIcon"></div>
  <div class="fbIcon"></div>
  <div class="fbIcon"></div>
  <div class="someClass">
    <h2>text</h2>
  </div>
</section>

and I want them to be all in one row. Left from each other and if client will resize browser at first social icons must resize and someClass div must stay in the right side. How can I do that? I even can't give width and height 100% to fb icons div since it disappears.

JSfiddle demo

Upvotes: 1

Views: 86

Answers (2)

giorgi abramishvili
giorgi abramishvili

Reputation: 44

JSFiddle Demo1

    .fbIcon {
       background: url(http://i.imgur.com/tLHwYNw.png) no-repeat;
       height: 80px;
       width: 80px;
       float: left;
       margin-right: 20px;
       margin-top: 12px;
       cursor: pointer;
       display:inline-block;
   }

.someClass {
    width: 50%;
    height: 90px;
    background: #ff7043;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    float: right;
    text-align: center;
    cursor: pointer;
    margin-top: 5px;
}

.someClass > h2 {
    color: #ffffff;
    margin: auto;
    font-size: 24px;
    vertical-align: middle;
    line-height: 90px;
}

or

JSFiddle Demo2

    .fbIcon {
    width: 14%;
    float: left;
    margin-right: 2%;
    margin-top: 12px;
    cursor: pointer;
    display: inline-block;
}

.someClass {
    width: 50%;
    height: 90px;
    background: #ff7043;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    float: right;
    text-align: center;
    cursor: pointer;
    margin-top: 5px;
}

.someClass > h2 {
    color: #ffffff;
    margin: auto;
    font-size: 24px;
    vertical-align: middle;
    line-height: 90px;
}

Upvotes: 1

Joel
Joel

Reputation: 456

Not my cleanest work, but you can clean it up: https://jsfiddle.net/JTBennett/Lbkyzcav/4/

Hopefully that's close to what you were asking for, but it's hard to tell by your description...

I'd try to avoid using absolute positioning, though you can do it with this:

position:absolute; right:0;

If you specify a height for a wrapper and float it right with your styled wrapper in there, it's a little cleaner - inherent position is the better way to go in my opinion.

It's just a matter of finding the right heights and widths now.

Upvotes: 0

Related Questions