After spending the entire day researching vertical text, I am still struggling to find a simple solution. I need three items in my header to line up horizontally: an image on the left, a specific-sized box in the center, and another image on the right. Here is the code I have tried:
#maincontainer{
width: 1020px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}
#header{
height: 150px; /*Height of top section*/
float: left;
}
#box{
width: 20px;
height: 150px;
border: 1px solid red;
}
.verticaltext{
font-size: 0.600em;
text-align: center;
border: 1px solid red;
transform: rotate(-90deg) translate(-100%, 0);
transform-origin: 0 0;
}<body>
<div id="maincontainer">
<div id="header">
<div>
<img src="image/left_pic.jpg" alt="left_pic" height=150 width=250>
<div id="box">
<p class="verticaltext">vertical text</p>
</div>
<img src="image/right_picture.jpg" alt="right_pic" height=150 width=748>
</div>
</div>
</div>
</body>Despite following this structure, my items are not aligning properly within the header container. They are all over the place, with the second picture being adjusted to account for the border. It's frustrating how such a seemingly simple task can be so challenging to execute. Can anyone help me figure this out?