CODEWITHSUNDEEP
htmlcss
Nidhin_toms
Nidhin_toms

Reputation: 737

Needs all the divs to appear in same row

I have an issue with div items section1, section2, section3 as i need them to be set in a row. Section3 seems to be below the other two. Do you know why it is so ? I need all of them to be in the same line.

issue

div.bodySection
{
padding:5px;
background-color:lime; 
margin-left:10px;
display:inline-block;
}

<div id="section">

<div id="section1" class="bodySection">
<h1><London></h1>
<p>London is the capital city of England.</p>
</div>

<div id="section2" class="bodySection">
<h2><London></h2>
<p1>London is the capital city of England.</p>
</div>

<div id="section3" class="bodySection">
<h3><London></h3>
<p1>London is the capital city of England.</p>
</div>

</div>

Upvotes: 0

Views: 74

Answers (2)

Alexander Bell
Alexander Bell

Reputation: 7918

See the possible solution following:

<!DOCTYPE html>
<html>
<head>
  <style>
   ul#row li  {display:inline;}
   .div-inline {display:inline-block;}
  </style>
</head>
<body>
  <ul id="row">
    <li>
       <div class="div-inline">
         <h1><London></h1>
         <p>London is the capital city of England.</p>
       </div>
    </li>
    <li>
       <div class="div-inline">
         <h2><London></h2>
         <p>London is the capital city of England.</p>
       </div>
    </li>
    <li>
       <div class="div-inline">
         <h3><London></h3>
         <p>London is the capital city of England.</p>
       </div>
    </li>
  </ul>  
</body>
</html>

Hope this will help.

Upvotes: 1

Justin
Justin

Reputation: 818

It looks like you could use CSS flexboxes: https://jsfiddle.net/p22u9h1L/

Adding another CSS block for your section div fixes your alignment issue:

div#section
{
display: -webkit-flex;
display: flex;
}

Upvotes: 1

Related Questions