Reputation: 47

Floating sidebar sticks to second post div

I have a div container for a blog post, and div container for a sidebar, for an about section. The post container the is floating left, while the about container is floating right.

The problem is, if I copy and paste a second post container, the sidebar container moves down with the second container. In addition I have a div that's holding the sections. Does anyone have any suggestions? I'm pretty sure it has to do with the floating.

Here's a photo of the layout I'm going for -

Instead of the sidebar sticking next to post container number 1, like in the photo. My code is sticking to number 2.

.post-container {
  width: 65%;
  min-height: 400px;
  margin: 40px 0px 40px 0px;
  padding: 20px 40px 20px 40px;
  background-color: #ffffff;
  border-radius: 5px;
  float: left;
}
#sidebar-container {
  width: 22%;
  min-height: 400px;
  margin: 40px 0px 40px 0px;
  padding: 0px 15px;
  padding-left: 20px;
  background-color: #4e7de8;
  float: right;
  position: relative;
  border-radius: 5px;
}

<!--First Post Container-->
<div class="post-container">
  <h1>Example Post</h1>
  <p>Aliquip hic nescius, anim te officia quo dolore, illum appellat ne admodum, an se comprehenderit. Mandaremus nisi consequat, nostrud voluptatibus et incididunt. Aut aute mentitum, tempor eu mandaremus non labore vidisse se concursionibus aut possumus quorum fugiat te aliqua, ita quid appellat laboris ab summis ullamco e firmissimum, aliqua quamquam ea quorum duis, aut commodo sempiternum. Litteris varias excepteur ingeniis. Nisi iudicem qui dolore aute. Dolore ne ita labore proident, ab labore occaecat deserunt. Incididunt amet offendit.
  </p>
  <p><b>Sub Heading</b></p>
  <p>Amet ex arbitror ab quorum, sint appellat qui esse legam quo probant legam ullamco, an ipsum ullamco coniunctione est litteris familiaritatem hic eiusmod, eram hic quibusdam iis multos sed occaecat duis magna hic enim ne ut fore aut aliqua. Pariatur dolore mentitum admodum ea pariatur non labore, hic ipsum voluptate commodo nam se et malis fore enim, nam enim aute hic mandaremus, si qui malis iudicem, anim relinqueret vidisse quis nescius, officia amet admodum mandaremus. Incurreret elit consequat mentitum ita o quorum sunt eram nostrud an e summis sempiternum ad aut culpa praetermissum, doctrina nisi expetendis si doctrina et duis o probant quid voluptate, elit est admodum qui legam. Non dolor iudicem ingeniis si laboris quid aliquip incurreret. Officia an enim incididunt, singulis elit cernantur. Aut quamquam in eiusmod. Id non irure esse duis quo non dolore enim minim senserit, est incididunt si eiusmod, quem te laborum ex lorem. Ex illum transferrem qui esse quibusdam coniunctione. Nisi a aliquip est in voluptate et cupidatat. Offendit ab ipsum, anim incididunt non officia aut se malis voluptate in eram quibusdam eu legam quae iis iis probant ne officia, irure excepteur est philosophari, eram cupidatat a lorem lorem ab et eram litteris. Tamen appellat do nisi amet ex aut quo veniam ipsum malis eu dolore voluptatibus proident nisi commodo, fabulas dolor tempor. Possumus nulla iis quamquam despicationes, doctrina do incididunt an quamquam an quamquam, et te sint possumus. Illum expetendis praesentibus e iis minim elit sunt cernantur. Tamen nescius quo consectetur ea doctrina id noster, te quorum proident, aut quorum coniunctione, hic quid probant firmissimum ex te consequat in arbitror, varias aut officia in ipsum, excepteur cillum minim voluptate sunt. Et eu veniam cernantur, expetendis est fore, hic ad dolore velit minim sed ab o quem admodum, o quae quae ex incididunt iis aliquip summis o eiusmod concursionibus sed e culpa exquisitaque, eram si cupidatat ut fugiat. Quo cillum ullamco laborum. Officia elit deserunt nam enim comprehenderit litteris aliqua quibusdam, anim mandaremus eu eiusmod ita de summis fore do singulis, cillum si non dolore ullamco de te amet occaecat aut e ab firmissimum, nulla instituendarum nostrud aute mentitum. Quem senserit do exquisitaque, ne magna mentitum. Ad aute adipisicing. Nam mandaremus adipisicing do doctrina sed quamquam, ut in exquisitaque, velit aut deserunt ubi irure.</p>
</div>

