Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Santos King
Santos King
2,214 Points

Border-bottom not working

I have a div with an id "mission" and have given it a max-width of 70%. However when I try to give the div a bottom-border of 1px solid #7f7e7e it does it 100% width when I only want 70%. Can someone please help me?

<div id=header>
            <img src="images/logo.jpg">
            <ul id="nav">
                <li>Contact Us</li>
                <li>Decks</li>
                <li>Our Story</li>
            </ul>
        </div>
        <div id="mission">
            <p>Id iisque oporteat suscipiantur pro, mazim quidam nominavi ius id. Paulo ubique cetero pri no, diam vocent eu his. An eum ancillae sensibus. Per veritus nominati hendrerit ad. Eu mel alterum antiopam, vel graece cetero docendi an.</p>
        </div>
        <div id="unique">
            <h2>A Unique Ride for You</h2>
            <p>Immo videri fortasse. Quare attende, quaeso. Aliter enim nosmet ipsos nosse non possumus. Paulum, cum regem Persem captum adduceret, eodem flumine invectio? Cum audissem Antiochum, Brute, ut solebam, cum M. Aliter enim nosmet ipsos nosse non possumus.

Non enim, si omnia non sequebatur, idcirco non erat ortus illinc. Servari enim iustitia nisi a forti viro, nisi a sapiente non potest. Sic enim censent, oportunitatis esse beate vivere. Satis est ad hoc responsum. Collige omnia, quae soletis: Praesidium amicorum. Aut, Pylades cum sis, dices te esse Orestem, ut moriare pro amico?</p>
        </div>

#mission {
    clear: both;
    width: 70%;
    height: 200px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    color: #7F7E7E;
    border-bottom: 1px solid #7f7e7e;
}

#mission p {
    margin: auto;
    width: 70%;
    word-break: break-all;
    font-size: 1.30em;
    font-weight: 100;
}

5 Answers

James Wiseman
James Wiseman
1,576 Points

Try:

#mission {
    clear: both;
    width: 70%;
    height: 200px;
    text-align: center;
    margin:auto;
    color: #7F7E7E;
    border-collapse:collapse;
    border-bottom: 1px solid #7f7e7e;

}

#mission p {
    margin: auto;
    width: 70%;
    word-break: break-all;
    font-size: 1.30em;
    font-weight: 100;
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
Cody Coats
Cody Coats
7,469 Points
Cody Coats
Cody Coats
7,469 Points

#mission gets a width of 100%. display: table-cell; is overriding your #mission{width: 70%;}

But more importantly; if you are wanting a line under the mission you might consider using a <hr> that you can style anyway you want instead of using a border. This might also be more semantically inline with what you want.

Tyler Groskreutz
Tyler Groskreutz
14,793 Points
Tyler Groskreutz
Tyler Groskreutz
14,793 Points

Have you tried adding a float:left; to #mission?

Santos King
Santos King
2,214 Points
Santos King
Santos King
2,214 Points

Thank you guys for taking the time to help me.

The reason why i have display: table cell is because it keeps <p> in position in the middle of the div. If i remove it <p> will go into the header. Same problem if I use float:left.

Cody Coats
Cody Coats
7,469 Points

http://codepen.io/anon/pen/edpAa

Is this what you want it to look like?

If you can supply a mock or more concrete details of what you are looking for might be able to help more.

Santos King
Santos King
2,214 Points
Santos King
Santos King
2,214 Points

Thank you James, works perfectly!