How to align divs right and left while using the CSS ghost element technique for vertical centering?


Tags: html,css,vertical-alignment,alignment

Problem :

I wanted to vertically center two divs in the header of my site. Here is the code:

        <header>
            <div class="block">
                <div class="left">
                    <ul>
                        <li>Home page link</li>
                        <li>Music page link</li>
                        <li>Contact page link</li>
                    </ul>
                </div>
                <div class="right">
                    <ul>
                        <li> Facebook icon code</li>
                        <li> Twitter icon code</li>
                        <li> YouTube icon code</li>
                        <li> PayPal donate button code</li>
                    </ul>
                </div>
            </div>
        </header>

And the CSS:

.block {
    width: 100%;
    height: 90px;
}

/* ghost element */
.block:before {
    content: '';
    display: inline-block;
    height = 100%;
    vertical-align: middle;
    margin-right: -0.25em;
}

.right, .left {
    display: inline-block;
    vertical-align: middle;
}

.right {right: 0;}
.left {left: 0;}

.right li, .left li {
    display: inline-block;
}

.left li {
    font-size: 48px;
    margin-left: 12px;
    letter-spacing: -4.5px;
    text-transform: uppercase;
}

This was taken from:
http://stackoverflow.com/a/15304578/1491212
http://css-tricks.com/centering-in-the-unknown/

The code works insofar as it vertically centers the divs. However, the examples discuss only one div to be vertically centered. I want two div's to be vertically centered with one aligned left and the other aligned right. Right now, they are sitting next to each other aligned right:

enter image description here

I'm new to coding and I've done as much reading as I could before coming here; however, I was unable to fix this (probably) simple problem. So, do I get the div class=right and div class=left to the right and left within the strange ghost element framework?



Solution :

Maybe this can help you somehow?

http://tympanus.net/codrops/2013/07/14/justified-and-vertically-centered-header-elements/

It's about using text-align: justify;


    CSS Howto..

    How to increase spacing between lines in CSS?

    How can I set all columns to be the same height? [duplicate]

    JS/CSS: How to change z-index value after scrolling down past 1200 pixels (in height)?

    How to get the first ClassB inside ClassA?

    urls being shown after links when printing web page

    How to automatically validate after typing the input without using any frameworks, just simple code for my registration form?

    How to sort properties in CSS file by groups?

    How to upgrade web project with latest fancy Bootstrap & SASS

    Possible to code a search box that searches for a specific tag in a div and then shows it / hides others? [closed]

    How to appy font color from li:hover to inner a link text using CSS

    How can I place html text on top of a canvas flot chart?

    How do I sort css selectors with vim?

    How to print multiple elements in a page individually using css?

    CSS How to make image size relative to parent?

    CSS: how to select parent's sibling [duplicate]

    How to darken a CSS background image?

    How do I use CSS to centre this content?

    How to achieve chamfered CSS Border Corners rather than rounded corners?

    CSS help - how to keep my div in place with a responsive design

    css: how to inherit whole class

    CSS hover transition - how to remove delay?

    How do i make this form same on all browsers?

    How do I center a dynamic div?

    How to have a two headings in same line with css?

    How to display 20 columns in html design

    Keyboard Showed messed up elements' position

    How to avoid this hardcoded index.js when use webpack?

    CSS3 - How to “restore” ::-webkit-scrollbar property to the default scroll bar

    How to make image override parent width and stretch to browser width?

    How to Style CSS Checkboxes with Font Awesome