<!--Second Post Container-->
<div class="post-container">
  <h1>Example Post</h1>
  <p>Aliquip hic nescius, anim te officia quo dolore, illum appellat ne admodum, an se comprehenderit. Mandaremus nisi consequat, nostrud voluptatibus et incididunt. Aut aute mentitum, tempor eu mandaremus non labore vidisse se concursionibus aut possumus quorum fugiat te aliqua, ita quid appellat laboris ab summis ullamco e firmissimum, aliqua quamquam ea quorum duis, aut commodo sempiternum. Litteris varias excepteur ingeniis. Nisi iudicem qui dolore aute. Dolore ne ita labore proident, ab labore occaecat deserunt. Incididunt amet offendit.
  </p>
  <p><b>Sub Heading</b></p>
  <p>Amet ex arbitror ab quorum, sint appellat qui esse legam quo probant legam ullamco, an ipsum ullamco coniunctione est litteris familiaritatem hic eiusmod, eram hic quibusdam iis multos sed occaecat duis magna hic enim ne ut fore aut aliqua. Pariatur dolore mentitum admodum ea pariatur non labore, hic ipsum voluptate commodo nam se et malis fore enim, nam enim aute hic mandaremus, si qui malis iudicem, anim relinqueret vidisse quis nescius, officia amet admodum mandaremus. Incurreret elit consequat mentitum ita o quorum sunt eram nostrud an e summis sempiternum ad aut culpa praetermissum, doctrina nisi expetendis si doctrina et duis o probant quid voluptate, elit est admodum qui legam. Non dolor iudicem ingeniis si laboris quid aliquip incurreret. Officia an enim incididunt, singulis elit cernantur. Aut quamquam in eiusmod. Id non irure esse duis quo non dolore enim minim senserit, est incididunt si eiusmod, quem te laborum ex lorem. Ex illum transferrem qui esse quibusdam coniunctione. Nisi a aliquip est in voluptate et cupidatat. Offendit ab ipsum, anim incididunt non officia aut se malis voluptate in eram quibusdam eu legam quae iis iis probant ne officia, irure excepteur est philosophari, eram cupidatat a lorem lorem ab et eram litteris. Tamen appellat do nisi amet ex aut quo veniam ipsum malis eu dolore voluptatibus proident nisi commodo, fabulas dolor tempor. Possumus nulla iis quamquam despicationes, doctrina do incididunt an quamquam an quamquam, et te sint possumus. Illum expetendis praesentibus e iis minim elit sunt cernantur. Tamen nescius quo consectetur ea doctrina id noster, te quorum proident, aut quorum coniunctione, hic quid probant firmissimum ex te consequat in arbitror, varias aut officia in ipsum, excepteur cillum minim voluptate sunt. Et eu veniam cernantur, expetendis est fore, hic ad dolore velit minim sed ab o quem admodum, o quae quae ex incididunt iis aliquip summis o eiusmod concursionibus sed e culpa exquisitaque, eram si cupidatat ut fugiat. Quo cillum ullamco laborum. Officia elit deserunt nam enim comprehenderit litteris aliqua quibusdam, anim mandaremus eu eiusmod ita de summis fore do singulis, cillum si non dolore ullamco de te amet occaecat aut e ab firmissimum, nulla instituendarum nostrud aute mentitum. Quem senserit do exquisitaque, ne magna mentitum. Ad aute adipisicing. Nam mandaremus adipisicing do doctrina sed quamquam, ut in exquisitaque, velit aut deserunt ubi irure.</p>
</div>
  
<!--Sidebar Container-->
<div id="sidebar-container">
  <h1>About Me</h1>
  <img src="placeholder.png">
  <p>Fore si est enim vidisse ea sed ab quorum fore anim, magna officia qui incididunt, ullamco varias legam proident enim. Est ex exquisitaque. Est aliqua officia de offendit consectetur a commodo. Ut e cillum sint eram in laboris varias velit eu eram. Duis quamquam fidelissimae. Esse appellat qui singulis id quid officia est coniunctione. Laborum familiaritatem sed expetendis, hic sed aliqua enim esse, noster probant se eiusmod, cillum vidisse pariatur. Ipsum fidelissimae deserunt multos pariatur. Senserit firmissimum si cernantur, sed si culpa arbitror. Mentitum dolore ullamco, anim de possumus, incididunt fugiat nescius pariatur est aliqua expetendis nam incurreret. Ullamco fore ea commodo illustriora non te ea relinqueret. Culpa philosophari admodum anim commodo. Mandaremus dolor id eiusmod praetermissum, quis sed arbitror non aliqua ut ab ut sempiternum nam do cillum relinqueret se esse ex o summis quamquam, ex lorem tempor familiaritatem ad de minim officia laborum ne noster consectetur admodum culpa admodum. Sunt vidisse o admodum a elit doctrina non amet nisi.</p>
</div>

Upvotes: 1

Answers (3)

Stickers

Reputation: 78686

Move the sidebar div above the main divs in the markup.

<div id="sidebar-container">...</div>
<div class="post-container">...</div>
<div class="post-container">...</div>

You can remove float:left on the main divs once you do that.

I also suggest to use box-sizing:border-box for all the relevant divs, so that any padding or border will be part of the width, that can make sure they are always staying side by side.

.post-container {
  width: 65%;
  min-height: 400px;
  margin: 40px 0px 40px 0px;
  padding: 20px 40px 20px 40px;
  background-color: #ffffff;
  border-radius: 5px;
  /* float: left; */
  box-sizing: border-box; /*added*/
}
#sidebar-container {
  width: 22%;
  min-height: 400px;
  margin: 40px 0px 40px 0px;
  padding: 0px 15px;
  padding-left: 20px;
  background-color: #4e7de8;
  float: right;
  position: relative;
  border-radius: 5px;
  box-sizing: border-box; /*added*/
}

<div id="sidebar-container">
  <h1>About Me</h1>
  <img src="placeholder.png">

  <p>Fore si est enim vidisse ea sed ab quorum fore anim, magna officia qui incididunt, ullamco varias legam proident enim. Est ex exquisitaque. Est aliqua officia de offendit consectetur a commodo. Ut e cillum sint eram in laboris varias velit eu eram.
    Duis quamquam fidelissimae. Esse appellat qui singulis id quid officia est coniunctione. Laborum familiaritatem sed expetendis, hic sed aliqua enim esse, noster probant se eiusmod, cillum vidisse pariatur. Ipsum fidelissimae deserunt multos pariatur.
    Senserit firmissimum si cernantur, sed si culpa arbitror. Mentitum dolore ullamco, anim de possumus, incididunt fugiat nescius pariatur est aliqua expetendis nam incurreret. Ullamco fore ea commodo illustriora non te ea relinqueret. Culpa philosophari
    admodum anim commodo. Mandaremus dolor id eiusmod praetermissum, quis sed arbitror non aliqua ut ab ut sempiternum nam do cillum relinqueret se esse ex o summis quamquam, ex lorem tempor familiaritatem ad de minim officia laborum ne noster consectetur
    admodum culpa admodum. Sunt vidisse o admodum a elit doctrina non amet nisi.</p>
