Seeking expert advice on the best way to style this HTML structure:
<body>
-Some content-
<div class="parent" style="height:50%;">
<div class="child" style="background-color:#FF9999;">An image</div>
<div class="child" style="background-color:#9999FF;">Some text</div>
</div>
</body>
My goal is to achieve the following behavior:
Here are the criteria I need to meet:
- The container div, .parent, should be a block element that spans the entire width of the browser window.
- I have the width of the first/left inner div in pixels, but not as a percentage.
- The width of the second/right inner div is unknown and should automatically fill the remaining space.
- If the first/left div is shorter than the second/right div, it should stretch to match the height.
- If the first/left div is not present, the border between it and the second/right div should not appear.
- I cannot use JavaScript tricks.
Here are the solutions I've attempted based on my experience and research:
Float: Using float:left does not allow me to stretch the first/left div to match the height of its sibling or the .parent div.
Inline-block: .parent {background-color:#999999;} .parent > .child {display:inline-block;vertical-align:top;height:100%;}
Using display:inline-block works well until the text in the second/right div wraps to the next line, causing it to grow wider and wrap under the first/right div.
Any insights or suggestions would be greatly appreciated!