CODEWITHSUNDEEP
htmlcss
MKK
MKK

Reputation: 2753

How can I align this perfectly?

DEMO: http://jsfiddle.net/CtCuk/10/

If you take a look at demo, "Here is News" section is folded.

However I want this section in the midlle vertically, and all straight up to the right.
Then if window size gets narrowed down, it should start folding characters.

Is it possible?

HTML

<div class="top_page">
    <div class='container-general'>
        <div class="annouce-row">    
            <div class='title'>
                New
            </div>
            <div class='announcement'>
                Here is News
            </div>
        </div>
    </div>
</div>

CSS

.top_page{
    width: auto;
    max-width: 900px;
    margin: 50px auto 20px;
}

.annouce-row {
    width: 800px;
}

.annouce-row div {
    width: 100px;
   display: inline-block;
}

.title {
    padding: 20px 10px;
    background-color: rgb(123, 0, 218);
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    margin: 1px;
    color: rgb(255, 255, 255);
    font-size: 22px;
    width: 70px;
}

.announcement {
    font-size: 24px;
    font-weight: 200;
    color: rgb(0, 174, 218);
    margin-left: 0px;
    width: 600px;
}

Upvotes: 0

Views: 66

Answers (3)

Mateus Neves
Mateus Neves

Reputation: 303

I think he need the width to be 100px, so just add: 

.annouce-row div {
    width: 100px;
    display: inline-block;
    vertical-align: middle; //this!
}

Upvotes: 1

Sarah Kemp
Sarah Kemp

Reputation: 2670

Have you tried adding: 

display:table-cell;
vertical-align:middle;

to .announcement? This is supported in everything except IE 6 & 7.

You might want to read this before you decide on this route, however.

Upvotes: 1

Scott Selby
Scott Selby

Reputation: 9580

take this 100px width out and the text will remain on the same line

.annouce-row div {
   width: 100px;    /*this line*/
   display: inline-block;
}

Upvotes: 2

Related Questions