CODEWITHSUNDEEP
htmlcssapachefeed
JJ Stamp
JJ Stamp

Reputation: 131

Create three column feed layout

I am making a website and I am having trouble setting up my three social media feeds in three columns. It would be set up such that the layout looks like...

| twitter feed |5px pad| facebook feed |5px pad| instagram feed|

I am using facebook and twitter's code for feed widgets and SnapWidget's code for an instagram feed.

here is my html

<!-- feed wrapper -->
  <div class="feed">
    <!-- twitter feed -->
    <div class="first">
      <a class="twitter-timeline"
        data-width="405"
        data-height="780"
        href="https://twitter.com/UMNSkulls">Tweets by UMNSkulls
      </a>
      <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
    </div>

    <!-- facebook feed -->
    <div class="second">
      <div class="fb-page"
        data-href="https://www.facebook.com/PhiKapMN/"
        data-tabs="timeline"
        data-width="405"
        data-height="780"
        data-small-header="true"
        data-adapt-container-width="true"
        data-hide-cover="false"
        data-show-facepile="false">
        <blockquote cite="https://www.facebook.com/PhiKapMN/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/PhiKapMN/">Phi Kappa Sigma at Minnesota</a></blockquote>
      </div>
    </div>

    <!-- SnapWidget -->
    <div class="third">
      <iframe src="https://snapwidget.com/embed/238951" class="snapwidget-widget" allowTransparency="false" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:405px; height:780px; background-color:white;"></iframe>
    </div>
  </div>

here is my css for the feed wrapper

.feed {
  width: 1300px;
  clear: both;
}

.first {
  width: 405px;
  height: 780px;
  padding-right: 5px;
  float:left;
}
.second {
  width: 405px;
  height: 780px;
  padding-right: 5px;
  float left;
}
.third {
  width: 405px;
  height: 780px;
  float:right;
}

My website is here if you would like to see the problem I am having with the code I have posted above. Thanks for any and all help and criticism!

Upvotes: 0

Views: 1361

Answers (3)

Shakir Ahmad
Shakir Ahmad

Reputation: 3

Use flex like below

.feed {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

Upvotes: 0

Naresh
Naresh

Reputation: 872

There are couple of ways to do this

  1. You can use CSS3 flex-box Check out the link here
  2. You can calculate using percentages/vw/vh units

Upvotes: 1

Roland
Roland

Reputation: 312

I think you should float your .first, .second and. third to the left. That way you'll get them in right order

Upvotes: 0

Related Questions