CODEWITHSUNDEEP
htmlcss
user3386779
user3386779

Reputation: 7175

display div tag in same line

I want to display the div tag in same line.Now empty div appear in same line.I have content in php while loop so having variation in display. client box appear slight below from payroll div.Fiddle

.pay{
  width:35%;
  height:450px;
  border: 1px solid black;
    display: inline-block;
  margin-left:2%;  
}

.inner{
 position:relative;
   height:23px;
    background: #C0C0C0;
   text-align:center;
   font-size:13px;
   color:#fff;
    padding: 10px;
}
<div>
     <div class="pay 1">
                       <div class="inner">
                           <h3>Payroll Documents</h3>
                           
                       </div>
     <a>hello </a><br>
     <a>hello </a><br>
     <a>hello </a><br>
                    </div>
		    <div class="pay 2">
                       <div class="inner">
                           <h3>Clients Documents</h3>
                       </div>
                      <a>hello </a>
     
                    </div>
</div>

Upvotes: 0

Views: 72

Answers (4)

Nilesh Dharmik
Nilesh Dharmik

Reputation: 359

You have need to add one extra css attribute(float: left;) in pay class. Your pay class now become like below

.pay{
  width:35%;
  height:450px;
  border: 1px solid black;
  display: inline-block;
  margin-left:2%;  
  float: left;
}

Upvotes: 0

Pugazh
Pugazh

Reputation: 9561

Instead of using display:inline-block; I have added float:left to bring the desired results.

Also add <div style="clear: both"></div> at the end of div's to clear the float

Updated fiddle here

.pay{
  width:35%;
  height:450px;
  border: 1px solid black;
  float: left;
  margin-left:2%;  
}

.inner{
 position:relative;
   height:23px;
    background: #C0C0C0;
   text-align:center;
   font-size:13px;
   color:#fff;
    padding: 10px;
}
<div>
     <div class="pay 1">
                       <div class="inner">
                           <h3>Payroll Documents</h3>
                           
                       </div>
     <a>hello </a><br>
     <a>hello </a><br>
     <a>hello </a><br>
                    </div>
		    <div class="pay 2">
                       <div class="inner">
                           <h3>Clients Documents</h3>
                       </div>
                      <a>hello </a>
     
                    </div>
  <div style="clear: both"></div>
</div>

Upvotes: 1

Sushovan
Sushovan

Reputation: 343

add vertical-align: top; in your CSS 'pay' class property.

.pay{
  width:35%;
  height:450px;
  border: 1px solid black;
  display: inline-block;
  margin-left:2%;  
  vertical-align: top;
}

Upvotes: 2

stanze
stanze

Reputation: 2480

Now the two divs are positioned in same link, check this fiddle
http://jsfiddle.net/stanze/ps8nda6n/3/

Upvotes: 0

Related Questions