Jump to content

Clear float


crmamx

Recommended Posts

I am trying to go back and clean up my site.

 

This is a program to test css code.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>css testing</title>

  <style type="text/css">
/* ==================== Color Combos =======================================
    #012A80 - dark blue
    #81A9FE - medium blue
    #C0D4FE - light blue
*/

/* ==================== colored box for text ============================== */
.box1 {
float:left;
width: 250px;
margin: 5px;
background-color: #c0d4fe;
}
.floatstop {
clear:both;
}
/* ==================== no circles ============================== */
ul.a {
list-style-type: none;
}
  </style>
  
</head>

<h1>title</h1> 
<br /><br /><br /><br />


<!-- ================= addresses ========================================= -->
<div class="box1"> <!-- colored box -->
<ul class="a">
    <li><strong>FLYING FIELD ADDRESS</strong></li>
    <li>15498 Lillie Lane</li>
    <li>Summerdale, Al</li>
</ul>
</div>
<div class="box1">
<ul class="a">
    <li><strong>MAILING ADDRESS</strong></li>
    <li>P.O. Box 297</li>
    <li>Robertsdale, Al 36567</li>
</ul>
</div>  </p>
<!-- ================= 4 colored boxes ================================== -->

<p><small>Slow Stick says to set the CG 95-105 mm from the leading edge. What is that in inches? You are looking
at a 7.5 cc engine. How does that compare to a .46 cu in? </small></p>

<p><small>Wrinkles in your new plane? Here is an article I wrote on the Mike Johnson Way that will guarantee
no wrinkles.</small></p>

<p><small>Choosing a powerplant for a nitro plane isn't all that complicated. You need a .35, 46 or a .55 cu in.
For the electric model the terminology gets intimidating. Here are some Selection Guidelines to help you get
started.</small></p>

<p><small>Have you oiled up your engine and put it in storage for the winter?
If so then you are missing out on some great flying conditions. </small> </p>          
  
</body>
</html>

 

I know I need to clear the float after the addresses and  before the paragraphs but I don't know how to do it.

Link to comment
Share on other sites

What did you try? Also I have sent earlier by mail a complete example (custom draw-ed!)on how the float and clear works. maybe have a look at that again.

For the code above I can say, throw your editor away or pay attention to the errors it gives, because it's clearly happy with the fact that you are missing a <body> tag.

Also there are some </p> there that don't haven a starting tag <p>

 

Cleaning up code doesn't mean getting a digital chainsaw.

 

Just a few tips, float is meant for block elements, and clear is meant for block elements too.

 

 

Link to comment
Share on other sites

what i always did, when i first started with css, is make a sample page, and just try to play with a new property. If you mastered Floats and positioning, you mastered the hardest part of css. (aside of browser differences)

 

if you can make the question mark i attached with block elements (like <div> <p> or anything with a display:block) you passed the float test.

Happy to review your code if you did it.

 

[attachment deleted by admin]

Link to comment
Share on other sites

You should almost ALWAYS be able to clear a set of block elements using overflow: hidden to the parent element. (you could also use clearfix but it's discouraged unless you HAVE to).

 

If you don't have a parent element to clear the set of elements just use "clear: both" in the element that directly follows the floated elements.

 

Here's 2 examples

 

<ul>
  <li>float me</li>
  <li>float me 2 </li>
</ul>

 

In this example you could simply use.

ul {
  overflow: hidden;
}
ul li {
  float: left;
}

 

To clear the floats.

 

<ul>
  <li>Float me</li>
  <li>Float me too!</li>
  <li class="clear">Don't float me... clear  me!</li>
</ul>

 

Here you can't use the parent to clear the floats so you have to default to clearing it on the next element. In this case, li.clear is being cleared.

 

ul li {
  float: left;
}
ul li.clear {
  clear: both;
}

 

 

Clearfix is another great clearing tool but only under specific scenarios should anyone be REQUIRED to use it. When overflow: hidden; and clear: both; does the trick clearfix is unnecessary.

 

Hope this helps.  8)

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.