Skip to content Skip to sidebar Skip to footer
Home / Css / Formatting / Html

How Do I Make My Side Column Extend All The Way To The End?

Post a Comment
For my website, I can't get my side column to extend all the way to the end of the body column without giving it a fixed max height (it's supposed to adjust according to the length

Solution 1:

Something like this?: https://jsfiddle.net/xcy9s64g/

The trick is to position the right child div absolutely:

position: absolute;
right: 0;
top: 0;

And, of course, positioning the parent container as relative, to provide a reference point for the absolute positioning. Then, you can use percentages for the children.

  #container {
    position: relative;
    width: 100%;
  }

Do you think making a table (with two columns, one as body and one on the side) would be a better way of making the webpage mobile friendly and automatically adjust to the wrapping of content? Or is there a better way using div grouping?

Using a table for layout is a bad idea. Use flexbox instead if you want to try something different.


Solution 2:

I think you should use flexbox, hope it solves your problem.

Please check this codepen solution 

body {
  background: #eee;
}

section {
  padding: 10px;
}

h2 {
  margin: 0;
  padding: 0;
  display: inline-block;
}

.wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.main-container {
  background: #fff;
  margin: 10px;
  display: flex;
  /*flex-wrap: wrap;*/
  /*justify-content: space-between;*/
}

.left-container {
  flex: 3 3 70%;
  background-color: #fff;
}

.right-container {
  flex: 1 1 30%;
  flex-direction: column;
  background-color: #ccc;
}

@media screen and (max-width:768px) {
  .main-container {
    display: flex;
    flex-wrap: wrap;
  }
  .left-container {
    flex: 0 1 100%;
    order: 1;
    /*change the order of the blocks for smaller screens as you like */
    background-color: #fff;
  }
  .right-container {
    flex: 0 1 100%;
    order: 2;
    /*change the order of the blocks for smaller screens as you like */
    background-color: #ccc;
  }
}
<body>
  <div class="wrapper">
    <div class="main-container">
      <section class="left-container">
        <h2>Home</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus, in iaculis neque aliquam vitae. Ut mattis aliquet mi, eu cursus est placerat id. Donec vehicula lorem neque,
          vel mattis arcu semper in. Aenean venenatis pulvinar sagittis. In eget congue sapien, in semper ligula. Curabitur sagittis mi a lacinia fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu enim a mauris ullamcorper tincidunt
          ac vel erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus lacinia, velit eu eleifend interdum, lacus velit maximus nisi, ut feugiat metus metus in mauris. Nunc molestie libero quis odio
          tristique euismod.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus, in iaculis neque aliquam vitae. Ut mattis aliquet mi, eu cursus est placerat
          id. Donec vehicula lorem neque, vel mattis arcu semper in. Aenean venenatis pulvinar sagittis. In eget congue sapien, in semper ligula. Curabitur sagittis mi a lacinia fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
          eu enim a mauris ullamcorper tincidunt ac vel erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus lacinia, velit eu eleifend interdum, lacus velit maximus nisi, ut feugiat metus metus
          in mauris. Nunc molestie libero quis odio tristique euismod.
        </p>
      </section>

      <section class="right-container">
        <article>
          <h2>Post 1</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus...
            <a href="#">Read More</a>
          </p>
        </article>

        <article>
          <h2>Post 1</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus...
            <a href="#">Read More</a>
          </p>
        </article>

        <article>
          <h2>Post 1</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus...
            <a href="#">Read More</a>
          </p>
        </article>
      </section>
    </div>
  </div>
</body>

Post a Comment for "How Do I Make My Side Column Extend All The Way To The End?"