This is to document some CSS tricks and quirks that can be used to optimize a site’s look. This post aims at documenting all the little tricks that I found out through the Internet or by myself for easy reference.
Avoid overflow effect
The best way to fix this seems to be to force the scrollbar to be on in Firefox (and other browsers). You simply add the following to your CSS:
html { /* needed for it not to jump pixels */ height: 100%; margin-bottom: 1px; } body { /* needed for it not to jump pixels */ height: 100%; margin-bottom: 1px; }
Avoiding overflow in the body to move the content to the left when a scrollbar is shown is done by giving the body a slightly smaller width. This is not a beautiful solution but should work in most scenarios. E.g.
body { width: 95%; }
Internet Explorer clear fix
It took me a while to figure out how to fix this in IE. The problem is that IE does not render a div on the next line if you do a clear: right on the last div in a line.
To fix this issue, you need to create another element after the last element in a row:
.col1 {
float: left;
}
.col2 {
float: left;
}
br {
clear: both;
display: inline;
}
<div class="col1">some content</div> <div class="col2">other content</div> <div class="col1">some more content</div> <div class="col2">more other content</div> <div class="col1">even more content</div> <div class="col2">even more other content</div> <div class="col1">some content</div> <div class="col2">other content</div> <div class="col1>some more content</div> <div class=">more other content</div> <div class="col1">even more content</div> <div class="col2">even more other content</div>
