CODEWITHSUNDEEP
htmlcss
Croset
Croset

Reputation: 37

Text slightly out of alignment in css?

I'm building my portfolio site and I'm having 4 separate boxes that will have 4 separate things that I can do (Illustration, Video Editing, etc), and underneath using a <small> tag I'll have a short description. This is what it currently looks like Example

As you can see the <small> text is outside of the background color box and not aligned correctly (ie I want the box to grow with the text, be aligned and centered), one of the boxes is longer than the rest. Here is my html;

<div id="price-timeline">
                                <div class="price">
                                    <h4>Animation<small>short description here</small></h4>

                                </div> <!-- price -->

                                <div class="price">
                                    <h4>Illustration<small>short description here</small></h4>


                                </div> <!-- price -->

                                <div class="price">
                                    <h4>Video Editing<small>short description here</small></h4>

                                </div> <!-- price -->

                                <div class="price">
                                    <h4>Storyboarding<small>short description here</small></h4>

                                </div> <!-- price -->


                            </div> <!-- price timeline -->

and here is my css covering that;

#price-timeline 
    {
        margin: 25px 0 60px; /* top, side, bottom */
        text-align: center;
    }

    #price-timeline .price {
        display: inline-block;
        width: 20%; /* stack against eachother; */
        margin: 0 2% 0 0;
        background: #f8f8f8;
        padding: 10px 20px 40px;
        position: relative;
        vertical-align: top;
    }

#price-timeline h4 {
    margin: 0 0 10px;
}

What am I missing here to get the text aligned?

Thank you!

Upvotes: 0

Views: 1654

Answers (5)

Didarul Alam
Didarul Alam

Reputation: 79

I have edited my answer base on your requirement. Now you can add large number of text if you want to add. Now it does not go out side of the gray box what you wanted.

#price-timeline {
	margin: 25px 0 60px; /* top, side, bottom */
	text-align: center;
}

#price-timeline .price {
	display: inline-block;
	width: 20%; /* stack against eachother; */
	margin: 0 2% 0 0;
	background: #f8f8f8;
	padding: 10px 20px 40px;
	position: relative;
	vertical-align: top;
	float:left;
}

#price-timeline h4 {
    margin: 0 0 10px;
	word-wrap:break-word;
}

.price small{
	word-wrap:break-word;		
}
<div id="price-timeline">
    <div class="price">
        <h4>Animation<small>short description here</small></h4>

    </div> <!-- price -->

    <div class="price">
        <h4>Illustration<small>short description here</small></h4>

    </div> <!-- price -->

    <div class="price">
        <h4>Video Editing<small>short description here</small></h4>

    </div> <!-- price -->

    <div class="price">
        <h4>Storyboarding<br /><small>short description here Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non haben</small></h4>

    </div> <!-- price -->


</div> <!-- price timeline -->

Upvotes: 0

Steven Waters
Steven Waters

Reputation: 55

I think this is a better solution because adding padding to the .price DIV element and making the small element a block-level element will eventually allow the layout to break when more text is added to one of the description fields. My recommendation is to do the following:

  1. Add a fixed width (or a dynamic width using languages SASS, Less, etc ) to the .price element

  2. Make the small element a block level element (but I would also add a class to it such as description, otherwise all instances of that element will inherit that style) and adding a overflow-wrap: normal for adding a word wrap to it.

Below is an example of this solution:

CSS

#price-timeline {
  margin: 25px 0 60px;
  /* top, side, bottom */
  text-align: center;
}

#price-timeline .price {
  display: inline-block;
  width:200px;
  /* stack against each other; */
  margin: 0 2% 0 0;
  background: #f8f8f8;
  padding: 10px 20px 40px;
  position: relative;
  vertical-align: top;
}

#price-timeline h4 {
  margin: 0 0 10px;
}

small {
 display:block;
 overflow-wrap: normal;
}

HTML

<div id="price-timeline">
  <div class="price">
    <h4>Animation<small>short description here</small></h4>

  </div>
  <!-- price -->

  <div class="price">
    <h4>Illustration<small>Proin elit leo, egestas at viverra quis, euismod in lorem. Nunc ac auctor sapien. Nunc porta placerat lorem ac dapibus. Mauris consectetur ex a ex congue, sed varius turpis imperdiet. Cras fermentum nisi dui, bibendum dictum velit commodo vitae. Vestibulum ut dui turpis. </small></h4>


  </div>
  <!-- price -->

  <div class="price">
    <h4>Video Editing<small>short description here</small></h4>

  </div>
  <!-- price -->

  <div class="price">
    <h4>Storyboarding<small>short description here</small></h4>

  </div>
  <!-- price -->


</div>
<!-- price timeline -->

When I use the CSS in the original solution chosen for this question, I get this in Firefox and Chrome. This is after increasing the number of words in one of the description fields:

Broken layout due to adding padding to parent DIV tag and making an element block-level

I would also recommend checking out flexbox for what you are trying to do, it will make creating columns so much easier :) or use a framework like Bootstrap 3. Bootstrap has a nice component called Panels that you could use for this but you will have to put them in columns which can be easily done using Bootstrap: http://getbootstrap.com/components/#panels

Upvotes: 0

frnt
frnt

Reputation: 8795

You could add word-wrap:break-word into .price,

word-wrap:break-word - is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box.

#price-timeline > .price {
  display: inline-block;
  width: 20%; /* stack against eachother; */
  margin: 0 2% 0 0;
  background: #f8f8f8;
  padding:10px 20px 40px;
  word-wrap:break-word; /*Add this*/
}

Upvotes: 0

Lakshman Kambam
Lakshman Kambam

Reputation: 1618

it's simple, use <br/> after title

<h4>Animation<br/><small>short description here</small></h4>

Upvotes: 0

keziah
keziah

Reputation: 574

Or you can set the padding instead

#price-timeline {
  margin: 25px 0 60px;
  /* top, side, bottom */
  text-align: center;
}

#price-timeline .price {
  display: inline-block;
  padding: 50px; /* added */
  /* stack against each other; */
  margin: 0 2% 0 0;
  background: #f8f8f8;
  padding: 10px 20px 40px;
  position: relative;
  vertical-align: top;
}

#price-timeline h4 {
  margin: 0 0 10px;
}

/* Put the <small> below the <hr> */
#price-timeline small {
  margin-top: 5px;
  display: block;
}
<div id="price-timeline">
  <div class="price">
    <h4>Animation<small>short description here</small></h4>

  </div>
  <!-- price -->

  <div class="price">
    <h4>Illustration<small>short description here</small></h4>


  </div>
  <!-- price -->

  <div class="price">
    <h4>Video Editing<small>short description here</small></h4>

  </div>
  <!-- price -->

  <div class="price">
    <h4>Storyboarding<small>short description here</small></h4>

  </div>
  <!-- price -->


</div>
<!-- price timeline -->

Upvotes: 1

Related Questions