CSS clear question

  • I consider myself pretty fluent with CSS but something I’m trying to do with clear is baffling me. I took the code below from a tutorial site. It’s 2 divs floated left. The first one has “clear:right”. My understanding of clear is (from W3Schools) “The clear property specifies which sides of an element where other floating elements are not allowed.” Should “clear:right” push div2 down below div1?

    <style type="text/css">
div.clear {
  border:1px solid #ff9900;
  width:120px;
  float:left;
  clear:right;
  }
div.float {
  border:1px solid #cccccc;
  width:120px;
  float: left;
  }
</style>
<div class="clear">Div1 with float:left and clear:right</div>
<div class="float"><p>Div2 with float:left </div>
Viewing 1 replies (of 1 total)

  • Should “clear:right” push div2 down below div1?

    No. But there are other factors that could come into play. For example the unclosed <p> tag in your second div. The total width you have in which these two blocks can float. what you have in the rest of the page & the stylesheet.

    It’s really not possible to troubleshoot CSS issues without seeing the issue in the context of the whole page.

Viewing 1 replies (of 1 total)
  • The topic ‘CSS clear question’ is closed to new replies.

Tags