</div>

<div class="post-container">

  <h1>Example Post</h1>
  <p>Aliquip hic nescius, anim te officia quo dolore, illum appellat ne admodum, an se comprehenderit. Mandaremus nisi consequat, nostrud voluptatibus et incididunt. Aut aute mentitum, tempor eu mandaremus non labore vidisse se concursionibus aut possumus
    quorum fugiat te aliqua, ita quid appellat laboris ab summis ullamco e firmissimum, aliqua quamquam ea quorum duis, aut commodo sempiternum. Litteris varias excepteur ingeniis. Nisi iudicem qui dolore aute. Dolore ne ita labore proident, ab labore
    occaecat deserunt. Incididunt amet offendit.
  </p>

  <p><b>Sub Heading</b>
  </p>

  <p>Amet ex arbitror ab quorum, sint appellat qui esse legam quo probant legam ullamco, an ipsum ullamco coniunctione est litteris familiaritatem hic eiusmod, eram hic quibusdam iis multos sed occaecat duis magna hic enim ne ut fore aut aliqua. Pariatur
    dolore mentitum admodum ea pariatur non labore, hic ipsum voluptate commodo nam se et malis fore enim, nam enim aute hic mandaremus, si qui malis iudicem, anim relinqueret vidisse quis nescius, officia amet admodum mandaremus. Incurreret elit consequat
    mentitum ita o quorum sunt eram nostrud an e summis sempiternum ad aut culpa praetermissum, doctrina nisi expetendis si doctrina et duis o probant quid voluptate, elit est admodum qui legam. Non dolor iudicem ingeniis si laboris quid aliquip incurreret.
    Officia an enim incididunt, singulis elit cernantur. Aut quamquam in eiusmod. Id non irure esse duis quo non dolore enim minim senserit, est incididunt si eiusmod, quem te laborum ex lorem. Ex illum transferrem qui esse quibusdam coniunctione. Nisi
    a aliquip est in voluptate et cupidatat. Offendit ab ipsum, anim incididunt non officia aut se malis voluptate in eram quibusdam eu legam quae iis iis probant ne officia, irure excepteur est philosophari, eram cupidatat a lorem lorem ab et eram litteris.
    Tamen appellat do nisi amet ex aut quo veniam ipsum malis eu dolore voluptatibus proident nisi commodo, fabulas dolor tempor. Possumus nulla iis quamquam despicationes, doctrina do incididunt an quamquam an quamquam, et te sint possumus. Illum expetendis
    praesentibus e iis minim elit sunt cernantur. Tamen nescius quo consectetur ea doctrina id noster, te quorum proident, aut quorum coniunctione, hic quid probant firmissimum ex te consequat in arbitror, varias aut officia in ipsum, excepteur cillum
    minim voluptate sunt. Et eu veniam cernantur, expetendis est fore, hic ad dolore velit minim sed ab o quem admodum, o quae quae ex incididunt iis aliquip summis o eiusmod concursionibus sed e culpa exquisitaque, eram si cupidatat ut fugiat. Quo cillum
    ullamco laborum. Officia elit deserunt nam enim comprehenderit litteris aliqua quibusdam, anim mandaremus eu eiusmod ita de summis fore do singulis, cillum si non dolore ullamco de te amet occaecat aut e ab firmissimum, nulla instituendarum nostrud
    aute mentitum. Quem senserit do exquisitaque, ne magna mentitum. Ad aute adipisicing. Nam mandaremus adipisicing do doctrina sed quamquam, ut in exquisitaque, velit aut deserunt ubi irure.</p>
</div>

<div class="post-container">

  <h1>Example Post</h1>
  <p>Aliquip hic nescius, anim te officia quo dolore, illum appellat ne admodum, an se comprehenderit. Mandaremus nisi consequat, nostrud voluptatibus et incididunt. Aut aute mentitum, tempor eu mandaremus non labore vidisse se concursionibus aut possumus
    quorum fugiat te aliqua, ita quid appellat laboris ab summis ullamco e firmissimum, aliqua quamquam ea quorum duis, aut commodo sempiternum. Litteris varias excepteur ingeniis. Nisi iudicem qui dolore aute. Dolore ne ita labore proident, ab labore
    occaecat deserunt. Incididunt amet offendit.
  </p>

  <p><b>Sub Heading</b>
  </p>

  <p>Amet ex arbitror ab quorum, sint appellat qui esse legam quo probant legam ullamco, an ipsum ullamco coniunctione est litteris familiaritatem hic eiusmod, eram hic quibusdam iis multos sed occaecat duis magna hic enim ne ut fore aut aliqua. Pariatur
    dolore mentitum admodum ea pariatur non labore, hic ipsum voluptate commodo nam se et malis fore enim, nam enim aute hic mandaremus, si qui malis iudicem, anim relinqueret vidisse quis nescius, officia amet admodum mandaremus. Incurreret elit consequat
    mentitum ita o quorum sunt eram nostrud an e summis sempiternum ad aut culpa praetermissum, doctrina nisi expetendis si doctrina et duis o probant quid voluptate, elit est admodum qui legam. Non dolor iudicem ingeniis si laboris quid aliquip incurreret.
    Officia an enim incididunt, singulis elit cernantur. Aut quamquam in eiusmod. Id non irure esse duis quo non dolore enim minim senserit, est incididunt si eiusmod, quem te laborum ex lorem. Ex illum transferrem qui esse quibusdam coniunctione. Nisi
    a aliquip est in voluptate et cupidatat. Offendit ab ipsum, anim incididunt non officia aut se malis voluptate in eram quibusdam eu legam quae iis iis probant ne officia, irure excepteur est philosophari, eram cupidatat a lorem lorem ab et eram litteris.
    Tamen appellat do nisi amet ex aut quo veniam ipsum malis eu dolore voluptatibus proident nisi commodo, fabulas dolor tempor. Possumus nulla iis quamquam despicationes, doctrina do incididunt an quamquam an quamquam, et te sint possumus. Illum expetendis
    praesentibus e iis minim elit sunt cernantur. Tamen nescius quo consectetur ea doctrina id noster, te quorum proident, aut quorum coniunctione, hic quid probant firmissimum ex te consequat in arbitror, varias aut officia in ipsum, excepteur cillum
    minim voluptate sunt. Et eu veniam cernantur, expetendis est fore, hic ad dolore velit minim sed ab o quem admodum, o quae quae ex incididunt iis aliquip summis o eiusmod concursionibus sed e culpa exquisitaque, eram si cupidatat ut fugiat. Quo cillum
    ullamco laborum. Officia elit deserunt nam enim comprehenderit litteris aliqua quibusdam, anim mandaremus eu eiusmod ita de summis fore do singulis, cillum si non dolore ullamco de te amet occaecat aut e ab firmissimum, nulla instituendarum nostrud
    aute mentitum. Quem senserit do exquisitaque, ne magna mentitum. Ad aute adipisicing. Nam mandaremus adipisicing do doctrina sed quamquam, ut in exquisitaque, velit aut deserunt ubi irure.</p>
