CODEWITHSUNDEEP
htmlcss
Aliana Rose
Aliana Rose

Reputation: 53

How can I place the text in this box like this with CSS?

I have a div box that have css like this:

.productinfo2 
{
margin-top: 20px;
display: inline-block;
vertical-align: top;
height: 60px;
border-style:solid;
border-width:1px;
width:800px;
float:right;
margin-right:5px;

}

And this is how it looks right now in HTML:

         <img src="@Html.DisplayFor(modelItem => item.Image)" alt="" />
         <div class="productinfo2">
         <h2>@Html.DisplayFor(modelItem => item.Title)</h2>
         <p id="price">@Html.DisplayFor(modelItem => item.price)</p>
         <input type="text" class="Quantity">
         <p id="total">699</p>
         </div>

I want to make the text and textbox to be exacly like this img but I cant seem to get it like that:

enter image description here

My problem is to get everything in one line, like the img.

Any kind of help is appreciated

http://jsfiddle.net/TUT7G/

Upvotes: 0

Views: 107

Answers (2)

Levi Botelho
Levi Botelho

Reputation: 25214

This seems like a perfect place for a table. Tables are (very) bad for page layout for a whole host of reasons (some of the most important being how they make life difficult for those who use screen readers to "see" web pages). However, in your case your data appears to clearly be in tabular format--that is to say that it makes logical sense to put it in a table.

However if I am mistaken, then you can use inline block elements. Inline block elements combine properties of block elements (such as allowing for a width) and inline elements (such as not taking up an entire line in its containing element). Here is a quick example:

<div>
    <span style="display: inline-block; width: 10em;">text</span>
    <span style="display: inline-block; width: 10em;">more text</span>
    <span>even more text!</span>
</div>
<div>
    <span style="display: inline-block; width: 10em;">another line of text</span>
    <span style="display: inline-block; width: 10em;">more text on the next line</span>
    <span>even more text on the next line!</span>
</div>

And here it is as a fiddle if you don't believe that it works ;).

http://jsfiddle.net/wLZwb/

Upvotes: 0

Jeremy Morehouse
Jeremy Morehouse

Reputation: 801

You're not far off. The only things you really need to think about here is that both h2 and p have inherit line breaks you need to get rid of.

h2 you can get rid of it easily using display:inline.

For P, I would just recommend using a span instead.

More specifically using your code as the example you can do this:

<html>
<style>
.productinfo2 
{
margin-top: 20px;
display: inline-block;
vertical-align: top;
height: 60px;
border-style:solid;
border-width:1px;
width:800px;
float:right;
margin-right:5px;

}

.productinfo2 h2 
{
font-family:Georgia;
font-size:18px;
color:#BED600;
display:inline;
}

#price
{
font-family: Verdana;
font-size:12px;
color:#333333;
margin-left:40%;
}

#price input
{
  width:10px;            
}    

#total
{
font-family: Verdana;
font-size:12px;
color:#333333;
margin-right:20px;
float:right;
}

</style>
<body>


         <div class="productinfo2">
         <h2>test</h2>
         <span id="price">price <input type="text" class="Quantity"></span>
         <span id="total">total: 699</span>
         </div>

         </body></html>

Check it out on JSFiddle: http://jsfiddle.net/muKty/

Upvotes: 1

Related Questions