How to add this right beside image? - html

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.

Answer 1

.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.

Answer 2

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>

Answer 3

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/

Answer 4

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>