</div>

Edit: If you can't move the position of the sidebar, you can wrap the post containers into another div, and float it to the left.

<div class="posts-wrapper">
  <div class="post-container">...</div>
  <div class="post-container">...</div>
</div>
<div id="sidebar-container">...</div>

.posts-wrapper {
  width: 65%;
  float: left;
}
.post-container {
  min-height: 400px;
  margin: 40px 0px 40px 0px;
  padding: 20px 40px 20px 40px;
  background-color: #ffffff;
  border-radius: 5px;
}
#sidebar-container {
  width: 22%;
  min-height: 400px;
  margin: 40px 0px 40px 0px;
  padding: 0px 15px;
  padding-left: 20px;
  background-color: #4e7de8;
  float: right;
  position: relative;
  border-radius: 5px;
  box-sizing: border-box;
}

<div class="posts-wrapper">

  <div class="post-container">

    <h1>Example Post</h1>
    <p>Aliquip hic nescius, anim te officia quo dolore, illum appellat ne admodum, an se comprehenderit. Mandaremus nisi consequat, nostrud voluptatibus et incididunt. Aut aute mentitum, tempor eu mandaremus non labore vidisse se concursionibus aut possumus
      quorum fugiat te aliqua, ita quid appellat laboris ab summis ullamco e firmissimum, aliqua quamquam ea quorum duis, aut commodo sempiternum. Litteris varias excepteur ingeniis. Nisi iudicem qui dolore aute. Dolore ne ita labore proident, ab labore
      occaecat deserunt. Incididunt amet offendit.
    </p>

    <p><b>Sub Heading</b>
    </p>

    <p>Amet ex arbitror ab quorum, sint appellat qui esse legam quo probant legam ullamco, an ipsum ullamco coniunctione est litteris familiaritatem hic eiusmod, eram hic quibusdam iis multos sed occaecat duis magna hic enim ne ut fore aut aliqua. Pariatur
      dolore mentitum admodum ea pariatur non labore, hic ipsum voluptate commodo nam se et malis fore enim, nam enim aute hic mandaremus, si qui malis iudicem, anim relinqueret vidisse quis nescius, officia amet admodum mandaremus. Incurreret elit consequat
      mentitum ita o quorum sunt eram nostrud an e summis sempiternum ad aut culpa praetermissum, doctrina nisi expetendis si doctrina et duis o probant quid voluptate, elit est admodum qui legam. Non dolor iudicem ingeniis si laboris quid aliquip incurreret.
      Officia an enim incididunt, singulis elit cernantur. Aut quamquam in eiusmod. Id non irure esse duis quo non dolore enim minim senserit, est incididunt si eiusmod, quem te laborum ex lorem. Ex illum transferrem qui esse quibusdam coniunctione. Nisi
      a aliquip est in voluptate et cupidatat. Offendit ab ipsum, anim incididunt non officia aut se malis voluptate in eram quibusdam eu legam quae iis iis probant ne officia, irure excepteur est philosophari, eram cupidatat a lorem lorem ab et eram
      litteris. Tamen appellat do nisi amet ex aut quo veniam ipsum malis eu dolore voluptatibus proident nisi commodo, fabulas dolor tempor. Possumus nulla iis quamquam despicationes, doctrina do incididunt an quamquam an quamquam, et te sint possumus.
      Illum expetendis praesentibus e iis minim elit sunt cernantur. Tamen nescius quo consectetur ea doctrina id noster, te quorum proident, aut quorum coniunctione, hic quid probant firmissimum ex te consequat in arbitror, varias aut officia in ipsum,
      excepteur cillum minim voluptate sunt. Et eu veniam cernantur, expetendis est fore, hic ad dolore velit minim sed ab o quem admodum, o quae quae ex incididunt iis aliquip summis o eiusmod concursionibus sed e culpa exquisitaque, eram si cupidatat
      ut fugiat. Quo cillum ullamco laborum. Officia elit deserunt nam enim comprehenderit litteris aliqua quibusdam, anim mandaremus eu eiusmod ita de summis fore do singulis, cillum si non dolore ullamco de te amet occaecat aut e ab firmissimum, nulla
      instituendarum nostrud aute mentitum. Quem senserit do exquisitaque, ne magna mentitum. Ad aute adipisicing. Nam mandaremus adipisicing do doctrina sed quamquam, ut in exquisitaque, velit aut deserunt ubi irure.</p>
  </div>

  <div class="post-container">

    <h1>Example Post</h1>
    <p>Aliquip hic nescius, anim te officia quo dolore, illum appellat ne admodum, an se comprehenderit. Mandaremus nisi consequat, nostrud voluptatibus et incididunt. Aut aute mentitum, tempor eu mandaremus non labore vidisse se concursionibus aut possumus
      quorum fugiat te aliqua, ita quid appellat laboris ab summis ullamco e firmissimum, aliqua quamquam ea quorum duis, aut commodo sempiternum. Litteris varias excepteur ingeniis. Nisi iudicem qui dolore aute. Dolore ne ita labore proident, ab labore
      occaecat deserunt. Incididunt amet offendit.
    </p>

    <p><b>Sub Heading</b>
    </p>

    <p>Amet ex arbitror ab quorum, sint appellat qui esse legam quo probant legam ullamco, an ipsum ullamco coniunctione est litteris familiaritatem hic eiusmod, eram hic quibusdam iis multos sed occaecat duis magna hic enim ne ut fore aut aliqua. Pariatur
      dolore mentitum admodum ea pariatur non labore, hic ipsum voluptate commodo nam se et malis fore enim, nam enim aute hic mandaremus, si qui malis iudicem, anim relinqueret vidisse quis nescius, officia amet admodum mandaremus. Incurreret elit consequat
      mentitum ita o quorum sunt eram nostrud an e summis sempiternum ad aut culpa praetermissum, doctrina nisi expetendis si doctrina et duis o probant quid voluptate, elit est admodum qui legam. Non dolor iudicem ingeniis si laboris quid aliquip incurreret.
      Officia an enim incididunt, singulis elit cernantur. Aut quamquam in eiusmod. Id non irure esse duis quo non dolore enim minim senserit, est incididunt si eiusmod, quem te laborum ex lorem. Ex illum transferrem qui esse quibusdam coniunctione. Nisi
      a aliquip est in voluptate et cupidatat. Offendit ab ipsum, anim incididunt non officia aut se malis voluptate in eram quibusdam eu legam quae iis iis probant ne officia, irure excepteur est philosophari, eram cupidatat a lorem lorem ab et eram
      litteris. Tamen appellat do nisi amet ex aut quo veniam ipsum malis eu dolore voluptatibus proident nisi commodo, fabulas dolor tempor. Possumus nulla iis quamquam despicationes, doctrina do incididunt an quamquam an quamquam, et te sint possumus.
      Illum expetendis praesentibus e iis minim elit sunt cernantur. Tamen nescius quo consectetur ea doctrina id noster, te quorum proident, aut quorum coniunctione, hic quid probant firmissimum ex te consequat in arbitror, varias aut officia in ipsum,
      excepteur cillum minim voluptate sunt. Et eu veniam cernantur, expetendis est fore, hic ad dolore velit minim sed ab o quem admodum, o quae quae ex incididunt iis aliquip summis o eiusmod concursionibus sed e culpa exquisitaque, eram si cupidatat
      ut fugiat. Quo cillum ullamco laborum. Officia elit deserunt nam enim comprehenderit litteris aliqua quibusdam, anim mandaremus eu eiusmod ita de summis fore do singulis, cillum si non dolore ullamco de te amet occaecat aut e ab firmissimum, nulla
      instituendarum nostrud aute mentitum. Quem senserit do exquisitaque, ne magna mentitum. Ad aute adipisicing. Nam mandaremus adipisicing do doctrina sed quamquam, ut in exquisitaque, velit aut deserunt ubi irure.</p>
  </div>

