SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Sep 2003
    Location
    UK
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Right positioning an element with text flowing left

    Hi -
    I'm trying to put a php include statement at the right hand side of a page, with the main text for the page flowing to the left hand side of it.

    You can see the general shape I'd like to achieve here:
    www.foundation-stage.info

    This is ok, but the right hand column (the php bit) is inside a different content chunk (don't know the correct terminology, sorry...). The content in the middle, therefore, does not wrap around the right hand box when the right hand box ends. I'd like to make the middle element stretch all the way to the right hand side, and put the php statement inside a CSS element which floats to the right.

    I'm working inside Dreamweaver, and when I try this it seems to work in the design view, with the box floating to the right. However, when I upload the page I get all the text beginning below the box, like this:
    www.foundation-stage.info/indextest.php

    Can anyone help me do this right, and/or explain what I've done wrong?

    I tried to put the php bit (which looks like this: <?php include('http://www.foundation-stage.info/pathto/xxi.php?a=lastposts'); ?>) inside an element like this:

    .featurebox3 {background: #ffffff;
    color: #000088;
    float:right;
    margin-left: 10px;

    and also just include it as a span class right positioned element inside the paragraph of text, but don't seem to be able to get it right. I'm probably doing something idiotic, but at the moment I can't see for looking!

    Thanks, Steve.

  2. #2
    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,

    To float an element right and have the text wrap underneath can be accomplished as follows.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    .content {
     width:80%;
     margin:auto;
     color:#000;
     background:#FFFCCC;
    }
    .floatright{
     float:right;
     width:200px;
     background:blue;
     color:#000;
    }
    p {margin-top:0px}
    </style>
    </head>
    <body>
    <div class="content">
     <div class="floatright">
     <p>This will be content on the right :
     This will be content on the right :
     This will be content on the right :
     This will be content on the right :
     This will be content on the right :</p>
     </div>
    <p>This content will stay to the left and then wrap around :
    This content will stay to the left and then wrap around :
    This content will stay to the left and then wrap around :
    This content will stay to the left and then wrap around :
    This content will stay to the left and then wrap around :
    This content will stay to the left and then wrap around :
    This content will stay to the left and then wrap around :
    This content will stay to the left and then wrap around :
    </p>
    <p>This content will stay to the left and then wrap around :
    This content will stay to the left and then wrap around :
    This content will stay to the left and then wrap around :
    This content will stay to the left and then wrap around :
    This content will stay to the left and then wrap around :
    This content will stay to the left and then wrap around :
    This content will stay to the left and then wrap around :
    This content will stay to the left and then wrap around :
    </p>
    </div>
    </body>
    </html>
    If you study the above and then you can incorporate it into your site properly.

    Floats should have a width defined in order to work properly (although sometimes they will work without it).

    You have wrapped your table in a <p> tag and in a span. A span is not a block level element so you should use a div. Also you cannot use a <p> tag to wrap up a table again you will need a div.

    You seems to have 2 stylesheets loaded with some duplicated styles. This will make it hard to work out what's going on. There should be no need to define 2 styles exactly the same (as far as I can see).

    You need to wrap the table in your featurebox3 style but you will need to sort out the span and the <p> as mentioned above and I think you need to clear some styles that are overwriting each other. Remember to giv the float a width.
    Code:
    .featurebox3 {
    	color: #000088; 
    	float:right;
    	width:200px;
    	margin-left: 10px;
    	margin-right:0px;
    	z-index: 500; }
    You may also need to run your page through the validator to clear up a number of other errors before everything will start to work.

    Sorry I can't be more specific but the floating right is quite simple. It's just your code that needs to be sorted. If you still can't get it sorted then shout and I'll spend some more time on it.

    Paul

  3. #3
    SitePoint Zealot
    Join Date
    Sep 2003
    Location
    UK
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's perfect - thanks very much Paul!

    I'm not anxious to merge the two stylesheets as one of them is generated by a program which helps build the javascript navigation. But following your description above has sorted it out anyway.

    Many thanks again,
    Steve.


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
  •