CODEWITHSUNDEEP
htmlcss
NeIT
NeIT

Reputation: 155

How to make 2 blocks "div" go in a row

I need my two blocks to go in a row one after another, but when the screen resolution decreases, they are placed under each other, that is, in the column enter image description here

 <div>            
    <div>
        <h1>Block1</h1>
    </div>
    <div>
        <h1>Block2</h1>
    </div>                        
</div>

Upvotes: 1

Views: 11859

Answers (5)

MaserFon
MaserFon

Reputation: 1

Like this:

@media all and (max-width: 480px) {
    div{
       float: left; 
       width: 98%;
       margin-left: 1%; 
       overflow: hidden;
       border: 1px solid #000;
       box-sizing: border-box;
       padding: 5px;
    }
}

Or with class

.wrapper div{
    ...
}

More about @media https://developer.mozilla.org/pl/docs/Web/CSS/Media_Queries/Using_media_queries

Upvotes: 0

Abhisar Tripathi
Abhisar Tripathi

Reputation: 1659

We can use flex (by default flex-direction is row so we don't need any other styling in css) -: 

<div class="container">
    <div>
      <h1>Block1</h1>
    </div>
    <div>
        <h1>Block2</h1>
    </div>
</div>


.container{
    display: flex;
}

Also this is one way of doing things, flex is not supported everywhere so you can go for inline-block also -: 

<div>
    <div class="inline">
      <h1>Block1</h1>
    </div>
    <div class="inline">
        <h1>Block2</h1>
    </div>
</div>

.inline{
    display: inline-block;
}

Upvotes: 5

jbutler483
jbutler483

Reputation: 24559

As the div element is known as a block element, you need to use display:inline-block. This means 'if there is space next to the element, place the next inline block element next to it' (in essence).

div {
  display: inline-block;
  background:tomato;
}

@media only screen and (max-width: 600px) {
  div{
  display:block;
  background:green;
  }
<div>
  <div>1
  </div>
  <div>2
  </div>
</div>

For your width to then turn back into a block element, you will need to use the media query - something like above.

Upvotes: 2

strek
strek

Reputation: 1230

Try using display:flex and use flexbox to place next to each other when the width is high. When the width reduces the div cols will go down.

.row {
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
}

.cols {
  height: 400px;
  width: 400px;
  margin: 5px 5px 5px 5px;
  background-color: blue;
}
<div class="row">
  <div class="cols">
  </div>
  <div class="cols">
  </div>
</div>

Upvotes: 0

Laczk&#243; &#214;rs
Laczk&#243; &#214;rs

Reputation: 1118

You should use CSS grid:

<div class="wrapper">
    <div>
        <h1>Block1</h1>
    </div>
    <div>
        <h1>Block2</h1>
    </div>
</div>

Css:

.wrapper{
   diplay: grid;
   grid-template-columns: 1fr;
}

Upvotes: 0

Related Questions