</div>

<div id="sidebar-container">
  <h1>About Me</h1>
  <img src="placeholder.png">

  <p>Fore si est enim vidisse ea sed ab quorum fore anim, magna officia qui incididunt, ullamco varias legam proident enim. Est ex exquisitaque. Est aliqua officia de offendit consectetur a commodo. Ut e cillum sint eram in laboris varias velit eu eram.
    Duis quamquam fidelissimae. Esse appellat qui singulis id quid officia est coniunctione. Laborum familiaritatem sed expetendis, hic sed aliqua enim esse, noster probant se eiusmod, cillum vidisse pariatur. Ipsum fidelissimae deserunt multos pariatur.
    Senserit firmissimum si cernantur, sed si culpa arbitror. Mentitum dolore ullamco, anim de possumus, incididunt fugiat nescius pariatur est aliqua expetendis nam incurreret. Ullamco fore ea commodo illustriora non te ea relinqueret. Culpa philosophari
    admodum anim commodo. Mandaremus dolor id eiusmod praetermissum, quis sed arbitror non aliqua ut ab ut sempiternum nam do cillum relinqueret se esse ex o summis quamquam, ex lorem tempor familiaritatem ad de minim officia laborum ne noster consectetur
    admodum culpa admodum. Sunt vidisse o admodum a elit doctrina non amet nisi.</p>
</div>

Upvotes: 2

Mathieu Schaeffer

Reputation: 792

You could wrap your two post-container into a main div.

Here's a JsFiddle : DEMO

Upvotes: 0

Praveen Kumar Purushothaman

Reputation: 167182

It is because of the float: right's behaviour.

Solution #1

Put the right floated component as the first child and see it gets fixed.

.post-container {
  width: 65%;
  min-height: 400px;
  margin: 40px 0px 40px 0px;
  padding: 20px 40px 20px 40px;
  background-color: #ffffff;
  border-radius: 5px;
  float: left;
}
#sidebar-container {
  width: 22%;
  min-height: 400px;
  margin: 40px 0px 40px 0px;
  padding: 0px 15px;
  padding-left: 20px;
  background-color: #4e7de8;
  float: right;
  position: relative;
  border-radius: 5px;
}

