Is there a way to position two <div> elements side by side so that they are the same width and height without causing any scrolling?

Question

Is there a way to position two <div> elements side by side so that they are the same width and height without causing any scrolling?

I am in the process of creating a basic HTML page with two sections, each containing content. However, the last content within the second .right div is extending to the bottom of the page, causing it to become scrollable.

I attempted to create another div with flex-direction: column, but this approach did not resolve the issue:

body {
  margin: 0;
}

.main-container {
  display: flex;
  flex-direction: column;
}

.left {
  background: #ecece9;
  width: 50%;
  height: 100vh;
}

.right {
  background: #ffffff;
  width: 50%;
  height: 100vh;
}

<div class="main-container">
  <div class="left">
    <h2>content</h2>
  </div>
  <div class="right">
    <h2>content should be on top</h2>
  </div>
</div>

Is there a way to position two <div> elements next to each other with equal width and height without causing scrolling?

html css

Answer 1

Answer №1

Make sure to set flex-direction: row instead of flex-direction: column.

To streamline the code, consider creating a new class like .box that includes the properties width: 50%; height: 100vh;, which can be applied to both .left and .right.

body {
  margin: 0;
}

.main-container {
  display: flex;
  flex-direction: row;
}

.box {
  width: 50%;
  height: 100vh;
}

.left {
  background: #ecece9;
}

.right {
  background: #ffffff;
}

<div class="main-container">
  <div class="left box">
    <h2>content</h2>
  </div>
  <div class="right box">
    <h2>content should be on top</h2>
  </div>
 </div>

Answer 2

Make sure to set flex-direction: row instead of flex-direction: column.

To streamline the code, consider creating a new class like .box that includes the properties width: 50%; height: 100vh;, which can be applied to both .left and .right.

body {
  margin: 0;
}

.main-container {
  display: flex;
  flex-direction: row;
}

.box {
  width: 50%;
  height: 100vh;
}

.left {
  background: #ecece9;
}

.right {
  background: #ffffff;
}

<div class="main-container">
  <div class="left box">
    <h2>content</h2>
  </div>
  <div class="right box">
    <h2>content should be on top</h2>
  </div>
 </div>

Answer 3

Answer №2

Modify the flex direction to switch from column to row

body {
  margin: 0;
}

.main-container {
  display: flex;
  flex-direction: row;
}

.left {
  background: #ecece9;
  width: 50%;
  height: 100vh;
}

.right {
  background: #ffffff;
  width: 50%;
  height: 100vh;
}

<div class="main-container">
  <div class="left">
    <h2>content</h2>
  </div>
  <div class="right">
    <h2>content should be on top</h2>
  </div>
 </div>

Answer 4

Modify the flex direction to switch from column to row

body {
  margin: 0;
}

.main-container {
  display: flex;
  flex-direction: row;
}

.left {
  background: #ecece9;
  width: 50%;
  height: 100vh;
}

.right {
  background: #ffffff;
  width: 50%;
  height: 100vh;
}

<div class="main-container">
  <div class="left">
    <h2>content</h2>
  </div>
  <div class="right">
    <h2>content should be on top</h2>
  </div>
 </div>

Answer 5

Answer №3

Utilize the power of CSS Grid to easily create layouts with just a few lines of code adjustments.

   .main-container {
  display: grid;
  grid-template-columns: 50% 50%
}

body {
  margin: 0;
}

.main-container {
  display: grid;
  grid-template-columns: 50% 50%
}

.left {
  background: #ecece9;
  height: 100vh;
}

.right {
  background: #ffffff;
  height: 100vh;
}

<div class="main-container">
  <div class="left">
    <h2>content</h2>
  </div>
  <div class="right">
    <h2>content should be on top</h2>
  </div>
 </div>

Answer 6

Utilize the power of CSS Grid to easily create layouts with just a few lines of code adjustments.

   .main-container {
  display: grid;
  grid-template-columns: 50% 50%
}

body {
  margin: 0;
}

.main-container {
  display: grid;
  grid-template-columns: 50% 50%
}

.left {
  background: #ecece9;
  height: 100vh;
}

.right {
  background: #ffffff;
  height: 100vh;
}

<div class="main-container">
  <div class="left">
    <h2>content</h2>
  </div>
  <div class="right">
    <h2>content should be on top</h2>
  </div>
 </div>

Answer 7

Answer №4

Make sure to use display flex only on larger screens and switch to block on mobile devices

body {
  margin: 0;
}

.main-container {
  display: flex;
}

.left {
  background: #ecece9;
  width: 50%;
  height: 100vh;
  padding:20px;
}

.right {
  background: #ddd;
  width: 50%;
  height: 100vh;
  padding:20px;
}

/* For mobile devices */
@media only screen and (max-width: 768px) {
  .main-container{
    display: block;
  }
  .left, .right{
    width: 100%;
  }
}
*/

<div class="main-container">
    <div class="left">
      <h2>content</h2>
    </div>
    <div class="right">
      <h2>content should be on top</h2>
    </div>
   </div>

Answer 8

Make sure to use display flex only on larger screens and switch to block on mobile devices

body {
  margin: 0;
}

.main-container {
  display: flex;
}

.left {
  background: #ecece9;
  width: 50%;
  height: 100vh;
  padding:20px;
}

.right {
  background: #ddd;
  width: 50%;
  height: 100vh;
  padding:20px;
}

/* For mobile devices */
@media only screen and (max-width: 768px) {
  .main-container{
    display: block;
  }
  .left, .right{
    width: 100%;
  }
}
*/

<div class="main-container">
    <div class="left">
      <h2>content</h2>
    </div>
    <div class="right">
      <h2>content should be on top</h2>
    </div>
   </div>

Is there a way to position two <div> elements side by side so that they are the same width and height without causing any scrolling?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

CSS - Placeholder styling not being effective when selectors are grouped

If the option of "none" is chosen, I would like to deactivate all checkbox selections

Tips for arranging 3 tables in the right place using CSS

Arrange Raphael Objects in Their Relative Positions

How to style FullCalendar to apply background-color for the entire day, not just the event using the 'addEventSource' method

What are some solutions for adjusting this sidebar for mobile devices?

jquery: centralizing progressbar growth on the page

Using JavaScript and HTML to show the current month, date, and year on a webpage

How to position items at specific coordinates in a dropdown using JavaScript

Integrating CSS with Material-UI in a React project: A step-by-step guide

Angular: merging multiple Subscriptions into one

Unable to load JQuery from a div element

What could be causing issues with angularjs ng-include not functioning properly in Chrome at times?

Always ensure that only one div is visible at a time

What is the best way to align an image underneath text?

Iframe Loading at Lightning Speed

Changing the designated materialUI class

Looking to update a component in Vue 3 and Laravel 9 without the need to reload the entire webpage

Is there a way to display the form values on the table once it has been submitted?

bottom of the page contains the solution