Clear "inner float".

Discussion in 'CSS' started by Zourz, Mar 25, 2007.

0
  1. #1
    Hi all

    I have a problem clearing the float property of an inner <div>.
    I have this:

    <div style="width:50px; height:500px; background-color:#FF0000; float:left;"></div>
<div style="width:300px; height:50px; background-color:#0000FF;"></div>
<div style="border: 1px solid #000000; width:50px; height:50px; float:left;"></div>
<div style="border: 1px solid #000000; width:50px; height:50px; float:left;"></div>
<div style="border: 1px solid #000000; width:50px; height:50px; float:left;"></div>
<div style="border: 1px solid #000000; width:50px; height:50px; float:left;"></div>
<input type="button" value="Test">
    HTML:
    How do I place the button below the black boxes?
    Having "<div style='clear:left'></div>" above the button clears the red-div too. :/

    Kind Regards
     
    Zourz, Mar 25, 2007 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    The real question should be, what are you trying to do? The markup you showed us is meaningless. There is no content. What width is the containing element? Due to IE's faulty hasLayout implementation, IE will look different from modern browsers.

    Here's what i think you're trying to do: 
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
  <head>
    <meta name="pretty-printer"
          content=
          "HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org" />
    <title></title>
    <meta http-equiv="content-type"
          content="text/html; charset=utf-8" />
    <meta name="editor"
          content="Emacs 21" />
    <meta name="author"
          content="Gary Turner" />
<style type="text/css">
  /*<![CDATA[*/
html, body {
    margin: 0;
    padding: 0;
    }

body {
    font: 100% verdana, helvetica, sans-serif;
    line-height: 1.25;
    color: black;
    background-color: white;
    }

p {
    font-size: .8em;
    line-height: 1.5;
    margin: 1.5em 0 0;
    }
   
p + p {
    margin-top: 0;
    text-indent: 1.25em;
    }   
   
h1, h2, h3 {
    font-family: georgia, serif;
    }

input {}

#wrapper {
  width: 360px;
  overflow: hidden;
  }

#redbox {
  border: 1px solid red;
  float: left;
  width: 50px;
  height: 500px;
  background-color: pink;
  }

/*hack for IE6's 3px text jog bug*/
* html #redbox {
  margin-right: -3px;
  }

#bluebox {
  border: 1px solid blue;
  padding-top: 1px; /*uncollapses margin*/
  width: 300px;
  height: 50px;
  background-color: lightblue;
  }

#main {
  overflow: hidden;
  display: inline-block; /*part 1 of IE hasLayout hack*/
  }

#main {
  display: block: /*part 2 of hasLayout tripswitch*/
  }

.blackbox {
  width: 50px;
  height: 50px;
  float: left;
  border: 1px solid black;
  background-color: silver;
  }

/*]]>*/
</style>
  </head>
  <body>
    <div id="wrapper">
      <div id="redbox">
	<p>redbox content</p>
      </div> <!-- end redbox -->
      <div id="main">
      <div id="bluebox">
	<p>some content</p>
      </div> <!-- end bluebox -->
      <div class="blackbox">
	<p>content</p>
      </div> <!-- end blackbox -->
      <div class="blackbox">
	<p>content</p>
      </div> <!-- end blackbox -->
      <div class="blackbox">
	<p>content</p>
      </div> <!-- end blackbox -->
      <div class="blackbox">
	<p>content</p>
      </div> <!-- end blackbox -->
      </div> <!-- end main -->
      <input type="button" value="test" />
    </div> <!-- end wrapper -->
  </body>
</html>
    Code (markup):
    cheers,

    gary
     
    kk5st, Mar 25, 2007 IP
  3. Zourz

    Zourz Member

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #3
    Hi kk5st

    I tried to do as you did.
    I skipped the content. Instead of posing a lot more, I posted only the "layout".

    Thanks!
     
    Zourz, Mar 27, 2007 IP