Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS problem, img float inside a box

    Hello!

    I have a problem with a box made in CSS.
    I want to float the text to the left of an image, but when doing so,
    the bottom right corner "jumps" in to the middle...

    Please help!! Have been struggling for 3 days now...

    Here is the CSS

    body {
    margin: 0px;
    background-image:url(images/bg-caribbean.png);
    background-position: 50% 0%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    text-align: center;
    margin-left: auto;
    margin-right:auto;
    }

    h1, h2, h3 {
    margin-top: 0;
    }

    h2 {
    font-size: 2em;
    }

    h3 {
    margin: 0;
    }

    p, ul, ol, blockquote {
    margin-top: 0;
    }

    a:link {
    text-decoration: none;
    color: #A33000;
    }

    a:hover {
    text-decoration: underline;
    }



    /* Header */

    #header {
    width: 900px;
    height: 30px;
    margin: 0 auto;
    }

    #header * {
    margin: 0;
    padding: 0;
    float: left;
    text-decoration: none;
    font-family: Myriad,Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: none;
    color: #FFFFFF;
    }

    #header h1 {
    padding: 128px 0 0 18px;
    font-weight: bold;
    }

    #header h2 {
    padding: 12px 0 0 0;
    }

    /* Content */

    #content {
    width: 900px;
    margin: 0 auto;
    border-top: none;
    }

    #colOne {
    float: left;
    width: 223px;
    padding-left:0px;
    margin-top:10px;
    margin-left:5px;
    }


    #colTwo {
    float: left;
    width: 440px;
    padding: 0px 0px;
    margin-top:10px;
    }

    #colThree {
    float: left;
    width: 222px;
    padding-right: 0px;
    margin-top:10px;
    margin-right:5px;
    }


    /* Footer */

    #footer {
    padding: 10px;
    text-align: center;
    font-size: smaller;
    }

    #footer * {
    color: #D6947A;
    }




    /*- Menu Tabs F--------------------------- */

    #tabs {
    float:left;
    width:900px;
    margin-top:74px;
    font-size:12px;
    font-weight:bold;
    line-height:normal;
    border-bottom:none;

    }
    #tabs ul {
    margin:0;
    padding:0px 10px 0 0px;
    list-style:none;
    }
    #tabs li {
    display:inline;
    margin:0;
    padding:0;
    }
    #tabs a {
    float:left;
    background:url("images/tableftF.gif") no-repeat left top;
    margin:0;
    padding:0 0 0 4px;
    text-decoration:none;
    color:#FFF;
    }
    #tabs a span {
    float:left;
    display:block;
    background:url("images/tabrightF.gif") no-repeat right top;
    padding:10px 15px 4px 6px;
    }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabs a span {float:none;}
    /* End IE5-Mac hack */
    #tabs a:hover span {
    color:#FFF;
    }
    #tabs a:hover {
    background-position:0% -42px;
    }
    #tabs a:hover span {
    background-position:100% -42px;
    }



    <!--Button textboxes -->

    #btn-text-container{
    position:absolute;
    left:99px;
    top:138px;
    width:171px;
    height:23px;
    z-index:1;
    font-family: arial;
    font-size: 11px;
    line-height: 10px;
    color: #999999;
    }
    #btn-text-container2 {
    position:absolute;
    left:99px;
    top:195px;
    width:171px;
    height:23px;
    z-index:2;
    font-family: arial;
    font-size: 11px;
    line-height: 10px;
    color: #999999;
    }
    #btn-text-container3 {
    position:absolute;
    left:98px;
    top:251px;
    width:171px;
    height:23px;
    z-index:3;
    font-family: arial;
    font-size: 11px;
    line-height: 10px;
    color: #999999;
    }
    #btn-text-container4 {
    position:absolute;
    left:98px;
    top:307px;
    width:171px;
    height:23px;
    z-index:4;
    font-family: arial;
    font-size: 11px;
    line-height: 10px;
    color: #999999;
    }
    #btn-text-container5 {
    position:absolute;
    left:98px;
    top:366px;
    width:171px;
    height:25px;
    z-index:5;
    font-family: arial;
    font-size: 11px;
    line-height: 10px;
    color: #999999;
    }


    /*- CSS BOXES --------------------------- */

    .cssbox_box {
    background: #ffffff url(images/roundedcornr_521786_grad.gif) repeat-x bottom left;
    margin-top:4px;

    }
    .cssbox_top div {
    background: url(images/top-left.gif) no-repeat top left;
    }
    .cssbox_top {
    background: transparent url(images/top-right.gif) no-repeat top right;
    }


    .cssbox_bottom div {
    background: url(images/roundedcornr_521786_bl.gif) no-repeat bottom left;
    }
    .cssbox_bottom {
    background: transparent url(images/roundedcornr_521786_br.gif) no-repeat bottom right;
    }

    .cssbox_top div, .cssbox_top,
    .cssbox_bottom div, .cssbox_bottom {
    width: 100%;
    height: 22px;
    font-size: 1px;
    }
    .cssbox_content {
    margin: 8px 6px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color:#666666;
    text-align:left;
    }


    /*- CSS BOX 2 --------------------------- */

    .cssbox2_box {
    background: #ffffff url(images/roundedcornr_521786_grad.gif) repeat-x bottom left;
    margin-left: 6px;
    margin-right:6px;
    }

    h2 span {
    font-size: 16px;
    float:left;
    color:#FFFFFF;
    position: relative;
    top: 2px;
    left: 5px;
    padding-right: 0px;
    text-align: left;
    }


    h3 span {
    font-size: 14px;
    font:normal;
    color:#FFFFFF;
    position: relative;
    top: 4.5px;
    padding-left: 10px;
    text-align: left;
    }


    .cssbox2_top div {
    background: url(images/top-left.gif) no-repeat top left;
    text-align: left;
    }
    .cssbox2_top {
    background: transparent url(images/top-right.gif) no-repeat top right;
    }


    .cssbox2_bottom div {
    background: url(images/roundedcornr_521786_bl.gif) no-repeat bottom left;
    }
    .cssbox2_bottom {
    background: transparent url(images/roundedcornr_521786_br.gif) no-repeat bottom right;

    }

    .cssbox2_top div, .cssbox2_top,
    .cssbox2_bottom div, .cssbox2_bottom {
    width: 100%;
    height: 22px;
    font-size: 1px;
    }
    .cssbox2_content {
    margin: 8px 6px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color:#2c2d2d;
    text-align:left;
    }




    /*- CSS BOX - right --------------------------- */

    .cssbox-right_box {
    background: #ffffff url(images/roundedcornr_521786_grad.gif) repeat-x bottom left;
    }
    .cssbox-right_top div {
    background: url(images/top-left.gif) no-repeat top left;
    }
    .cssbox-right_top {
    background: transparent url(images/top-right.gif) no-repeat top right;
    }


    .cssbox-right_bottom div {
    background: url(images/roundedcornr_521786_bl.gif) no-repeat bottom left;
    }
    .cssbox-right_bottom {
    background: transparent url(images/roundedcornr_521786_br.gif) no-repeat bottom right;
    }

    .cssbox-right_top div, .cssbox-right_top,
    .cssbox-right_bottom div, .cssbox-right_bottom {
    width: 100%;
    height: 22px;
    font-size: 1px;
    }
    .cssbox-right_content {
    margin: 8px 6px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color:#666666;
    text-align:left;
    }

    img.float {
    float: left;
    margin: 2px 14px 6px 0px;


    }



    The HTML

    <!--CSS BOX starts here-->
    <div class="cssbox2_box">
    <div class="cssbox2_top"><div>
    <h2><span>Curacao</span></h2><h3><span>- featured destination of the month</span></h3>
    </div></div>
    <div class="cssbox2_content">
    <img src="images/curacao-bild.gif" width="137" height="90" class="float">Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. </div>
    <div class="cssbox2_bottom"><div></div></div>
    </div>

    <!--CSS Box Ends here -->

  • #2
    New Coder
    Join Date
    Jun 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi
    I am no expert but my guess is you should not have a class called float. Interested to see what the experts say.
    Mark Wiseman
    allthewikis.com
    Enjoy your life and each moment in it,
    Know the purpose of every minute.

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Can you post a link to your page? I'm guessing the image is taller than the content so the containing element doesn't know about the image because its floated. To get it to do so you need to clear the image. http://positioniseverything.net/easyclearing.html
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    put the text in a div should solve this problem. and make sure both that and the image are not cleared. The image could be

    Code:
    img.float_right
    {
      float:right;
      clear:none;  
     margin:5px;
    }
    
    div.float_left
    {
      float:left;
      clear:none;
     vertical-align:top; /* may not need this */  
     margin:5px;
    }
    Then put both inside the same parent

    Code:
    <div>
      <img class="float_right" src="path/to/file" />
      <div class="float_left">
          <!-- Text to go in here -->
      </div>
    </div>
    You can not say you know how to do something, until you can teach it to someone else.


  •  

    Posting Permissions

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