I am currently working on a layout that involves a main div container, div#title-box, being vertically and horizontally centered on the page. Inside this main container, I need three additional div containers: div#logo, div#title, and div#subtitle (see code for their specific positioning).
My challenge lies in ensuring that while div#logo has a fixed width, the other two divs can expand dynamically. How can I make div#title-box wrap around all three divs while keeping everything centered? Additionally, div#title-box should not have a fixed width.
If you have any suggestions or solutions, they would be greatly appreciated!
Here is a complete example of the code if you'd like to experiment with it:
<!DOCTYPE html>
<html>
<head>
<style>
div#title-box {
max-width: 500px;
display: block;
height: 600px;
margin: 0 auto;
position: relative;
}
div#logo {
padding: 0;
margin: 0;
position: absolute;
top: 100px;
left: 5px;
width: 100px;
height: 100px;
overflow: auto;
background: #ff0000 no-repeat;
background-size: 100% 100%;
border-radius: 15px;
float: left;
}
div#title {
padding: 0;
margin: 0;
position: absolute;
left: 110px;
top: 100px;
bottom: 20px;
right: 10px;
overflow: auto;
float: left;
}
div#subtitle {
padding: 0;
margin: 0;
position: absolute;
top: 140px;
bottom: 20px;
right: 10px;
left: 110px;
overflow: auto;
float: left;
}
</style>
</head>
<body>
<div id="title-box">
<div id="logo">
</div>
<div id="title">
<h1>Hello</h1>
</div>
<div id="subtitle">
<h3>A A A A A A A A A A A A A A A!</h3>
</div>
</div>