CODEWITHSUNDEEP
htmlcss
Nilou Far
Nilou Far

Reputation: 11

How to make 3 images on the same line, and then 3 paragraphs below

I have split my page in to two sections below the header and then in the left section below the slider. I must have 3 images, with each image having one paragraph below them at fixed width.

enter image description here

<div class="Main-content-float-left">
        <h1 class="contentheader1">  vitae, justo. Nullam dictum viverra quis, feugiat a, tellus. Phasellu</h1>
        <div class="column-center"><img src=" 190x130.gif" img class="190x130"/></br>sdefererfreresdefererfrerevsdefererfrere</div>
        <div class="column-left"><img src=" 190x130.gif" img class="190x130"/></br>sgrrjtijt5r09itrioktrsdefererfreresdefererfrere</div>
        <div class="column-right"><img src=" 190x130.gif" img class="190x130"/></br>sroijoitjroijtroijtoirjsdefererfrerev</div>
        </br>

CSS: 

.column-left{ display: inline-block;  }
.column-right{ display: inline-block;  }
.column-center{ display: inline-block;  }

.190x130{
display:inline-block;
}

Upvotes: 0

Views: 2096

Answers (5)

Adhikari Himanshu
Adhikari Himanshu

Reputation: 11

I've sorted out your problem, see the thing is if you want some divs to display inline then give them same class

<div class="Main-content-float-left">
<h1 class="contentheader1">  vitae, justo. Nullam dictum viverra quis, feugiat a, tellus. Phasellu</h1>
<div class="column">
  "img src here"
  <p>sroijoitjroijtroijtoirjsdefererfrerev</p>
</div>
<div class="column">
 "img src here"
  <p>sroijoitjroijtroijtoirjsdefererfrerev</p>
</div>
<div class="column">
 "img src here"
  <p>sroijoitjroijtroijtoirjsdefererfrerev</p>
</div>


.column{
  display:inline-block;
  width:30%;
  word-wrap: break-word;
}

.column img{
  width:90%;
  height:200px;
}

.column p{
  width:90%;
}

If you want to display div's in one line then this can happen either by using display:inline-block or float left. But if you are using float:left then clear it by using clear:both on parent css.

like in your case : 

.Main-content-float-left:after{ clear:both}

A working plunk to your problem is given here plunk

Upvotes: 1

vyoma shah
vyoma shah

Reputation: 1

    <div class="Main-content-float-left">
<h1  class="contentheader1"> Text </h1>
  <div class="row">
    <div class="column-center fl"> <img src="190x130.gif"> </div>
    <div class="column-left fl"> <img src="190x130.gif"> </div>
    <div class="column-right fl"> <img src="190x130.gif"> </div>
  </div>
  <div class="row">
    <div class="column-center fl">
      <p> Text Text </p>
    </div>
    <div class="column-left fl">
      <p> Text Text </p>
    </div>
    <div class="column-right fl">
      <p> Text Text </p>
    </div>
  </div>
</div>

.Main-content-float-left {
    width: 100%;
    overflow: hidden;
}
.column-center, .column-left, .column-right {
    width: 32%;
    margin-left: 10px;
}
.column-center {
 margin-left:0px;
}
.column-center img, .column-left img, .column-right img {
    display: block;
    margin: 0 auto;
}
.fl {
    float: left;
}

Upvotes: 0

user3781632
user3781632

Reputation: 1633

You're on the right track, but you're using way too much code which can cause confusion. Here's how to do it:

Set up your 3 divs first:

<div class="main-content">
    <h1>Title</h1>

    <div class="column">
        <img src="http://placehold.it/190x130" />
        <p>This is a paragraph. Yay!</p>
    </div>

    <div class="column">
        <img src="http://placehold.it/190x130" />
        <p>This is a paragraph. Yay!</p>
    </div>

     <div class="column">
        <img src="http://placehold.it/190x130" />
        <p>This is a paragraph. Yay!</p>
    </div>
</div>

Now the easy part: Use one class column to position all your image divs inline:

.column {    
    display: inline-block;
}

Working Example: http://jsfiddle.net/enogfnup/

Upvotes: 1

ketan
ketan

Reputation: 19341

I think you need something like this:

HTML:

<div class="Main-content">
   <div class="column"><img src="190x130.gif" class="190x130"/>
        <div class="test">sdefererfreresdefererfrerevsdefererfrere</div>   </div>

<div class="column"><img src=" 190x130.gif" class="190x130"/>
    <div class="test">sgrrjtijt5r09itrioktrsdefererfreresdefererfrere</div></div>

<div class="column"><img src=" 190x130.gif" class="190x130"/>
    <div class="test">sroijoitjroijtroijtoirjsdefererfrerev</div>
</div>
</div>

CSS:

.column{ display: inline-block;  width:32%; }
.test{ width:32%; word-wrap: break-word; }


.Main-content{
    width="100%";
}

Here JSFiddle

Upvotes: 0

winresh24
winresh24

Reputation: 687

Hey mate you are calling a wrong div for inline try this one

.Main-content-float-left div{display:inline-block;}

Upvotes: 0

Related Questions