SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member Arcadia62's Avatar
    Join Date
    May 2003
    Location
    Crossville, TN
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rules of thumb when using FLOAT?

    Hi,

    I'm working on constructing a page that will have a large box containing text. I would like to add another box that floats to the left with the text in the first box flowing around it.

    I've been trying to make sense of some of the problems others have posted here that seem similar, but I'm really lost. Are there some rules of thumb about how to create a structure like this or could someone point me to a tutorial (so I can research this completely?)

    Please pardon my frustration -- I'm very, VERY confused ...

    Thanks for your attention to this post!

  2. #2
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I understand you right, something like this ought to do the trick:
    Code:
    <html><head><title>insert witty title here</title>
    <style type="text/css">
    .floater { 
      border: 1px solid black;
      float: left;
      margin: 10px;  padding: 10px;
      width: 80px;  height: 50px;
    }
    .container { width: 250px; }
    </style></head>
    <body>
    <div class="container">
    <div class="floater">I'm a floating div</div>
    text to wrap.  text to wrap.  text to wrap.  text to wrap.  
    text to wrap.  text to wrap.  text to wrap.  text to wrap.  
    text to wrap.  text to wrap.  text to wrap.  text to wrap.  
    text to wrap.  text to wrap.  text to wrap.  text to wrap.  
    text to wrap.  text to wrap.  text to wrap.  text to wrap.  
    text to wrap.  text to wrap.  text to wrap.  text to wrap.  
    </div>
    </body>
    </html>
    Go read this: http://www.brainjar.com/css/positioning/default.asp
    Floats are on page 2-3, but be patient, as the stuff before it is essential background.

    Alternatively, the CSS2 spec is actually fairly lucid about this stuff: http://www.w3.org/TR/REC-CSS2/visuren.html#floats
    If you do read that, though, I'll advise you to scroll down a little and look at the diagrams, THEN start reading.

  3. #3
    SitePoint Member Arcadia62's Avatar
    Join Date
    May 2003
    Location
    Crossville, TN
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by blufive
    If I understand you right, something like this ought to do the trick:
    <snip>
    Go read this: http://www.brainjar.com/css/positioning/default.asp
    Floats are on page 2-3, but be patient, as the stuff before it is essential background.

    Alternatively, the CSS2 spec is actually fairly lucid about this stuff: http://www.w3.org/TR/REC-CSS2/visuren.html#floats
    If you do read that, though, I'll advise you to scroll down a little and look at the diagrams, THEN start reading.
    Thank you so much! This is exactly what I'm looking for!

    I will check out the site links you posted after a good night's sleep <grin>. They seem to treat FLOAT pretty thoroughly ...

    Again, I appreciate your help in providing me a solution ...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •