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
Post a Comment