How to add this right beside image?

Question

.item_one_image {
  border: 1px solid #ccc;
  width: 160px;
  padding: 4px 0px 10px 14px;
  height: 250px;
}

<div class="article">
  <div id="title_1">
  </div>
  <div class="item_one_image">
    <img src="#" />
  </div>
  <div class="description_box_1">
    <div class="price_1">
      <span>PRICE:</span>
    </div>
    <li class="description_os">
      <ul>OS</ul>
    </li>
    <li class="descrption_ram">
      <ul>RAM</ul>
    </li>
    <li class="descrption_storage">
      <ul>STORAGE</ul>
    </li>
  </div>
</div>

I want to add price,OS,RAM right beside phone image.
Here is my image:demo-one
I have tried:
float:right; margin:
with float property im able to move it to right side but with margin im not able to move it up and left. Even if i manage to move it to right beside image,it breaks on smaller sized devices.

Bhavin Shah · Answer 1 · 2017-06-10T11:38:29.800

.item_one_image {
  border: 1px solid #ccc;
  width: 160px;
  padding: 4px 0px 10px 14px;
  height: 250px;
  
  float:left;
}
.description_box_1{
  
  float:left;
  margin-left:25px;
}

ul{
margin:0;
}

<div class="article">
  <div id="title_1">
  </div>
  <div class="item_one_image">
    <img src="#" />
  </div>
  <div class="description_box_1">
    <div class="price_1">
      <span>PRICE:</span>
    </div>
    <ul>
    <li class="description_os">
      OS
    </li>
    <li class="description_ram">
      Ram
    </li>
    <li class="description_storage">
      Storage
    </li>
    </ul>
    
    
  </div>
</div>

You have put ul in li , which is wrong. ul is a parent of li , so li must be in ul.

Is this the same that you want? Hope this helps.

As you use `float` you can drop `inline-block` – Asons Jun 10 '17 at 11:31 — Asons, Jun 10 '17 at 11:31
@LGSon .. Oh yeah... Thank You. – Bhavin Shah Jun 10 '17 at 11:39 — Bhavin Shah, Jun 10 '17 at 11:39

score 0 · Answer 2 · answered Jun 10 '17 at 10:54

List item element of html tags should be covered by your unordered list element, that means, "ul" tag should have children elements as "li"

<div class="article">
  <div id="title_1">
  </div>
  <div class="item_one_image">
    <img src="#" />
  </div>
  <div class="description_box_1">
    <div class="price_1">
      <span>PRICE:</span>
    </div>
    <ul>

    </ul>
    <li class="description_os">
      OS
    </li>
    <li class="descrption_ram">
      RAM
    </li>
    <li class="descrption_storage">
      STORAGE
    </li>
  </div>
</div>

.item_one_image {
  border: 1px solid #ccc;
  width: 160px;
  padding: 4px 0px 10px 14px;
  height: 250px;
  float:left;
}
.description_box_1{
  float:left;
  margin-left: 10px;
}

https://fiddle.jshell.net/hofh146n/

@its_sanket it's good if solved your problem. If it works, could you please mark as accepted answer. Thx — burak, Jun 10 '17 at 11:14

Asons · Accepted Answer · 2017-06-12T09:52:37.927

0

To keep the image and text on 1 line, here is 2 good solutions that does, even on smaller devices.

Note, since an ul need a li, I removed your inner ul's

First, the most classical one, using BFC float on the image and a margin-left on the text.

This avoid issues like white spaces with inline block and width calculation when using float, or inline-block, on both elements.

.item_one_image {
  border: 1px solid #ccc;
  width: 160px;
  padding: 4px 0px 10px 14px;
  height: 250px;
  float: left;
}
.description_box_1 {
  margin-left: 176px;    /*  160px width + 14px padding + 1px + 1px border  */
}

