Having trouble with my CSS layout
I've created a form within a fixed 500 pixel width div that is centered on the page using margin auto;
To create a table-like structure within the div, I used div elements as rows. Due to varying heights of these rows, I applied overflow:hidden property to minimize the size of the form.
Within this div, there are 3 other divs acting as table data "td", floating inside the row.
The goal is to display another div on top of all when an error occurs in the form, similar to Stackoverflow's reminder for code formatting. However, I'm facing difficulty in overflowing this div to the sides.
What alternative do I have to set the height of the "row" div without relying on overflow:hidden? I want to avoid tables and since the content changes frequently.
Open to any solutions or suggestions!
Here's a basic code snippet to give you an idea:
<div class="row">
<div class="overflowing"></div>
<div class="float_left"></div><div class="float_left"></div><div class="float_right"></div>
</div>
The overflowing div should not disrupt the position of floating divs and remains hidden until its properties are modified and filled with content.