i have css header has div, h1 , div. having challenge of aligning div content left, header center , second div right horizontally content of second div placed on top of 1 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 illustration of trying on
div content h1 content second div kindly assist!
maybe this, use flex 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 done display: table-cell if need 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>
Comments
Post a Comment