We would like to know how to float header left and right with centered image.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
header {<!-- ww w .ja va 2 s. c om-->
border: 1px solid blue;
width: 100%;
min-width: 800px;
height: 160px;
overflow: auto;
}
.ex1 .header-left {
display: inline-block;
width: 33%;
max-width: 190px;
background-color: gray;
float: left;
}
.ex1 .logo {
width: 409px; /* width of the logo */
margin: 10px auto 0 auto;
border: 1px solid red;
}
.ex1 .logo img {
display: block;
}
.ex1 .header-right {
display: inline-block;
width: 33%;
max-width: 190px;
background-color: gray;
float: right;
}
</style>
</head>
<body>
<header class="ex1">
<div class="header-left">the left stuff</div>
<div class="header-right">the right stuff</div>
<div class="logo">
<img src="http://placehold.it/400x200">
</div>
</header>
</body>
</html>
The code above is rendered as follows: