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

"Composing perfect sentences: The art of incorporating quotes

Three-handled slider

What is the best approach to animating a specified quantity of divs with CSS and javascript?

Transferring information from an HTML webpage to a PHP file and then redirecting to the homepage

Tips for aligning an image on top of another image

Check out the page design for section one!

What is the best way to position a sidebar alongside content using flexbox?

Using identical CSS for two separate layouts

I'm attempting to make the button hover color transparent, but unfortunately, it's not having any effect

What is the best way to send a parameter from jQuery to PHP?

Code Snippet: Adjust Table Column Alignment using CSS

The alignment of SVG is not in sync with the aspect ratio

What is the best way to display various dialogs based on the specific button that is clicked?

Group HTML Tables According to Specific Attributes

Don't forget to update the CSS stylesheet whenever templates are rendered in Flask

Implementing a tooltip popup inside the header cell of the ordering table

Ever thought about harnessing the power of SassDoc to create detailed documentation for your sass

Div's HTML Classes are not triggering the Click Event

Expanding the link directory

Manipulate the content of any webpage without using external extensions by injecting your own HTML, CSS, and JavaScript code