SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    86
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question Need help getting this text to wrap around a box

    Hi, I'm trying to get the text to wrap around TEXT BOX and no matter how I play around with it (float, absolute, negative margins etc.) I can't get it to work. Help anyone? Thanks!

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>TEXT WRAP</title>
    </head>
    <body>
     
    <DIV STYLE="background-color: ALICEBLUE; color: BLACK; text-align: JUSTIFY; font-family: Helvetica, Arial, sans-serif;">
     
    <table style="float: right; margin-top: 300px; margin-left: 30px; margin-bottom: 30px; background-color: TAN; width: 400px; text-align: left;"
    border="10" cellpadding="30" cellspacing="0">
    <tbody>
    <tr>
    <td>
     
    <!-- \\\\\\\\\\\\\\\\\\\\\\\\\ TEXT BOX \\\\\\\\\\\\\\\\\\\\\\\\\ -->
    <table align="center" style="background-color: BEIGE; color: BLACK;
    margin-left: -10px; margin-top: -10px; margin-right: -10px; margin-bottom: -10px;
    font-family: Times New Roman, Times, serif; width: 370px; height: 168px; text-align: left;"
    border="0" cellpadding="10" cellspacing="0">
    <tbody>
    <tr>
    <td>
     
    <span style="font-size: 26px;">
    TEXT<br>
    TEXT<br>
    TEXT<br>
    TEXT<br><br>
    </span>
     
    <span style="font-size: 17px;">
    TEXT<br>
    TEXT<br>
    TEXT<br>
    TEXT<br><br>
    </span>
     
    <span style="font-size: 14px;">
    TEXT<br>
    TEXT<br>
    TEXT<br>
    TEXT<br><br>
    </span>
     
    <span style="font-size: 10px;">
    TEXT<br>
    TEXT<br>
    TEXT<br>
    TEXT<br><br>
    </span>
     
    </td>
    </tr>
    </tbody>
    </table>
     
    </td>
    </tr>
    </tbody>
    </table>
     
     
    <!-- \\\\\\\\\\\\\\\\\\\\\\\\\ WRAPPING CONTENT \\\\\\\\\\\\\\\\\\\\\\\\\ -->
    QUISQUE SED FELIS. ALIQUAM SIT AMET FELIS.
    <br>
    <br>
    Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula.
    <br>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. <br><br>
     
    Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. <br><br>
     
    Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit.
    <br>
    <br>
     
    <div style="text-align: center;">
    <i>
    <span style="font-size: 22px; color: CRIMSON; font-weight: bold; font-family: Times New Roman, Times, serif;">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br>
    Quisque sed felis. Aliquam sit amet felis.<br>
    Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum<br>
    Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula.<br>
    </span>
    </i>
    </div>
     
    <br>
    <br>
    <i>
    <font style="font-size: 26px; color: BLACK; font-weight: bold; font-family: Times New Roman, Times, serif;">
    Semper Felis
    <br>
    </font>
    </i>
     
    </div>
     
    </body>
    </html>

  2. #2
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Close your div around the box -> open a new one and put the textbox div inside of that div -> adjust your styles and put them in an external css... you have way too many lol..
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>TEXT WRAP</title>
    </head>
    <body>
     
    
    <DIV STYLE="background-color: ALICEBLUE; color: BLACK; text-align: JUSTIFY; font-family: Helvetica, Arial, sans-serif;"> 
    <!-- \\\\\\\\\\\\\\\\\\\\\\\\\ WRAPPING CONTENT \\\\\\\\\\\\\\\\\\\\\\\\\ -->
    QUISQUE SED FELIS. ALIQUAM SIT AMET FELIS.
    <br>
    <br>
    Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula.
    <br>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. <br><br>
     <DIV STYLE="background-color: ALICEBLUE; color: BLACK; text-align: JUSTIFY; font-family: Helvetica, Arial, sans-serif;">
     
    <table style="float: right; margin-left: 30px; margin-bottom: 30px; background-color: TAN; width: 400px; text-align: left;"
    border="10" cellpadding="30" cellspacing="0">
    <tbody>
    <tr>
    <td>
     
    <!-- \\\\\\\\\\\\\\\\\\\\\\\\\ TEXT BOX \\\\\\\\\\\\\\\\\\\\\\\\\ -->
    <table align="center" style="background-color: BEIGE; color: BLACK;
    margin-left: -10px; margin-top: -10px; margin-right: -10px; margin-bottom: -10px;
    font-family: Times New Roman, Times, serif; width: 370px; height: 168px; text-align: left;"
    border="0" cellpadding="10" cellspacing="0">
    <tbody>
    <tr>
    <td>
     
    <span style="font-size: 26px;">
    TEXT<br>
    TEXT<br>
    TEXT<br>
    TEXT<br><br>
    </span>
     
    <span style="font-size: 17px;">
    TEXT<br>
    TEXT<br>
    TEXT<br>
    TEXT<br><br>
    </span>
     
    <span style="font-size: 14px;">
    TEXT<br>
    TEXT<br>
    TEXT<br>
    TEXT<br><br>
    </span>
     
    <span style="font-size: 10px;">
    TEXT<br>
    TEXT<br>
    TEXT<br>
    TEXT<br><br>
    </span>
     
    </td>
    </tr>
    </tbody>
    </table>
     
    </td>
    </tr>
    </tbody>
    </table>
     
    </div>
    Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. <br><br>
     
    Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit.
    <br>
    <br>
     
    <em><center>
    <font style="font-size: 22px; color: CRIMSON; font-weight: bold; font-family: Times New Roman, Times, serif;">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br>
    Quisque sed felis. Aliquam sit amet felis.<br>
    Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum<br>
    Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula.<br>
    </font>
    </center></em>
     
     
    <br>
    <br>
    <em>
    <font style="font-size: 26px; color: BLACK; font-weight: bold; font-family: Times New Roman, Times, serif;">
    Semper Felis
    <br>
    </font>
    </em>
     
    </td>
    </tr>
    </tbody>
    </table>
     
    </div>
     
    </body>
    </html>

  3. #3
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Your code is invalid, which is your first problem. Your second problem is the use of nested one-cell tables, center and font tags, etc. This is what your HTML must look like:

    Code html4strict:
    <!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>TEXT WRAP</title>
     
      <style type="text/css">
       #textbox {
        float: right;
       }
      </style>
     </head>
     <body>
      <div>
       <div class="textbox">
        <ul>
         <li>TEXT<br>
         <li>TEXT<br>
         <li>TEXT<br>
         <li>TEXT</li>
        </ul>
     
        <ul>
         <li>TEXT</li>
         <li>TEXT</li>
         <li>TEXT</li>
         <li>TEXT</li>
        </ul>
     
        <ul>
         <li>TEXT</li>
         <li>TEXT</li>
         <li>TEXT</li>
         <li>TEXT</li>
        </ul>
     
        <ul>
         <li>TEXT</li>
         <li>TEXT</li>
         <li>TEXT</li>
         <li>TEXT</li>
        </ul>
     
        <ul>
         <li>TEXT</li>
         <li>TEXT</li>
         <li>TEXT</li>
         <li>TEXT</li>
        </ul>
       </div>
     
       <h1>QUISQUE SED FELIS. ALIQUAM SIT AMET FELIS.</h1>
       <p>Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula.</p>
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros.</p>
       <p>Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis.</p>
       <p>Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit.</p> 
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula.</p>
       <p>Semper Felis</p>
      </div>
     </body>
    </html>
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  4. #4
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    86
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    C. Ankerstjerne, I don't know whose webpage you're designing but it wasn't mine lol.

    EDIT:

    Okay, anarch's code works to the extent that the location of TEXT BOX is relative to the WRAPPING CONTENT. He can be forgiven that I didn't explain that TEXT BOX needs to be absolutely positioned 300px from the top . . . and content flowing around it without adjusting its top: 300px; position.

    WRAPPING CONTENT is fluid, you see, and for that reason I can't have TEXT BOX moving up and down relative to it. I don't even know if this can be done.

  5. #5
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could you please explain why the box must be 300px down? That may (or may not, for that matter) have a bearing on the approach taken.

    //edit: Why the totally fluid width? Wide columns of text are difficult to read, and especially so for people with reading disabilities. --gt

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    That code is a bit of a blast from the past

    You can't use absolute positioning because that removes it from the flow and the flow doesn't care about absolute elements. You could do something similar with a floated sandbag technique as follows.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
        margin:0;
        padding:0
    }
    p{margin:0 0 1em}
    body {
        padding:10px;
    }
    body {
     background: =#fff;
        color:#000;
        text-align: center;
        font-family: Helvetica, Arial, sans-serif;
    }
    #outer {
        background:#f0f8ff;
        color:#000;
        text-align:justify;
        overflow:hidden;
    }
    .textboxwrap {
        margin:0 0 30px 30px;
        background:#d2b48c;
        width: 400px;
        text-align:left;
        padding:20px;
        border:10px outset #ccc;
        float:right;
        clear:right;
    }
    .textbox {
        background:#f5f5dc;
        color:#000;
        height: 400px;
        text-align: left;
        font-family: Times New Roman, Times, serif;
        overflow:auto;
        padding:10px;
    }
    .sandbag {
        width:1px;
        float:right;
        overflow:hidden;
        height:300px;
    }
    #footer {
        font-size: 22px;
        color:#f00;
        font-weight:bold;
        font-family:Times New Roman, Times, serif;
        text-align:center;
    }
    </style>
    </head>
    <body>
    <div id="outer">
        <div class="sandbag"></div>
        <div class="textboxwrap">
            <div class="textbox">
                <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros.</p>
            </div>
        </div>
        <div class="main">
            <p>Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
            <p>Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
            <p>Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
            <p>Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
            <p>Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
            <div id="footer">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br>
                    Quisque sed felis. Aliquam sit amet felis.<br>
                    Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum<br>
                    Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula.<br>
                </p>
            </div>
        </div>
    </div>
    </body>
    </html>
    However by placing your textbox at 300px from the top you are assuming that all users have tall monitors so you may force a scroll when none may be required (unless all your pages are long).

    Unfortunately its not possible to have the text box automatically always at the bottom of the content which is what I expect you were aiming for. Wouldn't it have been better to have it float at the top as per normal?

  7. #7
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    86
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Paul U Da Man! lol Oh man. Wow. And I just tested it by adding some stuff and the box stayed put.

    Now, in answer to your blast from the past . . . it is indeed. This is a Google Site (no not mine, I'm doing it for someone else) and so now you know why my original code has a conspicuous absence of anything in the header heh he.

    I'm going to try to walk this back to HTML 1 with as much of your CSS inline as I can get away with, but I can't thank you enough for just giving me the raw materials to work with. Jesus, I even experimented with a 1 X 300 transparent gif spacer. Talk about dark ages lol.

    It will either take as inline tables or it won't. There's only so much I can do without CSS!!

  8. #8
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    86
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    ahhh . . . and it works in Explorer. Sweet Paul. You rule man. wish me luck.

  9. #9
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Just about the time I thought of a spacer float, you posted your sandbag example. Great Minds™ and all that.

    I'd still recommend putting bounds on the width, e.g.
    Code:
    <!DOCTYPE html>
    
    <html>
      <head>
    
        <meta http-equiv="content-type"
    	  content="text/html; charset=utf-8" />
    
        <title>test doc</title>
    
        <style type="text/css">
    html, body {
        margin: 0;
        padding: 0;
        }
    
    body {
        background-color: #eed;
        color: black;
        font: 100%/1.25 serif;
        }
    
    p {
        font-size: 1em;
        }
    
    #wrapper {
        margin: 0 auto;
        max-width: 1200px;
        min-width: 720px;
        padding: 1px 1.25em;
        }
    
    #sandbag {
        float: right;
        margin: 0;
        width: 1px;
        height: 300px;
        overflow: hidden;
        visibility: hidden;
        }
    
    #sidebox {
        border: 5px outset gray;
        clear: right;
        float: right;
        margin-left: 1.25em;
        width: 350px;
        padding: 1.25em;
        }
    
        </style>
      </head>
    
      <body>
        <div id="wrapper">
          <p id="sandbag">.</p>
          <div id="sidebox">
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
    	  tincidunt turpis sed nunc rutrum pellentesque. Proin
    	  vestibulum justo ut nisl facilisis fermentum. Nam mollis
    	  venenatis.
    	</p>
          </div>
    
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In justo
    	sapien, sagittis quis aliquet ac; suscipit ac sem. Vestibulum ante
    	ipsum primis in faucibus orci luctus et ultrices posuere cubilia
    	Curae; In euismod massa vitae elit faucibus pretium. Donec venenatis
    	auctor urna; sed sollicitudin risus dapibus et. Nam mollis lectus ut
    	nibh placerat vehicula. Aenean turpis sapien; malesuada id mattis
    	vitae, accumsan non mi. Proin in magna metus, a imperdiet
    	lacus. Pellentesque porta ullamcorper vulputate! Cras metus orci,
    	dignissim ut mattis ut; malesuada nec ante. Nam egestas, elit et
    	rutrum tincidunt; nisi dui interdum orci, sit amet pellentesque nisl
    	risus ac mauris. Sed quam ante, interdum ut tincidunt id; venenatis at
    	leo. Ut mi turpis, sollicitudin in euismod in, suscipit eu mauris. Nam
    	in nisi ut purus semper vehicula! Cras ac turpis ut turpis lacinia
    	posuere. Aliquam rutrum dolor vel ipsum accumsan cursus. Donec id nibh
    	vitae mauris mollis bibendum sit amet in nulla. Duis suscipit leo at
    	dui ullamcorper tincidunt.
          </p>
    
          <p>Cras viverra tellus ante. Praesent molestie sem risus, egestas
    	condimentum dolor. Maecenas sed elementum tortor? Cras in dolor id
    	odio congue tincidunt? Mauris porta luctus quam, et convallis nulla
    	cursus vitae. Maecenas sollicitudin suscipit lorem volutpat porttitor?
    	Nulla consectetur massa pulvinar nulla consectetur eget varius lacus
    	faucibus? Pellentesque eget elit mattis diam elementum mattis a et
    	ante. Pellentesque nec diam quis magna vehicula molestie? Nunc commodo
    	tempus velit nec mollis? Fusce quis lobortis dolor. Duis sem nulla,
    	porta a scelerisque consequat; feugiat nec massa. Nullam semper porta
    	porttitor.
          </p>
    
          <p>
    	Sed sed velit sit amet mi sollicitudin sagittis eget accumsan metus?
    	Praesent suscipit sollicitudin vestibulum. Morbi pulvinar gravida
    	sagittis. Curabitur eu erat dolor. Nullam mattis, tellus eu posuere
    	varius, tortor diam consectetur tortor, vitae interdum erat sem a
    	enim. Pellentesque non mattis lectus. Nullam at diam orci. Nam eget
    	augue eu erat aliquet scelerisque. Sed volutpat adipiscing arcu in
    	ullamcorper. Praesent eget mauris nec magna convallis facilisis! Morbi
    	laoreet consectetur pharetra. Maecenas nulla diam, posuere vitae
    	adipiscing eget, blandit sed est.
          </p>
        </div> <!-- end wrapper -->
      </body>
    </html>
    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by gary.turner View Post
    Hi Paul,

    Just about the time I thought of a spacer float, you posted your sandbag example. Great Minds™ and all that.
    Nice to see you around Gary and of course you are right about the width

  11. #11
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    86
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi again Paul, one quick question: What sexy thing are we doing with
    Code:
    border: 10px outset #ccc;
    ? I like it, I just want to know what it is lol.

    Then, the last remaining issue I'm having with my Headerless Wonder is an obvious overflow issue with the TEXTBOX (will become apparent when viewed in any browser).

    I'm not inclined to advise him to allow unlimited height of the TEXTBOX as its content increases — as Gary Turner points out, it's problematic in a world of landscape-oriented widescreen monitors to let the thing drop endlessly beneath the viewport — nonetheless, I'd like to give him both options for this box (including the obligatory padding so it's not hitting the frame) to use as he sees fit:
    1. One, a scrollbar-visible fixed-height box
    2. One, a scrollbar-hidden box — with undefined/auto-height — that vertically expands/collapses like a table cell relative to the content of the cell


    Thanks again Paul. Man what a pita this has been

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>TEXT WRAPPING TABLES</title>
    </head>
    <body>
     
    <div style="overflow: hidden; background: ALICEBLUE; color: BLACK; text-align: justify; font-family: Helvetica, Arial, sans-serif;">
     
    <div style="overflow: hidden; width: 1px; height: 300px; float: right;">
    </div>
     
    <div style="clear: right; float: right; width: 400px; border: 10px outset #ccc; margin: 20px 0px 30px 30px; background: TAN; text-align: left; padding: 20px;">
    <div style="overflow: auto; background: BEIGE; height: 400px; padding: 10px; color: BLACK; text-align: left; font-family: Times New Roman, Times, serif;">
     
    <span style="font-size: 26px;">
    TEXT<br>
    TEXT<br>
    TEXT<br>
    TEXT<br><br>
    </span>
     
    <span style="font-size: 17px;">
    TEXT<br>
    TEXT<br>
    TEXT<br>
    TEXT<br><br>
    </span>
     
    <span style="font-size: 14px;">
    TEXT<br>
    TEXT<br>
    TEXT<br>
    TEXT<br><br>
    </span>
     
    <span style="font-size: 10px;">
    TEXT<br>
    TEXT<br>
    TEXT<br>
    TEXT<br><br>
    </span>
     
    </div>
    </div>
     
    Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit<br><br>
     
    Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit<br><br>
     
    Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit<br><br>
     
    Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit
     
    <div style="text-align: center; margin-top: 30px; margin-bottom: 30px;">
    <span style="font-size: 22px; font-style: italic; font-weight: bold; color: CRIMSON; font-family: Times New Roman, Times, serif;">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br>
    Quisque sed felis. Aliquam sit amet felis.<br>
    Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum<br>
    Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula.
    </span>
    </div>
     
    <span style="font-size: 26px; font-style: italic; font-weight: bold; color: BLACK; font-family: Times New Roman, Times, serif;">
    Semper Felis
    </span>
     
    </div>
     
    </body>
    </html>

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by semicolon View Post
    Hi again Paul, one quick question: What sexy thing are we doing with
    Code:
    border: 10px outset #ccc;
    ? I like it, I just want to know what it is lol.
    That was just to match your old style table borders and outset is just one of the values you can use for a border. You can read up on all the others here.

    I'd like to give him both options for this box (including the obligatory padding so it's not hitting the frame) to use as he sees fit:
    To make some extra room you could just put a border around the box in the same colour as the background.

    e.g.

    Code:
        <div style="overflow: auto;border:10px solid beige;border-right:none; background: BEIGE; height: 400px; padding: 10px; color: BLACK; text-align: left; font-family: Times New Roman, Times, serif;"> <span style="font-size: 26px;"> TEXT<br>
    One, a scrollbar-visible fixed-height box
    That's what you have now.

    One, a scrollbar-hidden box — with undefined/auto-height — that vertically expands/collapses like a table cell relative to the content of the cell
    Just remove the "overflow:auto" and the "height" and the box will expand with content. You could set a min-height to have an initial height (but won't work in IE6)

  13. #13
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    86
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Awesome Paul. Just awesome. Thanks for that excellent Borders link. I don't suppose you have some good Sitepoint guides for gradient fading? I've been meaning to master that for the longest time, so shoot me some links if you have tutorials that are favorites of yours. Thanks again Paul.

    s

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    If you are talking about css3 gradients then just play about with one of the many generators out there.


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
  •