Menu
I'm creating a tabled like view of data in divs. I am having to use a lot of inline HTML and CSS due to the enterprise framework I am using.
The way to visualise it: each row has a container div (rowContainer), and each in a row is contained in a div (collResult). I want the border-bottom element to appear at the bottom of the container div. In IE this is working fine, but in Firefox, the borders don't wrap around the rows, instead they appear all out of sync with the row results.
Here is an example of my code:
<div class='rowContainer' style='border-bottom: 1px solid #B4B4B4; padding:0; width: 100%; height: auto;'>
<div class='collResult' style='width: 25%; float: left; display: inline; margin: 0; font: normal 12px Arial;'>Number 1</div>
<div class='collResult' style='width: 25%; float: left; display: inline; margin: 0; font: normal 12px Arial;'>ABCDE</div>
<div class='collResult' style='width: 25%; float: left; display: inline; margin: 0; font: normal 12px Arial;'>NAME</div>
<div class='collResult' style='width: 25%; float: left; display: inline; margin: 0; font: normal 12px Arial;'>NONE
</div></div>
Thanks for any help
226
You can do it with line-height: css rule. set line-height: 18px; and that will do this trick.
Set the position of div at the bottom of its container can be done using bottom, and position property. Set position value to absolute and bottom value to zero to placed a div at the bottom of container.
This is because you are floating the inner divs, float the outer div also to fix this problem.
When you float elements, the parent element does not expand to the height of its children unless it is floating its self, or there is another non floating child. Another solution if you cannot float the parent is to add an element after the current children that does not float and clears the other elements. e.g. add this after the inner divs
<div style="clear:both"></div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
