Question 198652 in Html Question posted in
Some basic documentation can be found here.

Html – How to avoid the overlap of divs?

i have created about three divs one,two and three where float left is given to div one and float
right is given to second div and no float is given to the third,the third div is overlapping with the
first and second divs

How to avoid overlap of divs with each other

Tags:

2

Answers


  1. 0

    As per your question, if you have issue with floats, you need to apply clear:both to your third div

    #one {
  float: left;
  width: 33.33%;
}

#two {
  float: right;
  width: 33.33%;
}

#three {
  clear: both;
  width: 33.33%;
}
    <div id="one">Div One</div>
<div id="two">Div Two</div>
<div id="three">Div Three</div>

    Approach two: If you want three grids in same row, you can use css grid

    .grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
  column-gap: 50px;
}

.grid-item {
  border: 1px solid black;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
    <div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>
    Login or Signup to reply.
  2. 0

    Also see https://ronnieroyston.com/tools/css-flexbox. For even more powerful 2 dimensional control see CSS Grid.

    div:nth-of-type(1){
  background:red;
  flex: 1 1 auto;
}
div:nth-of-type(2){
  background:blue;
}
div:nth-of-type(3){
  background:green;
}

div {
  height: 100px;
  width: 100px;
}

main {
  width: 100%;
  outline: 1px solid black;
  display:flex;
  gap: 12px;
  justify-content: center;
}
    <main>
<div></div><div></div><div></div>
</main>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search