What is the best way to prevent divs from overlapping each other?

Question

What is the best way to prevent divs from overlapping each other?

Check out the fiddle:

body {
  background-color: #D3D3D3;
}

#container {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 10px;
  padding: 20px;
}

.section1 {
  display: flex;
  justify-content: center;
}

.section2 {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.show {
  padding: 20px;
  border: 2px black solid;
  width: 100%;
}

.section3 {
  display: flex;
  justify-content: center;
}

<div id="container">

  <div class="section1">
    <div class="header show"> header </div>
  </div>

  <div class="section2">
    <div class="column">
      <div class="content1 show"> content 1</div>
      <div class="content2 show"> content 2</div>
    </div>
    <div class="content3 show"> content 3</div>
  </div>

  <div class="section3">
    <div class="footer show"> footer</div>
  </div>

</div>

I attempted using overflow: auto;, overflow: hidden;, and z-index: 1; but none of them resolved the issue. I believe the problem lies with the width: 100%; in the .show divs. Changing it to width: 60%; prevents overlapping, but doesn't occupy full width. How can I prevent the .show divs from overlapping without compromising the full width?

html css

Answer 1

Answer №1

To address any layout issues you may be experiencing, try implementing the box-sizing: border-box property. This ensures that your padding values are included in the total width calculation, preventing unexpected sizing discrepancies.

* {
  box-sizing: border-box;
}

For a demonstration of this solution in action, check out this proof-of-concept fix on JSFiddle. Additionally, consider utilizing a CSS reset to further standardize your styles.

As a tip, exploring CSS grid for your layouts can simplify design decisions and make the structure more intuitive to work with.

Answer 2

To address any layout issues you may be experiencing, try implementing the box-sizing: border-box property. This ensures that your padding values are included in the total width calculation, preventing unexpected sizing discrepancies.

* {
  box-sizing: border-box;
}

For a demonstration of this solution in action, check out this proof-of-concept fix on JSFiddle. Additionally, consider utilizing a CSS reset to further standardize your styles.

As a tip, exploring CSS grid for your layouts can simplify design decisions and make the structure more intuitive to work with.

Answer 3

Answer №2

Make sure to include * {box-sizing: border-box;} in your coding.

To learn more about Box sizing, visit: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Answer 4

Make sure to include * {box-sizing: border-box;} in your coding.

To learn more about Box sizing, visit: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Answer 5

Answer №3

The issue at hand has been resolved by setting the box-sizing property to include padding in the dimensions, as suggested by others.

However, your HTML structure appears convoluted due to the use of flex. A grid layout seems more fitting for your desired design, especially for 2D layouts.

This code snippet streamlines the HTML by removing the need for separate sections and utilizes the grid-template-areas CSS property to arrange the elements accordingly.

* {
  box-sizing: border-box;
}

body {
  background-color: #D3D3D3;
}

#container {
  display: grid;
  grid-template-columns: 1fr 9fr;
  grid-template-areas: 'H H' 'C1 C3' 'C2 C3' 'F F';
  width: 100%;
  gap: 10px;
  padding: 20px;
}

.show {
  padding: 20px;
  border: 2px black solid;
  width: 100%;
}

.header {
  grid-area: H;
}

.content1 {
  grid-area: C1;
}

.content2 {
  grid-area: C2;
}

.content3 {
  grid-area: C3;
}

.footer {
  grid-area: F;
}

<div id="container">
  <div class="header show"> header </div>
  <div class="content1 show"> content 1</div>
  <div class="content2 show"> content 2</div>
  <div class="content3 show"> content 3</div>
  <div class="footer show"> footer</div>
</div>

Answer 6

The issue at hand has been resolved by setting the box-sizing property to include padding in the dimensions, as suggested by others.

However, your HTML structure appears convoluted due to the use of flex. A grid layout seems more fitting for your desired design, especially for 2D layouts.

This code snippet streamlines the HTML by removing the need for separate sections and utilizes the grid-template-areas CSS property to arrange the elements accordingly.

* {
  box-sizing: border-box;
}

body {
  background-color: #D3D3D3;
}

#container {
  display: grid;
  grid-template-columns: 1fr 9fr;
  grid-template-areas: 'H H' 'C1 C3' 'C2 C3' 'F F';
  width: 100%;
  gap: 10px;
  padding: 20px;
}

.show {
  padding: 20px;
  border: 2px black solid;
  width: 100%;
}

.header {
  grid-area: H;
}

.content1 {
  grid-area: C1;
}

.content2 {
  grid-area: C2;
}

.content3 {
  grid-area: C3;
}

.footer {
  grid-area: F;
}

<div id="container">
  <div class="header show"> header </div>
  <div class="content1 show"> content 1</div>
  <div class="content2 show"> content 2</div>
  <div class="content3 show"> content 3</div>
  <div class="footer show"> footer</div>
</div>

Answer 7

Answer №4

For proper formatting, assign specific widths to content-1 and content-2, and then do the same for content-3:

content-1 {
  width:30vw;
  margin-right:5vw;
}
content-2 {
  width:30vw;
  margin-right:5vw;
}
content-3 {
  width:60vw;
  margin-left:5vw;

To ensure a tidy appearance, I included a 10vw margin between them. Feel free to adjust the margins and customize as needed! Hopefully, this explanation is helpful.

Answer 8

For proper formatting, assign specific widths to content-1 and content-2, and then do the same for content-3:

content-1 {
  width:30vw;
  margin-right:5vw;
}
content-2 {
  width:30vw;
  margin-right:5vw;
}
content-3 {
  width:60vw;
  margin-left:5vw;

To ensure a tidy appearance, I included a 10vw margin between them. Feel free to adjust the margins and customize as needed! Hopefully, this explanation is helpful.

What is the best way to prevent divs from overlapping each other?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Can the Foundation 5 class label.inline be exclusively utilized for @media medium-up conditions?

Convert a decimal number to a suitable Alpha value for an RGBA CSS color

Redesigning the reset Zoom feature of HighCharts using a button inspired by Material UI styling

Looking for assistance with automated web testing using selenium

Trouble with my dropright Bootstrap menu getting cropped

troubles with downloading using the <a> tag

Enhance your video with Bootstrap 4 by overlaying text and buttons

I am faced with the puzzling situation where the value of my input type slider is displayed below the slider

I am having trouble getting my console.log function to work properly on my HTML page

What is the correct way to declare variables in a CSS custom fragment shader?

Overlapping borders in Bootstrap 4 design

What could be causing the black spaces to appear after my text in HTML?

Tips for toggling the visibility of the 'more' button based on the number of lines in a paragraph

Stylesheet specific to Internet Explorer not loading

AngularJS encountered an unhandled syntax error

On a smaller screen size, the event listeners I add dynamically are successfully attached using the exact same HTML, however, they fail to attach on a larger screen size

Can someone explain the significance of the statement "We strongly advise using custom validation styles because browsers' default styles are not announced to screen readers"?

Using jQuery UI to create sortable lists that are connected and have hidden overflow features

When attempting to transfer data from an Ajax HTML form to a Flask template in Python upon clicking a button, encountered difficulties

.NET Reporting and Report Design Tool for Enhanced Data Visualization