CODEWITHSUNDEEP
htmlcss
UI_Dev
UI_Dev

Reputation: 3427

How to align contents responsive in html?

I am trying to get responsive design for tablet screen. But while using float: left it is not moving the content. Instead white space was increased.

I tried with margins but its not responsive to the contents. While expanding address field, it is increasing and userid field remains same as I used float: left.

Need help here..

Tried with firefox - Shortcut: ctrl+_shift+m

I need the output like below which should be responsive to the screen.

I need spaces from 

margin left -->userid
margin left -->123456

margin right-->Address
margin right-->123, Wellington Road, bla bla....

enter image description here

Here is my code..

.outer{
margin: 0 10%; 
padding: 50px 0px; 
border: 2px solid #666666; 
text-align: center;
}
.row{
  text-align: center;
 
  }
.block1{
  display: inline-block;
   float: left;
  }

.block2{
  display: inline-block;
   float: right;
  }
  .block3{
  display: inline-block;
   float: left;
  }

.block4{
  display: inline-block;
   float: right;
  }
<div class="outer">
<div class="row">
  <div class="block1">
    Userid
  </div>
  <div class="block2">
    Address
   </div>
</div>
<div style="min-height: 30px;"></div>
<div class="row">
  <div class="block3">
    123456
  </div>
  <div class="block4">
    123, Wellington Road, Australia Zip 23643-9383
   </div>
</div>
  </div>

Upvotes: 1

Views: 62

Answers (1)

emmanuel
emmanuel

Reputation: 9615

You could remove floats, text-align and add margin to the elements.

.outer{
margin: 0 10%; 
padding: 50px 0; 
border: 2px solid #666666; 
/* text-align: center; */
}
.block1, .block2, .block3, .block4 {
  display: inline-block;
  width: 40%;
  vertical-align: top;
}
.block1, .block3 {
  margin-left: 10%;
}
.block2, .block4 {
  margin-right: 10%;
}
<div class="outer">
<div class="row">
  <div class="block1">
    Userid
  </div><!--
  --><div class="block2">
    Address
   </div>
</div>
<div style="min-height: 30px;"></div>
<div class="row">
  <div class="block3">
    123456
  </div><!--
  --><div class="block4">
    123, Wellington Road, Australia Zip 23643-9383
   </div>
</div>
  </div>

Upvotes: 2

Related Questions