Consider the following code:
#wrapper {
width: 500px;
border: 1px solid black;
}
#first {
width: 300px;
border: 1px solid red;
}
#second {
border: 1px solid green;
}
<div id="wrapper">
<div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
<div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>
I would like the two divs to be next to each other inside the wrapper div. In this case, the height of the green div should determine the height of the wrapper.
How could I achieve this via CSS ?
Best Answer
Float one or both inner divs.
Floating one div:
or if you float both, you'll need to encourage the wrapper
div
to contain both the floated children, or it will think it's empty and not put the border around themFloating both divs: