CODEWITHSUNDEEP
htmlcss
Greaseddog
Greaseddog

Reputation: 15

How do you make HTML elements appear on a vertical line using CSS?

Image of the problem:

enter image description here

How do I go from the one on the left, to the one on the right, using CSS?

Upvotes: 0

Views: 69

Answers (4)

TheIronDeveloper
TheIronDeveloper

Reputation: 3624

While I am in agreement that this can be a table, you can easily do this with floats.

.container {
    padding: 0.5em;
    width: 200px;
    background: #333;
    color: #fff;
}

.button {
    background: #efefef;
    padding: 5px;
    color: #000;
    margin-bottom: 0.5em;
}

.item-header {
    font-weight:bold;
    float:left;
    width: 45%;
    clear:both;
}
<div class="container">
    <div class="button">Buy Foreign Worker</div>
    <div class="items">
        <div class="item-header">You Own:</div>
        <div class="item-value">20</div>
        <div class="item-header">Price:</div>
        <div class="item-value">20</div>
        <div class="item-header">BPS:</div>
        <div class="item-value">0.5</div>
    </div>
</div>

All you are doing is making the header values float to the left, and the clear ensures that it starts on a new row.

Upvotes: 0

Adrian
Adrian

Reputation: 2012

Two divs

<div class="box">
 Your own:<br />
 Price:<br />
 PBS
</div>

<div class="box">
 20<br />
 20<br />
 50
</div>

CSS

.box {
 float:left;
 padding-right:40px;
}

Upvotes: 0

avinashizhere
avinashizhere

Reputation: 455

<div>
    <div id="left"> <!-- float left -->
        <p>You Own></p>
        <p>Price</p>
        <p>BPS</p>
    </div>

    <div id="right"> 
        <p>20</p>
        <p>20</p>
        <p>0.50</p>

    </div>
</div>

Upvotes: 0

durian
durian

Reputation: 520

You can use a table:

<table>
    <tr>
        <td>You own</td>
        <td>20</td>
    </tr>
    <tr>
        <td>Price</td>
        <td>20</td>
   </tr>
    <tr>
        <td>BPS</td>
        <td>0.50</td>
   </tr>
</table>

or floating divs:

<div style="display:inline-block;">
    <div style="float:left; width:150px;">You own</div>
    <div style="float:left;">20</div>
</div>

<div style="display:inline-block;">
    <div style="float:left; width:150px;">Price</div>
    <div style="float:left;">20</div>
</div>

<div style="display:inline-block;">
    <div style="float:left; width:150px;">BPS</div>
    <div style="float:left;">0.50</div>
</div>

Upvotes: 5

Related Questions