Snippet of HTML code:
<div id="container">
<div id="first">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia velit ut magna ultricies.
</div>
<div id="second">
Blandit
</div>
<div id="third">
Etiam nec bibendum lorem. Cras sed arcu a risus pretium dignissim.
</div>
</div>
CSS Stylesheet section for the code provided:
body {
text-align: center;
}
#container {
display: inline-block;
background: lightcyan;
}
#first {
display: inline-block;
background: lightgreen;
}
#second {
background: orange;
}
#third {
width: 30%;
display: inline-block;
background: lightblue;
}
The goal is to make sure that div#container wraps around div#first properly. The given code initially works fine with expected results demonstrated in this demo.
However, when more content is added into div#third, the wrapping functionality seems to break. This issue can be observed in this broken demo.
- What causes this problem to occur?
- Is there a way to prevent this from happening?