CODEWITHSUNDEEP
htmlcsstextalignment
Idos
Idos

Reputation: 15310

Aligning CSS spans correctly

I have a very simple-looking problem in my web page.

First, here are my HTML and CSS snippets:

.middle-side p span.two {
	margin: 0 0em 0 1em;
}
.middle-side p span.bath8 {
  margin: 0 56% 0 0;
}
.middle-side p span.bath7 {
  margin: 0 46% 0 0;
}
.middle-side p span.bath6 {
  margin: 0 36% 0 0;
}
.middle-side p span.bath5 {
  margin: 0 37% 0 0;
}
.middle-side p span.bath3 {
  margin: 0 24% 0 0;
}
.middle-side p span.bath2 {
  margin: 0 14% 0 0;
}
.middle-side p span.bath1 {
  margin: 0 32% 0 0;
}
<div class="col-sm-4 middle-side immediate">
   <h4>Features:</h4>

   <p><span class="bath1">Floor</span>:<span class="two"> {{listing.floor}}</span></p>

   <p><span class="bath2">Price</span>:<span class="two"> {{listing.price}}</span></p>

   <p><span class="bath3">Plot Area</span>:<span class="two"> {{listing.size}}</span></p>

   <p><span class="bath4">Number of rooms</span>:<span class="two"> {{listing.rooms}}</span></p>

   <p><span class="bath5">Elevator</span>:<span class="two"> {{listing.elevator}}</span></p>

   <p><span class="bath6">Air Conditioned</span>:<span class="two"> {{listing.airConditioning}}</span></p>

   <p><span class="bath7">Renovated</span>:<span class="two"> {{listing.renovated}}</span></p>

   <p><span class="bath8">Balcony</span>:<span class="two"> {{listing.price}}</span></p>
</div>

This yields:

wrong

And I want it to be aligned correctly, like this:

correct

How can I achieve this?

Upvotes: 2

Views: 83

Answers (6)

Michael Benjamin
Michael Benjamin

Reputation: 370993

You may want to consider using flexbox.

HTML

Just wrap the colon in a span, so it's not an anonymous element, which means it wouldn't be styleable or selectable.

CSS

Replace your code with this:

.col-sm-4 {
    display: flex;
    flex-direction: column;
}

.col-sm-4 > p {
    display: flex;
    border: 1px solid black;
}

.col-sm-4 > p > span:nth-child(1) {
    flex: 0 0 20%;
    background-color: aqua;
}

.col-sm-4 > p > span:nth-child(2) {
    flex: none;
    background-color: pink;
}

.col-sm-4 > p > span:nth-child(3) {
    flex: 1;
    background-color: yellow;
}

The code above results in this responsive layout:

enter image description here

DEMO

Upvotes: 1

roshan
roshan

Reputation: 2510

You can use the css framework you are using to achieve this:

<style type="text/css" media="screen">

.two span{
    padding-right:5px;
}
</style>

<div class="row">
<div class="col-sm-4 middle-side immediate">
    <h4>Features:</h4>

    <div class="row">
        <div class="bath1 col-sm-6">Floor</div>
        <div class="two col-sm-6"> 
        <span>:</span> 
            {{listing.floor}}
        </div>
    </div>

    <div class="row">
        <div class="bath2 col-sm-6">Price</div>
        <div class="two col-sm-6"> 
        <span>:</span> 
            {{listing.price}}
        </div>
    </div>

    <div class="row">
        <div class="bath3 col-sm-6">Plot Area</div>
        <div class="two col-sm-6"> 
        <span>:</span> 
            {{listing.size}}
        </div>
    </div>

    <div class="row">
        <div class="bath4 col-sm-6">Number of rooms</div>
        <div class="two col-sm-6"> 
        <span>:</span> 
            {{listing.rooms}}
        </div>
    </div>

    <div class="row">
        <div class="bath5 col-sm-6">Elevator</div>
        <div class="two col-sm-6"> 
        <span>:</span> 
            {{listing.elevator}}
        </div>
    </div>

    <div class="row">
        <div class="bath6 col-sm-6">Air Conditioned</div>
        <div class="two col-sm-6"> 
        <span>:</span> 
            {{listing.airConditioning}}
        </div>
    </div>

    <div class="row">
        <div class="bath7 col-sm-6">Renovated</div>
        <div class="two col-sm-6"> 
        <span>:</span> 
            {{listing.renovated}}
        </div>
    </div>

    <div class="row">
        <div class="bath8 col-sm-6">Balcony</div>
        <div class="two col-sm-6"> 
        <span>:</span> 
            {{listing.price}}
        </div>
    </div>
