SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wrapping text around a float

    Hi there,

    I would appreciate any help people good give me on this.

    I would like to wrap text around the div id="boy_pic" . I have already placed this inside my 'main' div and given it a float=left but at the moment it just forces the boy_pic div down when text is added to 'main' div. I would ideally like the boy_pic div to remain in a fixed position on the page and for the text in the 'main' div to wrap around the boy_pic div.

    My code is below:

    *{margin:0;padding:0;}

    body {margin-top:5px;}

    div{font-family: Arial, Helvetica, sans-serif;font-size: 12px;}

    .container{
    margin:0 auto;
    width:750px;
    background:#ccffff url(images/bg.png);}

    .featured_title{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #ffffff;}

    .featured_content{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #ffffff;}

    head+body .container{overflow:hidden;}

    #header{height:170px;background:#ccffcc url(images/header.png);}

    #links,#main{float:right;width:150px;height:257px;margin-top:15px;}

    #links{background:#ffffcc url(images/links.png) no-repeat;}

    #header p,#links-text,#main p,#body-text p{padding:15px 15px 0 15px;}

    #body-text{float:right;width:150px;height:257px;margin-top:15px;}

    #body-text_title{width:100px;margin-top:15px;margin-left:46px;margin-top:9px;}

    #body-text_flag{width:100px;height:80px;margin-left:35px;background:url(images/eng_flag.png);}

    #body-text_content{width:115px;margin-left:35px;margin-top:28px;}


    .links_text{
    width:100px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #ffffff;
    margin-bottom:-4px;


    margin-left:10px;margin-top:15px;}

    #links_text_home{}
    #links_text_products{}
    #links_text_contactus{}
    #links_text_links{}
    #links_text_gb{}

    #body-text{background:#ffff99 url(images/highlight.png) no-repeat;
    height:257px;}

    #main{background:ffffff;width:450px;float:right;}

    #featured{
    clear:both;
    height:205px;
    background:#ccff99 url(images/featured.png) no-repeat;
    position:relative;

    }
    #featured p{padding:10px;}

    .ex{padding-bottom:32767px;margin-bottom:-32767px;}


    .links {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #ffffff;
    font-weight: bold;
    }

    #boy_pic{
    width:158px;
    height:241px;
    float:left;
    }



    </style>
    <script type="text/javascript">
    function is(){
    agent = navigator.userAgent.toLowerCase();
    this.o8 = (agent.indexOf("opera 8") != -1);
    }
    var is = new is();
    if (is.o8) //alert("Opera8") +
    document.write('<style type="text/css">head+body .ex:after{content: ".";display:block;background:inherit;height:0;margin-bottom:-32767px;padding-top:32767px;}.ex{padding:0 0 0 0;margin:0 0 0 0;}</style>');
    </script>
    </head>
    <body>
    <div class="container">
    <div id="header"><p>v25 eXtended</p></div>

    <div id="body-text" class="container">
    <div id="body-text_title" class="featured_title">Find your flag!</div>
    <div id="body-text_flag"></div>
    <div id="body-text_content" class="featured_content">We stock all 32 flags from the countries taking part! All our flags feature glow sticks as poles which light up for up to 24hrs!</div>
    </div>

    <div id="main" class="ex">

    This was amaxing work great and exillerating. Lorem ipsum dolor sit amet I my family is the bext and lives in Southapmton
    <div id="boy_pic"><img src="images/boy.png" alt="news" width="158" height="241" /></div>
    </div>

    <div id="links" class="container">
    <div id="links_text_home" class="links_text">Home</div>
    <div id="links_text_products" class="links_text">Products</div>
    <div id="links_text_contactus" class="links_text">Contact Us</div>
    <div id="links_text_links" class="links_text">Links</div>
    <div id="links_text_gb" class="links_text">Global Distributors</div>



    </div>

    <div id="featured">
    <p>Wow, this works excelentally</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </div>
    </div>

    Thanks for any help or advice that you may be able to give me.

    Kind Regards

    James

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    the floating container must be first in the html, before the text


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
  •