https://i.sstatic.net/nBl4Q.pngI'm looking to design a unique box/div for this message board that incorporates the top part of a cross into the layout. My vision is to have a small image on the left side of the bar, with the banner/logo taking up the space on the right side.
I'm struggling to figure out how to create two div elements where the left side has a fixed width and the right side automatically adjusts to fill the remaining browser space. Check out my test-site here:
#wrapper {
position: relative;
width: 95%;
margin: 0 auto;
border: 2px solid #FF0000;
}
#header {
text-align: center;
height: 175px;
background: #FFFF80;
}
#content,
#footer {
margin-left: 175px;
border: 1px solid #0000FF;
border-left: 50px solid #0000FF;
}
#content:after {
content: '';
position: absolute;
width: 400px;
left: 0;
top: 125px;
border-top: 50px solid #0000FF;
}<div id="wrapper">
<div id="header">
board banner/logo goes here
<h1>Your board name here</h1>
</div>
<!-- end header -->
<div id="content">
</div>
</div>