CODEWITHSUNDEEP
htmlcss
JaneVi
JaneVi

Reputation: 199

how to make inline-block 3-column layout

What's the best practice to make an inline-block layout consisting of 3 columns which two of them would be pushed to the right? How to achieve it if I want the colums' widths to be set to auto?

HTML

<div class="wrap">
  <div class="col1">left column needs to stay left
  </div>
  <div class="col2">middle goes to the right
  </div>
  <div class="col3">right please
  </div>
</div>

CSS

.wrap {
  width: 800px;
  height: 50px;
  font-size:0;
  border: 1px dotted green;
}
.wrap div {
  display: inline-block;
  font-size: 14px;
  padding: 10px;
}

.col1 {
  background: red;
}
.col2 {
  background: blue;
}
.col3 {
  background: yellow;
}

http://jsfiddle.net/muriz/wrykjjs8/

Upvotes: 0

Views: 2802

Answers (1)

vickisys
vickisys

Reputation: 2036

.col1,.col2,.col3{
	float:left;
	width:30%;
}
#col1{
	background-color:red;
	}
#col2{
	background-color:green;
	}
#col3{
	background-color:blue;
	}
<div id="wrap">	  
      <div id="col1" class="col1"> left column left column left column left column left             column left column left column
      </div>
	  
      <div id="col2" class="col2"> 
        center column center column center column center column center column center column         center column center column
      </div>
	  
      <div id="col3" class="col3">
          right columnright column right column right column right column right column               right column right column
      </div>
</div>

hope this helps you..

Upvotes: 2

Related Questions