I'm working on a particular part of a web page right now and have a mocked-up design to work from. I've always been able to get everything blocked out in HTML and roughly looking how I like in CSS no problem. It's when I get into the final stretches that I feel I'm constantly fighting CSS to achieve the look I'm aiming for (not even aiming for pixel-perfect or anything like that, I know that's a whole different discussion). Just figuring out how to move some text just so and space the words how I want and get sizing and spacing how I want is taking up so much time. This project in particular is driving me up the wall because making one thing look right messes up the other stuff I've done.

My questions are these: Is there a better way than trial and error in a browser's dev tools to figure this stuff out? Is there a resource for CSS of high-level "You want to do X? Use Y technique" that isn't ad-ridden blog-spam of "17 amazing ways to X"? Are there better tools for this beyond browser dev tools? Or is this struggle just "how it is" and there isn't anything better than to just fiddle around for hours?

Mockup, my attempt, and most relevant HTML + CSS snippets are below



My attempt in HTML+CSS:



<div id="result-message">
    <p class="content">
        <span class="message-row outer before-cost">a used home costs</span>
        <span class="message-row cost">
            <span class="monthly-cost-delta"><!-- Dynamic content --></span>
            <span class="over-under">
                <span class="over-line">MORE</span>
                <span class="under-line">PER MONTH</span>
        <span class="message-row outer after-cost">to own than a new home</span>


#result-message {
    float: left;
    position: relative;
    top: 28.7rem;
    left: 25rem;
    margin: 0;
    padding: 1rem 2rem;
    height: auto;

    background: white;
    border: 6px solid #ECC246;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-weight: 900;

#result-message .content {
    /* margin-top: -1rem; */
    color: #DB9F32;
    font-size: 29px;
    font-weight: 700;
    text-align: center;
    /* text-shadow: 2px 2px #2EAA60; */

#result-message .content .message-row {
    width: 272px;

#result-message .content .before-cost {
    margin-top: -2rem;
    margin-bottom: -4rem;

#result-message .content .after-cost {
    margin-bottom: -7rem;
    position: relative;
    top: -2rem;

#result-message .content .outer.message-row .textFitted {
    text-align: justify !important;
    width: 100%;

#result-message .content .outer.message-row {
    display: block;
    height: 50px;
    text-align: justify;
    clear: both;

/* For single line justify as described at https://kristinlbradley.wordpress.com/2011/09/15/cross-browser-css-justify-last-line-paragraph-text/ */
#result-message .content .outer.message-row:after {
    content: "";
    display: inline-block;
    width: 100%;

#result-message .content .cost {
    display: block;
    color: #347341;
    clear: both;

#result-message .content .cost .monthly-cost-delta {
    float: left;
    font-size: 80px;
    line-height: 94px;

#result-message .content .cost .over-under {
    display: block;

#result-message .content .cost .over-under .over-line {
    font-size: 40px;
    display: block;
    float: right;
    text-align: center;

#result-message .content .cost .over-under .under-line {
    font-size: 20px;
    border-top: 3px solid #347341;
    display: block;
    float: right;
  • "Best resources" is just too broad of a question. – DA01 Sep 3 '15 at 19:07
  • Unfortunately there's no magic pill here. CSS isn't necessarily easy, you need to learn it and practice it to get good with it, just like everything else. – Hanna Sep 4 '15 at 16:23

No, there is no real collection of "You want to do X? Use Y technique" besides StackOverflow which has much more in addition to that. The reason behind it is because programming has a lot of variations of every problem. The circumstances are different based on desired result and the environment.

As for the design that you have in the question, your thickness of the fonts are off. Either change the font so it's the same or rework the design so it works with the web fonts you're using. There are several ways to correct the line on the right side, I won't go into how to do so because there are too many options (showing my first point in this answer).

As for best ways to fix things like this, there really isn't a better way than dev tools. Dev tools give you live updates to the changes you make. What would you want better than that?

With more experience you'll become faster at it. You'll recognize problems and know the solutions to them more often. It's the same as learning any application for design - it takes some investment to learn how to do things and even longer to learn how to do things quickly.

  • Awesome thanks, this is exactly what I was looking for. A confirmation that it's a matter of experience and not me missing some obvious category of solutions. – Bjartr Sep 3 '15 at 18:33
  • As an aside, any suggestions on how to recognize and avoid using more fragile/hacky solutions other than having such solutions bite me in the ass a handful of times? I've got tons of general programming experience, but the HTML/CSS landsacpe is so fluid that it's difficult to tell when I've found today's best practice, or yesterday's best practice that is frowned upon today. – Bjartr Sep 3 '15 at 18:36
  • @Bjartr Again, it comes down to what you're doing. If you have specific questions/want to learn quickly what the best practices you can hire people like me to teach you – Zach Saucier Sep 3 '15 at 18:47

Not the answer you're looking for? Browse other questions tagged or ask your own question.