SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    Greenville, SC
    Posts
    388
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    postitioning an pushing the container div with the text

    I've been toying around with different css layouts and I've run into a stage issue: look here:

    http://www.z1p.net/tutoriallist.html

    basically I want to have a image in front of text without text flowing around the image. also I want the container div to push down along with the text as more is added in. The first box seems to work in ie, but firefox and mozilla hates it. Is there anyway to achieve this?? It seems like it would be basic enough.

  2. #2
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    Not sure if this is what you want:

    css:
    Code:
    .clear{
      clear:both;
    /*** these next attributes are designed to keep the div
    height to 1 pixel high, critical for Safari and Netscape 7 ***/
      height:1px;
      overflow:hidden;
      line-height:1%;
      font-size:0px;
    }
    /* \*/* html .clear{height:auto} /*** a fix for IE Win ***/
    .col1, .col2 { 
       position:relative; 
       width:210px; 
       border: 0px; 
       margin: 2px; 
       background: #C0C0C0; 
       position:relative; 
       float:left; 
    } 
    .twocolcontainer { 
       width: 440px; 
       position: relative; 
    }
    html:

    Code:
    <div class="twocolcontainer"> 
      <div class="col1"> 
        BOX 1 
      </div> 
      <div class="col2"> 
        BOX 2 
      </div> 
      <div class="clear"></div> 
    </div>



    Trevor
    "Good artists copy, great artists steal."
    - Pablo Picasso
    The image of ClevaTreva is drawn by Rhys, and is a GOOD likeness

  3. #3
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    Greenville, SC
    Posts
    388
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes somewhat.. I modified you code how I want it:

    http://www.z1p.net/tutoriallist.html (the 4th box)

    It works exactly how I want it to in ie, but somethings going bad in mozilla/firefox...

  4. #4
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, you killed the div ending for col2!

    Also, IE Win has a right margin bug on left floated divs, so always put the margin on the left margin of the next div to the right and subtract the error from the left hand one:

    Code:
    <html><head><title>box issues with nested divs</title>
    <style>
    .clear{
      clear:both;
    /*** these next attributes are designed to keep the div
    height to 1 pixel high, critical for Safari and Netscape 7 ***/
      height:1px;
      overflow:hidden;
      line-height:1%;
      font-size:0px;
    }
    /* \*/* html .clear{height:auto} /*** a fix for IE Win ***/
    .col1, .col2 { 
    position:relative; 
    border: 0px; 
    background: #C0C0C0; 
    position:relative; 
    float:left; 
    }
    .twocolcontainer { 
    width: 250px; 
    position: relative;
    }
    .twocolcontainerborder {
    border:1px solid blue;
    }
    .col1 {
    text-align: left;
    margin:0;
    width: 50px;
    height: 50px;
    }
    /* \*/* html .col1 {margin-right:-3px}/* */
    .col2 {
    margin-left:5px;
    text-align:left;
    width:193px 
    }
    </style>
    </head>
    <body>
    <div class="twocolcontainer"> 
      <div class="twocolcontainerborder">
        <div class="col1"> 
          img
        </div> 
        <div class="col2"> 
          texttext, text, text, more text and more.... more text, 
          more text more text more text more text more text more 
          text to test the float wrap...
        </div>
        <div class="clear"></div>
      </div>
    </div>
    </body>
    </html>
    Also, putting a width and border together is a bad idea. Instead, put another div inside the one with the width with the border set to avoid problems with ie broken box model. There are other ways to defeat this problem, but this is easy and avoids hacks.





    Trevor
    "Good artists copy, great artists steal."
    - Pablo Picasso
    The image of ClevaTreva is drawn by Rhys, and is a GOOD likeness

  5. #5
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    Greenville, SC
    Posts
    388
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    works like a charm. thanks!


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
  •