Andrea Robinson Andrea Robinson - 4 months ago 12
CSS Question

align a div to the left a header to the center and a div to right horizontally

I have a css header that has a div, a h1 and a div. I am having a challenge of aligning the div content to the left, the header to the center and the second div to the right horizontally with content of the second div placed on top of one another.

css snippets

#header {
height: 166px;

background-color: #ccc;
font-weight: bold;
color: black;
margin-bottom:3px;
padding: 2px;
text-align: center;
width: 100%x;

}
#footer {
height: auto;
background-color: #ccc;
font-size: 20px;
font-weight: bold;
color: black;
margin-top: 3px;
padding: 2px;
text-align: center;
width: 100%x;
}


html snippets

<div id="header">
<div style="float:left; margin-left:40px;">
<img src="${contextPath}/resources/images/chat1.png" width="496" height="90"/>

</div>
<h3 align="center"><strong>Chat Panel</strong></h3>
<div align="right">
<img src="${contextPath}/resources/images/chat2.png" />
<form method="post" action="/logout">
<input type="submit" value="Leave Chat"/>
</form>
</div>
</div>


bellow is the illustration of what I am trying on

div content h1 content second div


kindly assist!

Answer

Maybe like this, where you use flex to line them up

#header {
  height: 166px;
  background-color: #ccc;
  font-weight: bold;
  color: black;
  margin-bottom: 3px;
  padding: 2px;
  text-align: center;
  width: 100%x;
  display: flex;
}
#header * {
  flex: 1;
}
#header div:last-child {
  text-align: right;
}
#header h3 {
  margin-top: 35px;
}

#footer {
  height: auto;
  background-color: #ccc;
  font-size: 20px;
  font-weight: bold;
  color: black;
  margin-top: 3px;
  padding: 2px;
  text-align: center;
  width: 100%x;
}
<div id="header">
  <div>
    <img src="http://placehold.it/200x50/f00" width="296" height="90" />
  </div>
  <h3 align="center"><strong>Chat Panel</strong></h3>
  <div>
    <img src="http://placehold.it/50x50/ff0" />
    <form method="post" action="/logout">
      <input type="submit" value="Leave Chat" />
    </form>
  </div>
</div>

Can be done with display: table-cell if you need to target older browsers

#header {
  height: 166px;
  background-color: #ccc;
  font-weight: bold;
  color: black;
  margin-bottom: 3px;
  padding: 2px;
  text-align: center;
  width: 100%;
  display: table;
}
#header * {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

#footer {
  height: auto;
  background-color: #ccc;
  font-size: 20px;
  font-weight: bold;
  color: black;
  margin-top: 3px;
  padding: 2px;
  text-align: center;
  width: 100%x;
}
<div id="header">
  <div>
    <img src="http://placehold.it/200x50/f00" width="296" height="90" />
  </div>
  <h3 align="center"><strong>Chat Panel</strong></h3>
  <div>
    <img src="http://placehold.it/50x50/ff0" />
    <form method="post" action="/logout">
      <input type="submit" value="Leave Chat" />
    </form>
  </div>
</div>