[Resolved] bottom margin changes div overflow-x auto

[cigilovic]

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

[David]

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.

[cigilovic]

Hi David,

Excellent!! Thanks a million!!!

[David]

You’re welcome

[Author]

Posts