<div id="sidebar-container">
  <h1>About Me</h1>
  <img src="placeholder.png">

  <p>Fore si est enim vidisse ea sed ab quorum fore anim, magna officia qui incididunt, ullamco varias legam proident enim. Est ex exquisitaque. Est aliqua officia de offendit consectetur a commodo. Ut e cillum sint eram in laboris varias velit eu eram.
    Duis quamquam fidelissimae. Esse appellat qui singulis id quid officia est coniunctione. Laborum familiaritatem sed expetendis, hic sed aliqua enim esse, noster probant se eiusmod, cillum vidisse pariatur. Ipsum fidelissimae deserunt multos pariatur.
    Senserit firmissimum si cernantur, sed si culpa arbitror. Mentitum dolore ullamco, anim de possumus, incididunt fugiat nescius pariatur est aliqua expetendis nam incurreret. Ullamco fore ea commodo illustriora non te ea relinqueret. Culpa philosophari
    admodum anim commodo. Mandaremus dolor id eiusmod praetermissum, quis sed arbitror non aliqua ut ab ut sempiternum nam do cillum relinqueret se esse ex o summis quamquam, ex lorem tempor familiaritatem ad de minim officia laborum ne noster consectetur
    admodum culpa admodum. Sunt vidisse o admodum a elit doctrina non amet nisi.</p>
</div>
<div class="post-container">

  <h1>Example Post</h1>
  <p>Aliquip hic nescius, anim te officia quo dolore, illum appellat ne admodum, an se comprehenderit. Mandaremus nisi consequat, nostrud voluptatibus et incididunt. Aut aute mentitum, tempor eu mandaremus non labore vidisse se concursionibus aut possumus
    quorum fugiat te aliqua, ita quid appellat laboris ab summis ullamco e firmissimum, aliqua quamquam ea quorum duis, aut commodo sempiternum. Litteris varias excepteur ingeniis. Nisi iudicem qui dolore aute. Dolore ne ita labore proident, ab labore
    occaecat deserunt. Incididunt amet offendit.
  </p>

  <p><b>Sub Heading</b>
  </p>

  <p>Amet ex arbitror ab quorum, sint appellat qui esse legam quo probant legam ullamco, an ipsum ullamco coniunctione est litteris familiaritatem hic eiusmod, eram hic quibusdam iis multos sed occaecat duis magna hic enim ne ut fore aut aliqua. Pariatur
    dolore mentitum admodum ea pariatur non labore, hic ipsum voluptate commodo nam se et malis fore enim, nam enim aute hic mandaremus, si qui malis iudicem, anim relinqueret vidisse quis nescius, officia amet admodum mandaremus. Incurreret elit consequat
    mentitum ita o quorum sunt eram nostrud an e summis sempiternum ad aut culpa praetermissum, doctrina nisi expetendis si doctrina et duis o probant quid voluptate, elit est admodum qui legam. Non dolor iudicem ingeniis si laboris quid aliquip incurreret.
    Officia an enim incididunt, singulis elit cernantur. Aut quamquam in eiusmod. Id non irure esse duis quo non dolore enim minim senserit, est incididunt si eiusmod, quem te laborum ex lorem. Ex illum transferrem qui esse quibusdam coniunctione. Nisi
    a aliquip est in voluptate et cupidatat. Offendit ab ipsum, anim incididunt non officia aut se malis voluptate in eram quibusdam eu legam quae iis iis probant ne officia, irure excepteur est philosophari, eram cupidatat a lorem lorem ab et eram litteris.
    Tamen appellat do nisi amet ex aut quo veniam ipsum malis eu dolore voluptatibus proident nisi commodo, fabulas dolor tempor. Possumus nulla iis quamquam despicationes, doctrina do incididunt an quamquam an quamquam, et te sint possumus. Illum expetendis
    praesentibus e iis minim elit sunt cernantur. Tamen nescius quo consectetur ea doctrina id noster, te quorum proident, aut quorum coniunctione, hic quid probant firmissimum ex te consequat in arbitror, varias aut officia in ipsum, excepteur cillum
    minim voluptate sunt. Et eu veniam cernantur, expetendis est fore, hic ad dolore velit minim sed ab o quem admodum, o quae quae ex incididunt iis aliquip summis o eiusmod concursionibus sed e culpa exquisitaque, eram si cupidatat ut fugiat. Quo cillum
    ullamco laborum. Officia elit deserunt nam enim comprehenderit litteris aliqua quibusdam, anim mandaremus eu eiusmod ita de summis fore do singulis, cillum si non dolore ullamco de te amet occaecat aut e ab firmissimum, nulla instituendarum nostrud
    aute mentitum. Quem senserit do exquisitaque, ne magna mentitum. Ad aute adipisicing. Nam mandaremus adipisicing do doctrina sed quamquam, ut in exquisitaque, velit aut deserunt ubi irure.</p>
