html - Image disappears when setting float to left -


i got html/css development , i'm trying build first wordpress theme, i'm having issue's html , css.

what i'm trying accomplish have header displays image on left side (using float: left) , 2 other images, hyperlink , search field on right side (float: right).

when remove float: left; .log-wrapper, logo displayed, elements on right side pushed down 1 line. read due display:block. when add float: left back, image disappears.

why happen? how can solve 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-->                                                         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; } 

.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; } 

Comments

Popular posts from this blog

android - Get AccessToken using signpost OAuth without opening a browser (Two legged Oauth) -

org.mockito.exceptions.misusing.InvalidUseOfMatchersException: mockito -

google shop client API returns 400 bad request error while adding an item -