css - Inline-block containers do not sit site by side, cause expansion of container -
apologies, have attempted create js fiddle replication, issue not seem occur in js fiddle can think problem more general css on page.
the js fiddle created not show error, here anyway: https://jsfiddle.net/j2qxh9zg/
i attempting line 2 elements side-by-side. use display:inline-block;
, have width of 33.3%
, 66.6%
. body has font-size:0
set in order remove whitespace issues not believe issue whitespace between containers.
<div class="grid one-third"> <div class="logo"> <img src="assets/logo.png" alt="something"/> </div> </div> <div class="grid two-thirds menu"> <ul> <li><a name="#home">home</a></li> <li><a name="#expertise">our expertise</a></li> <li><a name="#portfolio">portfolio</a></li> <li><a name="#tech">new technology</a></li> <li><a name="#contact">get in touch</a></li> <li>01483 746650</li> </ul> </div>
i cannot seem .one-third
, .two-thirds
divs sit side side, despite them both being display:inline-block;
.grid.one-third{width:33.3%} .grid.two-thirds{width:66.6%} .grid{display:inline-block;box-sizing:border-box;}
live link, can see menu @ bottom of page (grey box) http://digitalshowcase.somethingbigdev.co.uk/
the nav container 70px high. should 50px high. both inside elements 50px high, yet container expands. why?
i think adding vertical-align: middle; .grid it.
Comments
Post a Comment