</div>
<div class="post-container">

  <h1>Example Post</h1>
  <p>Aliquip hic nescius, anim te officia quo dolore, illum appellat ne admodum, an se comprehenderit. Mandaremus nisi consequat, nostrud voluptatibus et incididunt. Aut aute mentitum, tempor eu mandaremus non labore vidisse se concursionibus aut possumus
    quorum fugiat te aliqua, ita quid appellat laboris ab summis ullamco e firmissimum, aliqua quamquam ea quorum duis, aut commodo sempiternum. Litteris varias excepteur ingeniis. Nisi iudicem qui dolore aute. Dolore ne ita labore proident, ab labore
    occaecat deserunt. Incididunt amet offendit.
  </p>

  <p><b>Sub Heading</b>
  </p>

  <p>Amet ex arbitror ab quorum, sint appellat qui esse legam quo probant legam ullamco, an ipsum ullamco coniunctione est litteris familiaritatem hic eiusmod, eram hic quibusdam iis multos sed occaecat duis magna hic enim ne ut fore aut aliqua. Pariatur
    dolore mentitum admodum ea pariatur non labore, hic ipsum voluptate commodo nam se et malis fore enim, nam enim aute hic mandaremus, si qui malis iudicem, anim relinqueret vidisse quis nescius, officia amet admodum mandaremus. Incurreret elit consequat
    mentitum ita o quorum sunt eram nostrud an e summis sempiternum ad aut culpa praetermissum, doctrina nisi expetendis si doctrina et duis o probant quid voluptate, elit est admodum qui legam. Non dolor iudicem ingeniis si laboris quid aliquip incurreret.
    Officia an enim incididunt, singulis elit cernantur. Aut quamquam in eiusmod. Id non irure esse duis quo non dolore enim minim senserit, est incididunt si eiusmod, quem te laborum ex lorem. Ex illum transferrem qui esse quibusdam coniunctione. Nisi
    a aliquip est in voluptate et cupidatat. Offendit ab ipsum, anim incididunt non officia aut se malis voluptate in eram quibusdam eu legam quae iis iis probant ne officia, irure excepteur est philosophari, eram cupidatat a lorem lorem ab et eram litteris.
    Tamen appellat do nisi amet ex aut quo veniam ipsum malis eu dolore voluptatibus proident nisi commodo, fabulas dolor tempor. Possumus nulla iis quamquam despicationes, doctrina do incididunt an quamquam an quamquam, et te sint possumus. Illum expetendis
    praesentibus e iis minim elit sunt cernantur. Tamen nescius quo consectetur ea doctrina id noster, te quorum proident, aut quorum coniunctione, hic quid probant firmissimum ex te consequat in arbitror, varias aut officia in ipsum, excepteur cillum
    minim voluptate sunt. Et eu veniam cernantur, expetendis est fore, hic ad dolore velit minim sed ab o quem admodum, o quae quae ex incididunt iis aliquip summis o eiusmod concursionibus sed e culpa exquisitaque, eram si cupidatat ut fugiat. Quo cillum
    ullamco laborum. Officia elit deserunt nam enim comprehenderit litteris aliqua quibusdam, anim mandaremus eu eiusmod ita de summis fore do singulis, cillum si non dolore ullamco de te amet occaecat aut e ab firmissimum, nulla instituendarum nostrud
    aute mentitum. Quem senserit do exquisitaque, ne magna mentitum. Ad aute adipisicing. Nam mandaremus adipisicing do doctrina sed quamquam, ut in exquisitaque, velit aut deserunt ubi irure.</p>
</div>

Solution #2

The second solution is two wrap the left floated components in a parent container that's floated left.

#post-container {
  width: 65%;
  min-height: 400px;
  margin: 40px 0px 40px 0px;
  padding: 20px 40px 20px 40px;
  background-color: #ffffff;
  border-radius: 5px;
  float: left;
}
#sidebar-container {
  width: 22%;
  min-height: 400px;
  margin: 40px 0px 40px 0px;
  padding: 0px 15px;
  padding-left: 20px;
  background-color: #4e7de8;
  float: right;
  position: relative;
  border-radius: 5px;
}

