I've been struggling to configure a div to automatically adjust its width based on surrounding content. Despite trying various methods, the div stubbornly remains at 100% width. My goal is to add some space on the left and right sides for a neater border, but it keeps getting placed below other divs.
https://i.sstatic.net/lzthJ.png
The desired outcome
https://i.sstatic.net/Ov7Lk.png
The current result (subheader is full width and appears below)
I've experimented with different approaches like overflow:hidden and float:left, but nothing seems to work.
Here is the code snippet:
<div class="box">
<div class="side"></div>
<div class="psubheader">Test</div>
</div>
<style>
.box {
width: 50%;
height: 1000px;
border:1px solid;
}
.psubheader {
padding-bottom:7px;
font-family: 'sans-serif';
font-size: 1.35em;
border-bottom: 1px solid #a2a9b1;
margin-left:10px;
margin-right:-10px;
}
.side {
width: 50%;
height: 1000px;
background-color:red;
float:right;
}
Any assistance would be greatly appreciated. Thank you.