Image disappears when setting float to left

1 Views

I just got into HTML/CSS development and I’m trying to build my first WordPress Theme, but I’m having some issue’s with the HTML and CSS.

What I’m trying to accomplish is to have a header which displays an image on the left side (using float: left) and two other images, another hyperlink and a search field on the right side (float: right).

Read More

When I remove the float: left; from the .log-wrapper, the logo is displayed, but the elements on the right side get pushed down one line. I read that this is due to display:block. But when I add float: left back, the image completely disappears.

Why does that happen? How can I solve this issue? 

<div id="site-header-container">

        <header id="site-header" class="site-header" role="banner">

            <div id="header-wrapper" class="header-wrapper">

                <div id="logo-wrapper" class="logo-wrapper">
                    <!--Site Logo-->
                    <a class="home-link-logo" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
                    </a>
                </div>

                <div id="outer-social-wrapper" class="outer-social-wrapper">
                    <div id="social-wrapper" class="social-wrapper">
                        <div id="languages-wrapper" class="languages-wrapper">
                            <!--Languages-->
                            US
                            NL
                        </div>
                        <div id="contact-wrapper" class="contact-wrapper">
                            <!--Contact-->
                            CONTACT
                        </div>
                        <div id="search-wrapper" class="search-wrapper">
                            <!--Search Form-->
                            SEARCH
                        </div>
                    </div>
                </div>
            </div>

        </header>

    </div>

.logo-wrapper {
    float: left;
}

.home-link-logo {
    background: url("images/logo.jpg") no-repeat;
    display: block;
    max-width: 1000px;
    min-height: 82px;
}

.outer-social-wrapper {
    float: right;
}

.languages-wrapper {
    float: left;
}

.contact-wrapper {
    float: left;
}

.search-wrapper {
    float: left;
}
Post Views: 1

Related posts

Leave a Reply

1 comment 

  1. .logo-wrapper, .languages-wrapper, .contact-wrapper, .search-wrapper {
    display: inline-block;
}
.home-link-logo {
    position: absolute;
    background: url("https://www.apple.com/imac/images/buystrip_retail.png") no-repeat;
    top: 0;
    width: 130px!important;
    height: 120px!important;
    max-width: 1000px;
    min-height: 82px;

}
.outer-social-wrapper {
    float: right;
}