CODEWITHSUNDEEP
htmlcss
Raul
Raul

Reputation: 3081

HTML - container is positioned in the same row as its brother

I want to implement a div which contains 2 divs:

  1. A row with two sides, left and right.
  2. A div below the first one

For that I am doing as follows:

 <div id="main">
   <div id="box1">
     <div id="left" />
     <div id="right" />
   </div>

   <div id="box2" />
 </div>

And this is the css

.main {
  margin-top: 75px;
}
#box1 {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 450px;
  transition: ease all 0.5s;
}
#box1 #left {
  width: 50%;
  height: 100%;
  background-color: lime;
}
#box1 #right {
  width: 50%;
  height: 100%;
  background-color: red;
}
#box2 {
  width: 100%;
  height: 600px;
  background-color: gold;
}

But for some reasons, I am getting the second div "box2" in the same row of "box1", next to it.

Why is that?

Upvotes: 0

Views: 37

Answers (2)

Udara Sampath
Udara Sampath

Reputation: 65

You just missed the closing </div> tags

here is when it fixed, working perfectly fine

.main {
              margin-top: 75px;
            }
            #box1 {
              display: flex;
              flex-direction: row;
              width: 100%;
              height: 450px;
              transition: ease all 0.5s;
            }
            #box1 #left {
              width: 50%;
              height: 100%;
              background-color: lime;
            }
            #box1 #right {
              width: 50%;
              height: 100%;
              background-color: red;
            }
            #box2 {
              width: 100%;
              height: 600px;
              background-color: gold;
            }
<div id="main">
       <div id="box1">
         <div id="left">Left Contents Here</div>
         <div id="right">Right Contents Here</div>
       </div>

        <div id="box2">Belowe Contents  Here</div>
    </div>

Upvotes: 0

Bubbly
Bubbly

Reputation: 301

this seems to work (check full page view):

.left {

  background: red;
  
  width: 50%;
  float: left;

}

.right {

  background: green;
  
  position: relative;
  float: left;
  width: 50%

}


.bottom {

  background: blue;
  
  position: relative;
  width: 100%;
  top: 9vh;
  float: none;

}
<div id = "main">

   <div id = "box2" class = "bottom" > bottom </div>
   
   <div id = "box1">
   
     <div class = "left"> left </div>
     <div class = "right"> right </div>
     
   </div>
   
 </div>

Upvotes: 0

Related Questions