<div class="article">
  <div id="title_1">
  </div>
  <div class="item_one_image">
    <img src="http://lorempixel.com/160/250/technics/7/" />
  </div>
  <div class="description_box_1">
    <div class="price_1">
      <span>PRICE:</span>
    </div>
    <ul>
      <li class="description_os">
        OS
      </li>
      <li class="descrption_ram">
        RAM
      </li>
      <li class="descrption_storage">
        STORAGE
      </li>
    </ul>
  </div>
</div>

Second, a more modern solution, using Flexbox

.article {
  display: flex;
}

.item_one_image {
  border: 1px solid #ccc;
  padding: 4px 0px 10px 14px;
}

.description_box_1 {
  flex: 1;                   /*  take all the remaining space  */
}

<div class="article">
  <div id="title_1">
  </div>
  <div class="item_one_image">
    <img src="http://lorempixel.com/160/250/technics/7/" />
  </div>
  <div class="description_box_1">
    <div class="price_1">
      <span>PRICE:</span>
    </div>
    <ul>
      <li class="description_os">
        OS
      </li>
      <li class="descrption_ram">
        RAM
      </li>
      <li class="descrption_storage">
        STORAGE
      </li>
    </ul>
  </div>
</div>

edited Jun 12 '17 at 09:52

answered Jun 10 '17 at 12:11

Asons

84,923
12
110
165

as change the image & increase width:300px and height: 169px,it still breaking the site.Im not able to see it on smaller device – its_sanket Jun 12 '17 at 09:39
@its_sanket If you increase image width to 300px, you need to change the `.description_box_1` rule as well, to `margin-left: 316px;` (width + padding + border) – Asons Jun 12 '17 at 09:47
i did it.it looks prfect on larger screen but on mobile device im not able see description – its_sanket Jun 12 '17 at 09:51
Well, how wide is the mobile device? ... did you set meta viewport? – Asons Jun 12 '17 at 09:53
Normal any android or IOS device.No i didnt – its_sanket Jun 12 '17 at 09:55
@its_sanket I am right now looking at the above code snippet in my Android, with image set to 300px, and can see all text. Do you have a link I can check? – Asons Jun 12 '17 at 10:00
@its_sanket For the _Moto E3 Power_ phone, there is not text in the `article_one_description_side` element... – Asons Jun 12 '17 at 10:05
@its_sanket But your CSS rules and the class names in your markup doesn't match at all, so no wonder it doesn't work – Asons Jun 12 '17 at 10:31
see now html in question – its_sanket Jun 12 '17 at 10:34
@its_sanket First, you can't use a `li` as a child of a `div`, so I changed it in this demo to a `div`, second, it works just fine: https://jsfiddle.net/466zwhos/ ... you must have missed some CSS or something for your web site – Asons Jun 12 '17 at 10:38
@LSSon i appericiate your help – its_sanket Jun 12 '17 at 10:40
@its_sanket You're welcome. I also rolled back the edit you made in the question, or else none of the given answer will make sense since they are based to the first code you posted. If you still want to add that code piece, add it as a fiddle instead. – Asons Jun 12 '17 at 10:43

score 0 · Answer 4 · answered Jun 12 '17 at 07:19

Just add .item_one_image, .description_box_1 { float: left; } code in to your CSS. And change the ul,li structure. Refer code from following HTML section.

.item_one_image {
  border: 1px solid #ccc;
  width: 160px;
  padding: 4px 0px 10px 14px;
  height: 250px;
}

.item_one_image, .description_box_1 {
  float: left;
}

<div class="article">
  <div id="title_1">
  </div>
  <div class="item_one_image">
    <img src="#" alt="demo image" />
  </div>
  <div class="description_box_1">
    <div class="price_1">
      <span>PRICE:</span>
    </div>
    <ul>
      <li class="description_os"> OS </li>
      <li class="descrption_ram"> RAM </li>
      <li class="descrption_storage"> STORAGE </li>
    </ul>
  </div>
</div>

How to add this right beside image?

4 Answers4