CODEWITHSUNDEEP
css
ashish kumar
ashish kumar

Reputation: 67

How to align 3 span in one line horizontaly?

How should I keep the yellowarea in middle of redarea and greenarea.

https://jsfiddle.net/ashish3506/4wopk1u3/1/

My HTML code

<body>
<span class="redarea"></span> 
<span class="yellowarea"></span> 
<span class="greenarea"></span>
</body>

My CSS Code

.redarea{
width:300px;
height:300px;
background:red;
float:left;
}

.yellowarea{
width:300px;
height:300px;
background:yellow;
margin-left:400px;
}

.greenarea{
float:right;
width:300px;
height:300px;
background:green;
}

Upvotes: 2

Views: 2452

Answers (3)

Shimul Chowdhury
Shimul Chowdhury

Reputation: 191

Simply do this

span {  
    width:300px;
    height:300px;
    display:inline-block;
}
.redarea{
    background:red;
}

.yellowarea{
    background:yellow;
}

.greenarea{
    background:green;
}

https://jsfiddle.net/theprog/4wopk1u3/7/

Upvotes: 2

Ram kumar
Ram kumar

Reputation: 3162

Check code once 

.redarea{
width:200px;
height:300px;
background:red;
    display: inline-block;
    vertical-align: middle;
}

.yellowarea{
width:200px;
height:200px;
background:yellow;
    display: inline-block;
    vertical-align: middle;
    margin: 0 20px;
}

.greenarea{
width:200px;
height:300px;
background:green;
    display: inline-block;
    vertical-align: middle;
}
   
<body>
<span class="redarea"></span> 
<span class="yellowarea"></span> 
<span class="greenarea"></span>
</body>

Upvotes: 1

user4513271
user4513271

Reputation:

Remove the floats and margins and add display:inline-block

.redarea {
  width:300px;
  height:300px;
  background:red;
  display:inline-block;
}

.yellowarea {
  width:300px;
  height:300px;
  background:yellow;
  display:inline-block;
}

.greenarea {
  width:300px;
  height:300px;
  background:green;
  display:inline-block;
}

Note: This does not resize the blocks for a smaller screen, so on JS Fiddle, it will appear that they stack. If the width of the page is sufficient for 900px, then they will appear side by side.

Upvotes: 0

Related Questions