Archived topic
bottom margin changes div overflow-x auto
3 replies · Started by cigilovic on November 28, 2020
Hello there,
Just a quick question.
I use a lot of tables on my pages to provide a comparative overview. And since sometimes there is a lot to show, I use div overflow-x auto and add my table code inside so when the screen is not wide enough there's this horizontal bar appears at the bottom of the table.
What I have noticed is that, when I have too many columns which cause this horizontal bar to appear on my laptop screen, the following text after div gets very close to the bottom of the bar.
Whatever I did, it wasn't working such as adding <br> or <p>, it just looks the same. I pasted my link in the private information section.
So that page has 3 tables and if you look at where the table ends with this bar, the following text is almost next to it.
I also checked it with my other similar content pages and I can say it's about this bar being there because of too many columns.
But if it has just right amount (the 2nd link I pasted), there's no problem. Unless you zoomed out then the bar appears and bottom following text comes very close that bar.
I have been searching for a solution but can not find it.
Is there any CSS code that I can apply?
Many thanks,
Kind regards
Osman
Hi there,
use this CSS:
.overflow-table {
overflow-x: auto;
}
.overflow-table+* {
margin-top: 1em;
}Then edit your HTML for your overflow DIV and remove the inline style and give it a class of overflow-table ie.
<div class="overflow-table">
...
</div>This will add a 1em top margin to the element that comes after that DIV.
Hi David,
Excellent!! Thanks a million!!!
You're welcome
