Best IT Recipes

Why is the top edge of the html element ignored after the element is placed?

I have a page with two divs. The first is swimming. The second has a “clear: both” CSS declaration, and a large upper bound. However, when I view a page in Firefox or IE8, I do not see the top margin. It seems that the second div is touching the first div, not being split. Is there a way to make the top edge work correctly?

I read the CSS specification and noticed that it says: "Since the float is not in the stream, the blocks that are not in the block, created before and after the floating point stream, are vertical, as if the float did not exist." However, I do not know what to do with it.

Here is an example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>CSS test</title> </head> <body> <div style="float: left; border: solid red 1px">foo</div> <div style="clear: both; margin-top: 90px; border: solid red 1px">This div should not touch the other div.</div> </body> </html>
+44
html css
Dec 10 '09 at 19:34
source share
8 answers

You have identified the problem correctly. The floating <div> no longer used to calculate the top margin, and for this, 2 <div> just a butt to each other. An easy way to solve this problem is to simply wrap the 2nd <div> . This will allow the wrapper (invisibly) to stand against the first <div> and let you specify a space for this.

The trick for the wrapper to work properly is to make the white space an internal white space. In other words, the shell uses padding instead of field. This means that everything that happens outside the shell (like other floating elements) does not really matter.

 <div style="float: left; border: solid red 1px">foo</div> <div class="wrapper" style="clear: both; padding-top: 90px;"> <div style="border: solid red 1px">This div should not touch the other div.</div> </div>
+29
Dec 10 '09 at 19:39
source share

you can just add div between them

 <div style="float: left; border: solid red 1px">foo</div> <div style="clear:both;"></div> <div style="margin-top: 90px; border: solid red 1px">This div should not touch the other div.</div>

and that should take care of that.

Many WordPress themes (and more) use this technique.

+19
Dec 10 '09 at 19:45
source share

In the second div:

 float: none; display: inline-block;

Browser Compatibility Chart: http://caniuse.com/#feat=inline-block

+6
Apr 6 '13 at
source share

Public key; without containers and additional <div>

Another answer was almost right, but skipped width: 100% . Here is the revised version.

 h1 { clear: both; display: inline-block; width: 100%; }

Clearing without this width: 100% requires that the floating element be in a well-marked container or need an additional semantic empty <div> . Conversely, a strict separation of content and premiums requires a strict CSS solution to this problem, i.e. without any additional non-semantic HTML.

The fact that it is necessary to mark the end of the float does not allow automatic layout .

If the latter is your goal, the float should be left open for anything (paragraphs, ordered and unordered lists, etc.) to wrap around it until it becomes clear. In the above example, the cleanup is set with a new header.

This solution is widely used on my website to solve the problem when the text next to the floating thumbnail is short and the top edge of the next cleaning object is not respected. It also prevents any manual intervention in the automatic creation of PDF files from the site.

+5
Apr 08 '15 at 11:24
source share

set "float: left" to the second div

+3
Dec 10 '09 at 19:40
source share

The problem is that the second div can only calculate margins from a non-floating element. You need to add any non-floating element before trying to establish a margin. Non-breaking space or a line extending beyond a floating div, and before the second div will work.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>CSS test</title> </head> <body> &nbsp; <div style="float: left; border: solid red 1px; height:40px;">foo</div> <div style="clear: both; margin-top: 90px; border: solid red 1px">This div should not touch the other div.</div> </body> </html>
+3
Dec 10 '09 at 19:48
source share

Another way is to add an empty paragraph with a clear paragraph after the last floating div.

 <p style="clear:both"></p>
0
Jul 09 2018-11-11T00:
source share

Add this below the floating div and above the one you want to click on the page:

 <div class="clearfix"></div>

Then in your css file add:

 .clearfix {clear: both;}

This actually creates an invisible element that can be affected by the margin of your second div - this is what I saw on several Wordpress sites. It also gives you the opportunity to provide you somewhere (i.e., inside the clearfix div) to put any separating elements, such as borders, etc.

0
Aug 11 '14 at 2:34
source share


More articles:


All Articles