</div>  
</div>

This will save a lot of time. When going responsive.

Upvotes: 1

Reinstate Monica -- notmaynard
Reinstate Monica -- notmaynard

Reputation: 5490

If you want to keep the structure you have, the correct approach would be to use the various table model values of the display property. To treat div.middle-side as the table, the p elements as rows, and the span elements inside them as cells, you would do something like:

.middle-side {
     display: table;
}
.middle-side p {
    display: table-row;
}
.middle-side p span {
    display: table-cell;
}

See this fiddle.

Upvotes: 1

CTABUYO
CTABUYO

Reputation: 712

The code would look something like this. Adapt it to your needing:

<div class="box1">
    <table width="100%" border="0" cellpadding="3" cellspacing="0"onMouseover="changeto(event, '#D0DFEC')" onMouseout="changeback(event, '#ffffff')"width="100%">
        <tr style="border-bottom: 1px dotted silver;">
            <td><strong>Floor:</strong></td>
            <td><font color="0075DB">5th</font></td>

        </tr>
        <tr style="border-bottom: 1px dotted silver;">
            <td><strong>Price:</strong></td>
            <td><font color="0075DB">150,000€</font></td>

        </tr>
        <tr style="border-bottom: 1px dotted silver;">
            <td><strong>Plot Area:</strong></td>
            <td><font color="0075DB">Madrid, Spain</font></td>

        </tr>
        <tr style="border-bottom: 1px dotted silver;">
            <td><strong>Number of rooms:</strong></td>
            <td><font color="0075DB">7</font></td>

        </tr>
        <tr  style="border-bottom: 1px dotted silver;">
            <td><strong>Elevator:</strong></td>
            <td><font color="0075DB">Yes</font></td>

        </tr>
        <tr style="border-bottom: 1px dotted silver;">
            <td><strong>Air Conditioned:</strong></td>
            <td><font color="0075DB">No</font></td>

        </tr>
        <tr style="border-bottom: 1px dotted silver;">
            <td><strong>Renovated:</strong></td>
            <td><font color="0075DB">Yes</font></td>

        </tr>
        <tr style="border-bottom: 1px dotted silver;">
            <td><strong>Balcony:</strong></td>
            <td><font color="0075DB">Yes</font></td>

        </tr>

    </table>
</div>

I added some mouse click event to make it look fancier, also make sure that if you use bootstrap, you do meet all bootstrap requirements regarding columns.(encapsulate the div that contains the column in a row etc etc)

This is the example in JSFiddle

Edit: Though the other solution is correct, I´d always use a table for such this thing

Upvotes: 2

Jonathan Z&#250;&#241;iga
Jonathan Z&#250;&#241;iga

Reputation: 645

You can do this...

.middle-side p span:first-child {
  display: inline-block;
  width: 20%;
}

.middle-side p span.two {
  padding-left: 1em;
}

http://jsfiddle.net/jonathanzuniga/y3xcg646/

Upvotes: 1

Baro
Baro

Reputation: 5520

You can define a width for first span child of "immediate" class like this:

.immediate p span:first-child{
  display:inline-block;
  width:35%;
}

This is the example in JSFiddle

Upvotes: 4

Related Questions