html - header overlapping when minimized -
when minimize window, div containers overlapping. there way avoid this? tried minimizing min-width reasonable amount problem still persist
image of context: 
html5 :
<body> <header class="header"> <img src="images/logo.png"> <div class="coloredbg"></div> <div class="coloredbg"></div> <div class="coloredbg"></div> <div class="coloredbg"></div> </header> </body> css
.header { max-width:1200px; min-width:200px; margin: 0 auto; margin-top:30px; } .coloredbg { background: #406d85; height:100px; width:170px; float:right; margin-left:3px; -webkit-transition: background 1s; -o-transition: background 1s; -moz-transition: background 1s; }
maybe need
give page minimum width.
set overflow auto
float img left
wrap divs in container takes remaining width
center container giving divs display:inline-block
markup
<header class="header"> <img src="http://placehold.it/380x150"> <div class="container"> <div class="coloredbg"> </div> <div class="coloredbg"> </div> <div class="coloredbg"> </div> <div class="coloredbg"> </div> </div> </header> css
body { min-width: 775px; overflow:auto; } header img { border-right:solid #406d85 1px; padding-right:20px; float:left; } .container { text-align: center; overlow:auto; } .header { max-width:1200px; min-width:200px; margin-top:30px; } .coloredbg { background: #406d85; height:100px; width:170px; display:inline-block; margin-left:3px; -webkit-transition: background 1s; -o-transition: background 1s; -moz-transition: background 1s; } .coloredbg:hover { background: #103b51; -webkit-transition: background 2s; -o-transition: background 2s; -moz-transition: background 2s; }
Comments
Post a Comment