CODEWITHSUNDEEP
htmlcssiframe
anon123
anon123

Reputation: 39

Iframe moves content down from neighbour element

I'm using display: table-* to style a basic structure.

#page {
  display: table;
  width: 1000px;
  margin: 0 auto;
}

#events,
#righ_sidebar {
  display: table-cell;
}

#events {
  width: 75%;
}

#righ_sidebar {
  width: 25%;
}
<div id="page">
  <div id="events">
    <h1>Events</h1>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>

  <div id="righ_sidebar">
    <iframe id="up2europe" marginheight="5" marginwidth="5" src="https://www.up2europe.eu/widget/go/181d4bdc08289da3d78b79ee5f9e7e2d"></iframe>
  </div>
</div>

The problem is that the iframe from #righ_sidebar it moves down the content from #events. How to use iframe and display table-* together, but correctly aligned?

enter image description here

Upvotes: 0

Views: 46

Answers (2)

VXp
VXp

Reputation: 12058

You can do it with the Flexbox:

#page {
  display: flex; /* displays flex-items (children) inline */
  width: 1000px;
  margin: 0 auto;
}

#events {
  flex: 3; /* 75% */
}

#righ_sidebar {
  flex: 1; /* 25% */
}
<div id="page">
  <div id="events">
    <h1>Events</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
  <div id="righ_sidebar">
    <iframe id="up2europe" marginheight="5" marginwidth="5" src="https://www.up2europe.eu/widget/go/181d4bdc08289da3d78b79ee5f9e7e2d"></iframe>
  </div>
</div>

Upvotes: 1

Dhanil
Dhanil

Reputation: 542

add style float:left; for '#events' and float:right; for #righ_sidebar

Upvotes: 0

Related Questions