CODEWITHSUNDEEP
htmlcss
Egor
Egor

Reputation: 485

DIV with center div and right div inside

StackOverflow. I would like to make html and css layout like this:

css layout image I made a mistype, container is the same height as logo.

I've tried many variants from the internet and stackoverflow, but none of them fit my needs.

What i stopped at:

HTML

<header>
    <div class="fs-login">
        <a href="#" class="btn btn-info">Вход</a>
        <a href="#" class="btn btn-primary">Регистрация</a>
    </div>
    <div class="fs-logo">
        <img src="siteimg/eremademo.png"/>
    </div>
</header>

CSS

header {
    margin:10px 10px 10px 10px;
    position:relative;
}
.fs-logo {
    text-align:center;
}
.fs-login {
    position:absolute;
    right:10px;
    height:100%;
    vertical-align:middle;
}

what i see:

what i see

So buttons are not aligned vertically.

And also I'm not glad, that in HTML "buttons" code is placed before "logo" code. It's not logically right, can I avoid this?

I've struggling over that for about 5 hours. Would be glad for any help :-)

Upvotes: 0

Views: 32

Answers (2)

zessx
zessx

Reputation: 68810

You can use a top: 50%, combined with a transform: translateY(-50%) on your .fs-login container:

header {
    margin:10px 10px 10px 10px;
    position:relative;
}
.fs-logo {
    text-align:center;
}
.fs-login {
    position:absolute;
    right:10px;
    top: 50%;
    -webkit-transform-origin: center center;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
<header>
    <div class="fs-login">
        <a href="#" class="btn btn-info">Вход</a>
        <a href="#" class="btn btn-primary">Регистрация</a>
    </div>
    <div class="fs-logo">
        <img src="http://placehold.it/140x180"/>
    </div>
</header>

Side note: -webkit- is here for Safari, is you don't use Autoprefixer.

Upvotes: 2

Antonio Smoljan
Antonio Smoljan

Reputation: 2207

Here is a solution using floats:

header {
    margin:10px 10px 10px 10px;
    position:relative;
    overflow: hidden;
}
.fs-logo {
    margin-top: 50px;
    text-align:center;
}
.fs-login {
    float: right;
}

Upvotes: 0

Related Questions