CODEWITHSUNDEEP
htmlcss
saifaldeen
saifaldeen

Reputation: 173

how to put two inline-block boxes underneath eachother

I have two boxes each one is an inline-block i want to put two inline-block boxes underneath each other , like the following image

enter image description here

here's the code i used 

.box1
	{
    background-color: red;
    display: inline-block;
    width: 300px;
    float: right;
    height: 31%;
	}
  
  .box2 
  {
     background-color: green;
    display: inline-block;
    width: 324px;
    float: right;
    height: 31%;
  }
<body>

  <div class="box1">Box1</div>
		<div class="box2">Box2</div>

</body>

Upvotes: 0

Views: 1964

Answers (3)

tofraser
tofraser

Reputation: 106

Seems like you could just add a "clear: both;" to your second div and otherwise leave your code as-is.

.box1
	{
    background-color: red;
    display: inline-block;
    width: 300px;
    float: right;
    height: 31%;
	}
  
  .box2 
  {
     background-color: green;
    display: inline-block;
    width: 324px;
    float: right;
    height: 31%;
    clear: both;
  }
<body>

  <div class="box1">Box1</div>
		<div class="box2">Box2</div>

</body>

Upvotes: 0

sol
sol

Reputation: 22949

You could wrap both your divs in a container and float that instead.

example

.container {
  float: right;
}

.box1 {
  background-color: red;
  width: 300px;
  height: 31%;
}

.box2 {
  background-color: green;
  width: 324px;
  height: 31%;
}
<body>
<div class="container">
  <div class="box1">Box1</div>
  <div class="box2">Box2</div>
</div>
</body>

Upvotes: 0

Pugazh
Pugazh

Reputation: 9561

In the second box clear your float. Just add clear: both.

Code Snippet:

.box1 {
  background-color: red;
  display: inline-block;
  width: 300px;
  float: right;
  height: 31%;
}

.box2 {
  clear: both;
  background-color: green;
  display: inline-block;
  width: 324px;
  float: right;
  height: 31%;
}
<body>

  <div class="box1">Box1</div>
  <div class="box2">Box2</div>

</body>

Upvotes: 2

Related Questions