Middle Div will not sit center of other divs - html

Question

I am trying to create my header. Which includes a Logo (left), Banner (center) and NavBar (Right). I can get them level with each other but cannot get the banner to sit perfectly central of the page.
The banner is pushed over towards the right, sitting approximately 70% of the way across the screen.
Any ideas as to why this may be happening?
#header1 {
position: absolute;
width: 100%;
height: 100px;
text-align: center;
margin: 0px;
padding-top: 2px;
padding-right: 2px;
padding-left: 2px;
padding-bottom: 2px;
color: white;
font-size: 18px;
background-image: url(content/structure/fmabannerbehind.jpg);
background-position: center;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
font-style: italic;
}
#logo {
margin-left: 0px;
height: 100px;
width: 200px;
float: left;
border-color: red;
border-width: 3px;
border-style: solid;
}
#logo img {
height: 100px;
width: auto;
}
#banner {
position: absolute;
height: 100px;
width: auto;
display: inline-block;
margin: 0 auto;
border-color: red;
border-width: 3px;
border-style: solid;
}
#banner img {
height: 100px;
width: auto;
}
#menu1 {
margin-right: 0px;
height: 100px;
width: auto;
float: right;
border-color: red;
border-width: 3px;
border-style: solid;
}
<div id="header1">
<div id="logo">
<a href="http://www.fmarchived.com">
<img src="/content/structure/logo3.jpg" alt="logo">
</a>
</div>
<div id="banner">
<a href="/">
<img src="/content/structure/fmabanneronly.jpg" alt="banner">
</a>
</div>
<div id="menu1">
<div class="child2menu">
<ul>
<li>About Us
</li>
<li>Facebook
</li>
<li>Twitter
</li>
<li>Youtube
</li>
</ul>
</div>
</div>
</div>

Answer 1

UPDATE
Perhaps I should have explained better, I want the banner to be center
of the entire page, regardless of what the other divs are doing
Then add position:relative to #header1 and position:absolute + display: inline-table; position:absolute; left:0; right:0;
margin:auto; to #banner in both snippets
Option#1 - using CSS flexbox
Using justify-content: space-between from flexbox you can do this, and simplify a lot your code
* {
box-sizing: border-box;
margin: 0
}
#header1 {
display: flex;
justify-content: space-between;
position: relative
}
#header1 > div {
border: solid red
}
img {
vertical-align: bottom
}
#banner {
display: inline-table;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
<div id="header1">
<div id="logo">
<a href="http://www.fmarchived.com">
<img src="//lorempixel.com/200/100" alt="logo">
</a>
</div>
<div id="banner">
<a href="/">
<img src="//lorempixel.com/100/100" alt="banner">
</a>
</div>
<div id="menu1">
<div class="child2menu">
<ul>
<li>About Us
</li>
<li>Facebook
</li>
<li>Twitter
</li>
<li>Youtube
</li>
</ul>
</div>
</div>
</div>
Option#2 - using your current code
Change position:absolute from #header1 to relative to remove scrollbars
* {
box-sizing: border-box;
margin: 0
}
#header1 {
position: relative;
width: 100%;
height: 100px;
text-align: center;
margin: 0;
padding: 2px;
color: white;
font-size: 18px;
background-image: url(content/structure/fmabannerbehind.jpg);
background-position: center;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
font-style: italic;
}
#header1 > div {
border: 3px solid red
}
img {
height: 100px;
width: auto;
vertical-align:bottom
}
#logo {
margin-left: 0;
width: 200px;
float: left;
}
#banner {
width: auto;
display: inline-table;
position:absolute;
left:0;
right:0;
margin:auto;
}
#menu1 {
margin-right: 0px;
float: right;
}
<div id="header1">
<div id="logo">
<a href="http://www.fmarchived.com">
<img src="//lorempixel.com/100/100" alt="logo">
</a>
</div>
<div id="banner">
<a href="/">
<img src="//lorempixel.com/100/100" alt="banner">
</a>
</div>
<div id="menu1">
<div class="child2menu">
<ul>
<li>About Us
</li>
<li>Facebook
</li>
<li>Twitter
</li>
<li>Youtube
</li>
</ul>
</div>
</div>
</div>

Answer 2

Remove the position: absolute property from the #banner div. If the #banner div needs to be absolutely positioned for some reason, you can center it by giving it a width and appropriateleft attribute instead.

Answer 3

Just remove the position absolute and it will align to the center.
#banner {
/*position:absolute;*/
height: 100px;
width: auto;
display: inline-block;
margin:0 auto;
border-color: red;
border-width: 3px;
border-style: solid;
}

Answer 4

you can use coordonates and margin: auto; to center your boxe if tou use absolute . but you need to reset display .
#banner {
position: absolute;
height: 100px;
width: auto;
display: table;/* shrinks on content */
left:0;
right:0;
margin: 0 auto;/* will center in between coordonates if boxe smaller */
border-color: red;
border-width: 3px;
border-style: solid;
}
run code snippet bellow:
#header1 {
position: absolute;
width: 100%;
height: 100px;
text-align: center;
margin: 0px;
padding-top: 2px;
padding-right: 2px;
padding-left: 2px;
padding-bottom: 2px;
color: white;
font-size: 18px;
background-image: url(content/structure/fmabannerbehind.jpg);
background-position: center;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
font-style: italic;
background:linear-gradient(to right,gray 50%, lightgray 50%);
}
#logo {
margin-left: 0px;
height: 100px;
width: 200px;
float: left;
border-color: red;
border-width: 3px;
border-style: solid;
}
#logo img {
height: 100px;
width: auto;
}
#banner {
position: absolute;
height: 100px;
width: auto;
display: table;
margin: 0 auto;
left:0;
right:0;
border-color: red;
border-width: 3px;
border-style: solid;
}
#banner img {
height: 100px;
width: auto;
}
#menu1 {
margin-right: 0px;
height: 100px;
width: auto;
float: right;
border-color: red;
border-width: 3px;
border-style: solid;
}
<div id="header1">
<div id="logo">
<a href="http://www.fmarchived.com">
<img src="/content/structure/logo3.jpg" alt="logo">
</a>
</div>
<div id="banner">
<a href="/">
<img src="/content/structure/fmabanneronly.jpg" alt="banner">
</a>
</div>
<div id="menu1">
<div class="child2menu">
<ul>
<li>About Us
</li>
<li>Facebook
</li>
<li>Twitter
</li>
<li>Youtube
</li>
</ul>
</div>
</div>
</div>