CODEWITHSUNDEEP
htmlcss
pat
pat

Reputation: 57

Float left, center, and float right 3 div on the same line

I have 3 div that contain both text and image.

I would like to show them on the same line with the 1st div on left, 2nd div in the center, and the 3rd div on the right. I can do CSS for the 1st div and the 3rd div. The 2nd div causes me trouble. I have the follow codes so far:

<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <style type="text/css">
         .onLeft {
            display: inline;
            float: left;
         }
         .onRight {
            display: inline;
            float: right;
         }
      </style>
   </head>
   <body>
      <div class="onLeft"><h3>Left</h3><img src=images/left.png></div>
      <div class="onCentre"><h3>Centre</h3><img src=images/centre.png></div>
      <div class="onRight"><h3>Right</h3><img src=images/right.png></div>
   </body>
</html>

Any suggestion?

Upvotes: 0

Views: 3018

Answers (3)

TeaCoder
TeaCoder

Reputation: 1977

So your requirement is to have three divs spread on each part of the page left, center and right. You are not really looking for a column layout. You might be able to do this using an additional div. Check the jsfiddle link which is one way of doing this.

.onLeft {
  display: inline;
  float: left;
  width: 30%;
  background-color: #ccc;
}
.onCentre {
  float: left;
  width:40%;
  background-color: red;
}
.realCentre {
  margin: 0 auto;
  width: 90%;
  background-color: #efefef;
}

.onRight {
  display: inline;
  float: right;
  width: 30%;
  background-color: #ddd;
}

Upvotes: 0

dippas
dippas

Reputation: 60563

I do not want to have a fix width as the 3 div can have variable width

So:

option 1

  • set display:table/table-cell

section {
  display: table;
  width: 100%
}
article {
  border: 1px red solid;
  display: table-cell;
}
<section>
  <article>article 1</article>
  <article>article 2</article>
  <article>article 3</article>
</section>

option 2

  • set display:flex

section {
  display: flex;
}
article {
  border: 1px red solid;
  flex:1
}
<section>
  <article>article 1</article>
  <article>article 2</article>
  <article>article 3</article>
</section>

Upvotes: 1

user6269864
user6269864

Reputation:

My suggestion is to use inline-blocks instead of floating.

CSS: 

div {display: inline-block}
.onLeft {width: 30%}
.onCenter {width: 40%}
.onRight {width: 30%}

Upvotes: 0

Related Questions