<div id="post-container">
  <div class="post-container">

    <h1>Example Post</h1>
    <p>Aliquip hic nescius, anim te officia quo dolore, illum appellat ne admodum, an se comprehenderit. Mandaremus nisi consequat, nostrud voluptatibus et incididunt. Aut aute mentitum, tempor eu mandaremus non labore vidisse se concursionibus aut possumus
      quorum fugiat te aliqua, ita quid appellat laboris ab summis ullamco e firmissimum, aliqua quamquam ea quorum duis, aut commodo sempiternum. Litteris varias excepteur ingeniis. Nisi iudicem qui dolore aute. Dolore ne ita labore proident, ab labore
      occaecat deserunt. Incididunt amet offendit.
    </p>

    <p><b>Sub Heading</b>
    </p>

    <p>Amet ex arbitror ab quorum, sint appellat qui esse legam quo probant legam ullamco, an ipsum ullamco coniunctione est litteris familiaritatem hic eiusmod, eram hic quibusdam iis multos sed occaecat duis magna hic enim ne ut fore aut aliqua. Pariatur
      dolore mentitum admodum ea pariatur non labore, hic ipsum voluptate commodo nam se et malis fore enim, nam enim aute hic mandaremus, si qui malis iudicem, anim relinqueret vidisse quis nescius, officia amet admodum mandaremus. Incurreret elit consequat
      mentitum ita o quorum sunt eram nostrud an e summis sempiternum ad aut culpa praetermissum, doctrina nisi expetendis si doctrina et duis o probant quid voluptate, elit est admodum qui legam. Non dolor iudicem ingeniis si laboris quid aliquip incurreret.
      Officia an enim incididunt, singulis elit cernantur. Aut quamquam in eiusmod. Id non irure esse duis quo non dolore enim minim senserit, est incididunt si eiusmod, quem te laborum ex lorem. Ex illum transferrem qui esse quibusdam coniunctione. Nisi
      a aliquip est in voluptate et cupidatat. Offendit ab ipsum, anim incididunt non officia aut se malis voluptate in eram quibusdam eu legam quae iis iis probant ne officia, irure excepteur est philosophari, eram cupidatat a lorem lorem ab et eram
      litteris. Tamen appellat do nisi amet ex aut quo veniam ipsum malis eu dolore voluptatibus proident nisi commodo, fabulas dolor tempor. Possumus nulla iis quamquam despicationes, doctrina do incididunt an quamquam an quamquam, et te sint possumus.
      Illum expetendis praesentibus e iis minim elit sunt cernantur. Tamen nescius quo consectetur ea doctrina id noster, te quorum proident, aut quorum coniunctione, hic quid probant firmissimum ex te consequat in arbitror, varias aut officia in ipsum,
      excepteur cillum minim voluptate sunt. Et eu veniam cernantur, expetendis est fore, hic ad dolore velit minim sed ab o quem admodum, o quae quae ex incididunt iis aliquip summis o eiusmod concursionibus sed e culpa exquisitaque, eram si cupidatat
      ut fugiat. Quo cillum ullamco laborum. Officia elit deserunt nam enim comprehenderit litteris aliqua quibusdam, anim mandaremus eu eiusmod ita de summis fore do singulis, cillum si non dolore ullamco de te amet occaecat aut e ab firmissimum, nulla
      instituendarum nostrud aute mentitum. Quem senserit do exquisitaque, ne magna mentitum. Ad aute adipisicing. Nam mandaremus adipisicing do doctrina sed quamquam, ut in exquisitaque, velit aut deserunt ubi irure.</p>
  </div>
  <div class="post-container">

    <h1>Example Post</h1>
    <p>Aliquip hic nescius, anim te officia quo dolore, illum appellat ne admodum, an se comprehenderit. Mandaremus nisi consequat, nostrud voluptatibus et incididunt. Aut aute mentitum, tempor eu mandaremus non labore vidisse se concursionibus aut possumus
      quorum fugiat te aliqua, ita quid appellat laboris ab summis ullamco e firmissimum, aliqua quamquam ea quorum duis, aut commodo sempiternum. Litteris varias excepteur ingeniis. Nisi iudicem qui dolore aute. Dolore ne ita labore proident, ab labore
      occaecat deserunt. Incididunt amet offendit.
    </p>

    <p><b>Sub Heading</b>
    </p>

    <p>Amet ex arbitror ab quorum, sint appellat qui esse legam quo probant legam ullamco, an ipsum ullamco coniunctione est litteris familiaritatem hic eiusmod, eram hic quibusdam iis multos sed occaecat duis magna hic enim ne ut fore aut aliqua. Pariatur
      dolore mentitum admodum ea pariatur non labore, hic ipsum voluptate commodo nam se et malis fore enim, nam enim aute hic mandaremus, si qui malis iudicem, anim relinqueret vidisse quis nescius, officia amet admodum mandaremus. Incurreret elit consequat
      mentitum ita o quorum sunt eram nostrud an e summis sempiternum ad aut culpa praetermissum, doctrina nisi expetendis si doctrina et duis o probant quid voluptate, elit est admodum qui legam. Non dolor iudicem ingeniis si laboris quid aliquip incurreret.
      Officia an enim incididunt, singulis elit cernantur. Aut quamquam in eiusmod. Id non irure esse duis quo non dolore enim minim senserit, est incididunt si eiusmod, quem te laborum ex lorem. Ex illum transferrem qui esse quibusdam coniunctione. Nisi
      a aliquip est in voluptate et cupidatat. Offendit ab ipsum, anim incididunt non officia aut se malis voluptate in eram quibusdam eu legam quae iis iis probant ne officia, irure excepteur est philosophari, eram cupidatat a lorem lorem ab et eram
      litteris. Tamen appellat do nisi amet ex aut quo veniam ipsum malis eu dolore voluptatibus proident nisi commodo, fabulas dolor tempor. Possumus nulla iis quamquam despicationes, doctrina do incididunt an quamquam an quamquam, et te sint possumus.
      Illum expetendis praesentibus e iis minim elit sunt cernantur. Tamen nescius quo consectetur ea doctrina id noster, te quorum proident, aut quorum coniunctione, hic quid probant firmissimum ex te consequat in arbitror, varias aut officia in ipsum,
      excepteur cillum minim voluptate sunt. Et eu veniam cernantur, expetendis est fore, hic ad dolore velit minim sed ab o quem admodum, o quae quae ex incididunt iis aliquip summis o eiusmod concursionibus sed e culpa exquisitaque, eram si cupidatat
      ut fugiat. Quo cillum ullamco laborum. Officia elit deserunt nam enim comprehenderit litteris aliqua quibusdam, anim mandaremus eu eiusmod ita de summis fore do singulis, cillum si non dolore ullamco de te amet occaecat aut e ab firmissimum, nulla
      instituendarum nostrud aute mentitum. Quem senserit do exquisitaque, ne magna mentitum. Ad aute adipisicing. Nam mandaremus adipisicing do doctrina sed quamquam, ut in exquisitaque, velit aut deserunt ubi irure.</p>
  </div>
</div>
<div id="sidebar-container">
  <h1>About Me</h1>
  <img src="placeholder.png">

  <p>Fore si est enim vidisse ea sed ab quorum fore anim, magna officia qui incididunt, ullamco varias legam proident enim. Est ex exquisitaque. Est aliqua officia de offendit consectetur a commodo. Ut e cillum sint eram in laboris varias velit eu eram.
    Duis quamquam fidelissimae. Esse appellat qui singulis id quid officia est coniunctione. Laborum familiaritatem sed expetendis, hic sed aliqua enim esse, noster probant se eiusmod, cillum vidisse pariatur. Ipsum fidelissimae deserunt multos pariatur.
    Senserit firmissimum si cernantur, sed si culpa arbitror. Mentitum dolore ullamco, anim de possumus, incididunt fugiat nescius pariatur est aliqua expetendis nam incurreret. Ullamco fore ea commodo illustriora non te ea relinqueret. Culpa philosophari
    admodum anim commodo. Mandaremus dolor id eiusmod praetermissum, quis sed arbitror non aliqua ut ab ut sempiternum nam do cillum relinqueret se esse ex o summis quamquam, ex lorem tempor familiaritatem ad de minim officia laborum ne noster consectetur
    admodum culpa admodum. Sunt vidisse o admodum a elit doctrina non amet nisi.</p>
</div>

Upvotes: 0

Floating sidebar sticks to second post div

Answers (3)

Related Questions