I am currently tackling a small portion of a complicated webpage where there are divs placed on the right side that I do not have direct control over. Therefore, when I attempt to use clear:both (as advised here) to push my div to the next line, it ends up skipping past the content on the right side - which is not the desired outcome.
Here is a fiddle that showcases a simplified version of my code - hopefully encompassing the necessary sections:
https://jsfiddle.net/yyt0tkLr/
I want the 'text underneath' to be displayed on the following line. Using clear:both could achieve this, but as mentioned earlier, it disrupts the overall layout of the page.
The entire widget needs to be enclosed within divs; otherwise, I could place the text outside the div wrapper and it would appear correctly. The existing divs provide specific padding that is essential - most components require padding, so removing divs is not an option. However, I could potentially add additional divs without affecting the other formatting (wrapping long text, stacking buttons, adjusting text width, etc.).
This solution should work seamlessly across all browsers and display properly even with javascript disabled.
Full Code Below:
CSS:
.images {
float:left;
border:1px solid black;
height: 100px;
padding:6px;
}
.underneath {
display: inline-block;
float: left;
width: 100%;
}
.rightcol {
float: right;
border:1px solid black;
height: 200px;
}
.row {
border:1px solid black;
padding:5px;
}
.text {
padding:10px;
}
.buttonstack {
border:1px solid black;
display: inline-block;
}
.button {
border:1px solid red;
}
.wrapper {
}
HTML
<div class='row'>
<div class='rightcol'>stuff on right</div>
<div>
<div class='images'>images</div>
<div> <span class='text'> long text long text long text long text long text long text long text long text long text long text
</span>
<div class='buttonstack'>
<div class='button'>button</div>
<div class='button'>button2</div>
</div>
</div>
</div>
<div class='underneath'>text underneath</div>
</div>
Note: I have updated the fiddle to showcase the right-side div, providing a more accurate representation of my page layout.