Responsive Three Column Layout using HTML and CSS Flexbox

Community feedback

• 

  FalejevV•500

  @FalejevVPosted over 2 years ago

  Hi Astijus, one of the ways to solve this problem is to make your section class a flexbox element by adding this lines to it. This will convert your section into a column that has more control.

  .section{
  display:flex;
  flex-direction:column;
  }
  

  Then you add flex:auto; to paragraph, so it will take all the remaining space and push button down. (also remove position:fixed from button)

  This way, paragraph can be any size, it will still push button to bottom of block.

  0

  ---

  

  Astijus Karvauskas•80

  @astijusk101Posted over 2 years ago

  @FalejevV Hey, I have implemented your suggestions into my code, but the problem persists. As the window shrinks and the paragraph takes up more and more lines, the buttons do get pushed down. However, the buttons do not get pushed down all at the same time. Meaning when you shrink the window, there are points at which the buttons are not vertically aligned. How could I fix this?

  0

  

  FalejevV•500

  @FalejevVPosted over 2 years ago

  Check github.I pushed css file to your project.

  0