CODEWITHSUNDEEP
htmlalignmentjsfiddle
Fenderbridge
Fenderbridge

Reputation: 115

Vertically align stubborn paragraphs

I have been trying to get an 'About Us' section to vertically align to the paragraph below it. For some reason, when I try to resize the viewing area or look at it from a smaller screen, About and Us are on two different lines, and if you keep making the area smaller 'About Us' will drop down below and to the left of the entire paragraph.

My first question that I was pondering is how do I make it so the 'About Us' text stays on one line, rather than folding in to two or more lines. My second would be how can I make this scalable without dropping the 'about us' text below the paragraph?

Attached is my code in JSFiddle.

Thanks guys!!

http://jsfiddle.net/2L9qU/

Here is the troubling html: 

                <div class="mainContentContainer">
                <div class="mainContent1">
                        <h1>
                ABOUT US
            </h1>

                </div></div>

Here is the accompanying CSS:

.mainContentContainer {
    width: 85%
}
.mainContent1 h1 {
    font-family:verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
    color:#00245D;
    text-align: left;
    float: left;
    width: 80%;
    min-width: 10%;
}
.mainContent1 {
    color: #000;
    text-align: left;
    max-width: 960px;
    min-width: 100px;
    width: 35%;
}
.mainContent2 {
    color: #000;
    text-align: left;
    max-width: 960px;
    width: 50%;
    margin-left: -6%;
    display: inline-block;
}

Upvotes: 0

Views: 110

Answers (1)

jmc
jmc

Reputation: 538

Your markup is rather messy, so I've tried a simpler approach with a "cleaned up" markup (see http://jsfiddle.net/danielecocca/9eJnt/).

  • HTML

    <div class="table">
    <div class="table-row">
        <ul class="table-cell">
            <!-- left side pane contents here -->
        </ul>
        <div class="table-cell">
            <!-- right side pane contents here -->
        </div>
    </div>
</div>

  • CSS

    .table {
    display: table;
}

.table-row {
    display: table-row;
}

.table-cell {
    display: table-cell;
}

This uses a couple of container div elements, one styled as display: table and the other as display: table-row, and a left side and right side pane style as display: table-cell. With a little bit of tweaking, it should definitely match your needs (no real table element used, displayed as a table, resizes just fine).

To avoid breaking up on multiple lines, I second what suggested by Serlite: you can use white-space: nowrap, which treats spaces as if they were non-breaking space entities (&nbsp;).

Upvotes: 1

Related Questions