Hi everyone i want o display 3 elements in a row. I have tried the following code but it is not displaying them correctly.

    <div id="mainDiv" style="background-color:#f77f00; width:90%; margin-right:5%; margin-left:5%; margin-bottom:1%; margin-top:1%;" >
        <div id="left" onclick="Deletefav(this)"  style="display: inline; width:20%; float:left; ">'+
            '<img style="display: inline;" src="" />
        </div>'+

        <div id="center" onclick=""  style=" width:30%;  display: inline;text-align: center; margin:10%;">
            <p style="display: inline;"><font color="#fff" face="verdana" size="4">testing</font></p>
        </div>

        <div id="right" onclick="Callfav(this)"  style="display: inline; width:20%; float:right;">
            <img style="display: inline;" src="" /> 
        </div>
    </div>

It is displaying like this

I want to create it like the sample image

Hi everyone i want o display 3 elements in a row. I have tried the following code but it is not displaying them correctly.

    <div id="mainDiv" style="background-color:#f77f00; width:90%; margin-right:5%; margin-left:5%; margin-bottom:1%; margin-top:1%;" >
        <div id="left" onclick="Deletefav(this)"  style="display: inline; width:20%; float:left; ">'+
            '<img style="display: inline;" src="" />
        </div>'+

        <div id="center" onclick=""  style=" width:30%;  display: inline;text-align: center; margin:10%;">
            <p style="display: inline;"><font color="#fff" face="verdana" size="4">testing</font></p>
        </div>

        <div id="right" onclick="Callfav(this)"  style="display: inline; width:20%; float:right;">
            <img style="display: inline;" src="" /> 
        </div>
    </div>

It is displaying like this

I want to create it like the sample image

• javascript
• jquery
• html
• css

• Your image looks like they're all in a row to me. What wrong with it? – Rory McCrossan Commented May 22, 2014 at 7:02
• Please read my question again i have made few changes, that can explain it better – Nomiluks Commented May 22, 2014 at 7:12
• 1 Please post valid html that the community can work with to reproduce the problem. Or provide something like a JSFiddle that demonstrates the problem. And try to avoid inline styles , which makes your code extremely difficult to work with… Why Use Css – T J Commented May 22, 2014 at 7:14
• @TJ is right i m agree with him – user3423017 Commented May 22, 2014 at 7:16

7 Answers 7

Give display property inline-block for inner divs:

  display:inline-block;

Update:

you need to set the height for div that has jo will fix it as other to div have images in them:

<div
  id="${id}"
  style="
    background-color: #f77f00;
    width: 90%;
    margin-right: 5%;
    margin-left: 5%;
    margin-bottom: 1%;
    margin-top: 1%;
  "
>
  <div
    id="${_id}"
    onclick="Deletefav(this)"
    style="background-color: #f77f00; float: left; width: 20%; display: inline-block"
  >
    <img style="" src="${del_image}" /> <font color="#fff" face="verdana" size="1">delete</font>
  </div>

  <div
    id="${_id}"
    onclick=""
    style="background-color: #f77f00; float: left; width: 50%; display: inline-block; height: 25px"
  >
    <font color="#fff" face="verdana" size="4">${name}</font>
  </div>

  <div
    id="${_id}"
    onclick="Callfav(this)"
    style="background-color: #f77f00; float: left; width: 20%; display: inline-block"
  >
    <img style="" src="${call_image}" /><font color="#fff" face="verdana" size="1">call</font>
  </div>
</div>

Add display: inline-block; to the child divs.

Set the height of the child divs:

1. Possibility: Set the height for all the child divs: height: 20px /* or in %, em, etc */;
2. Possibility: Set the height for the child divs: height: inherit; which gives the height from the parent div to the children divs

From W3Schools:

The inherit keyword specifies that a property should inherit its value from its parent element.

The inherit keyword can be used for any CSS property, and on any HTML element.

To display all <div> elements in one row you can just try:

display:'flex'

If you want a quick fix then you can use another element with clear:both; property:

'</div> <br style="clear:both; height:0;" />';

add height to your second div which is not correctly displayed like

<div id="${_id}" onclick="" style="height=40px; background-color:#f77f00; float:left; width:50%;">
  <p style="">
    <font color="#fff" face="verdana" size="4">${name}</font>
  </p> 
</div>

Add like style="height=40px; ..."

Here i have written some code that might solve this issue (:

section > div {
    display: table-cell;
    width: 33%;
    text-align: center;
    background-color:#f77f00; 
    text-align: center; 
    vertical-align: middle;
    margin:10%;
}
section {
    display: table;
    width: 100%;
    margin:1%;
}

<section style="background-color:#f77f00; text-align: center; vertical-align: middle;">
    <div>
        <img style=" " src="http://i58.tinypic.com/16c9ulk.png" />
    </div>
    <div>
        <p style=""><font color="#000" face="verdana" size="4">JO willl fix it </font>
        </p>
    </div>
    <div>
        <img style="" src="http://i59.tinypic.com/b4ddtu.png" />
    </div>
</section>

<section style="background-color:#f77f00; text-align: center; vertical-align: middle;">
    <div>
        <img style=" " src="http://i58.tinypic.com/16c9ulk.png" />
    </div>
    <div>
        <p style=""><font color="#fff" face="verdana" size="4">JO willl fix it </font>
        </p>
    </div>
    <div>
        <img style="" src="http://i59.tinypic.com/b4ddtu.png" />
    </div>
</section>

body {
  margin: 0;
  padding: 0;
}

.container {
  margin: 25% 5%;
  display: inline-flex;
  column-gap: 10px;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.container .child {
  border: 0 solid #000;
  padding: 5px;
  width: 40%;
  text-align: center;
  background-color: #ff0012;
  color: #ffffff;
  border-radius: 5px;
}

<html>

<body>
  <div class="container">
    <div class="child">
      <p>Some text</p>
    </div>
    <div class="child">
      <p>Some more text</p>
    </div>
    <div class="child">
      <p>Much more text</p>
    </div>
  </div>
</body>

</html>