SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot Fiska's Avatar
    Join Date
    Jul 2004
    Location
    Dardania - Ancient Illyria
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    floating problem

    Hi,
    I've divided my site into three columns, but the last column is not going up, but instead is being positioned in the bottom of the page, I don't know why??
    I've tried float: right; but still doesn't work.

    Here is the code: (check the snap shot as well)
    HTML
    ======
    .
    .
    .

    <div id="right"> <!-- right box -->
    <div id="right_col">Latest News</div>
    <div id="right_box">
    <p>12.08.2004</p>
    <h1>Source: Bush to name Goss as CIA chief</h1>
    </div>
    </div> <!-- end of right box -->
    </div>
    ====================================================
    CSS
    ====
    #right {
    margin-left: 0px;
    float: right;
    }
    #right_col {
    padding-left: 13px;
    padding-top: 1px;
    width : 212px;
    height: 18px;
    background-color: #FF0000;
    color : #ffffff;
    font-weight : bold;
    font-size: 10px;
    margin-right: 5px;
    margin-bottom: 5px;
    }
    #right_box {
    width: 215px;
    background-color: #D4D1D1;
    float: right;
    padding: 5px;
    }
    /* this is for the div => main container you can't see that cuz I didn't copy all the code for the sake of volume */

    #main {
    width: 660px;
    background-color: #fff;
    }
    =========================================
    End of CSS and HTML

    I'd really appreciete your help
    fiska
    Attached Images Attached Images

  2. #2
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    #right_col need float: right; too.
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Remember also that floats must come before the static content that is to wrap around it.

    Therefore if your right_col was meant to be static then it needs to follow after the floats in the html.

    Also I notice your #right has no width and floats really should have width defined.

    Paul

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    port perry, ontario
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i'm having the same problem Fiska and havent' been able to resolve it either. it works just fine in IE but not in Firefox. the file is up at www.cmswebsolutions.com/client/uw/temp.php. i think it has something to do with the 18px right padding in the content. when i remove that the right col lines up correctly but it still sits at the bottom in Firefox and it also throws off the formatting in IE.

    any ideas?

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

    Your content is too wide for the container.

    The widths of your elements and padding add up to 806px but your container is only 780px wide.

    The problem stems from the fact that you have used id="content" twice in your page (even though id's should be unique).

    You have used it to wrap the whole page here.
    Code:
    <div id="container"> 
    <div id="thought">"Thought of the day"</div>
    <div id="content"> 
    	<!-- Begin LEFT -->
    	<div id="left">
    Delete that id from above as it is unecessary and also get rid to the clear:left from #right.
    Code:
    #right {
    width: 144px;
    w\idth : 144px;
    margin: 0;
    padding: 0;
    text-align: left;
    float: right;
     
    }
    This will allow the page to diplay in moz and ie now

    Paul

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    port perry, ontario
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    beautiful! thanks so much Paul. you've saved me a few grey hairs. :-)

  7. #7
    SitePoint Addict
    Join Date
    Feb 2003
    Location
    Shropshire
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am also having this problem and have tried the offered solutions but still not working.

    Originally I re-desinged the site from table layout to CSS and had problems as it was a fixed width 2-column layout which someone helped me with - this can be seen at www.echocd.co.uk/clients/granary/services.htm and the css at www.echocd.co.uk/clients/granary/site.css.

    However the client now wants image montages down the left hand side on some of the pages and I though the best way was to change these pages into a 3-column fixed layout so I used some code from somewhere but as soon as I change the widths to fit the content the right column goes to the bottom of the page. I have checked the wdiths etc and they seem OK but it doesn't work in any browser I have checked in. A page with this style is at www.echocd.co.uk/clients/granary/welcome.htm and the css is at www.echocd.co.uk/clients/granary/style2.css.

    Any help is greatly appreciated as I need to get this site finished today and I have already spent the morning trying to sort this problem.

    Cheers

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

    You have put a margin-right of 232px on your box body which is already too wide for the 760px container (560 + 232) and then you are trying to float the right side in there as well. No wonder it doesn't fit as it adds up to 992px and your container is 760px;

    Take out the margin:
    Code:
    .boxbody {
    width: 560px;
    float: left;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #666666;
    background-color: #FFFFFF;
    /* margin-right: 232px;*/
    }
    Hope that helps

    Paul

  9. #9
    SitePoint Addict
    Join Date
    Feb 2003
    Location
    Shropshire
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, I thought I had checked everything but after trying so many different options this morning I couldn't remember what I had put where - it is working now thanks.

  10. #10
    SitePoint Zealot Fiska's Avatar
    Join Date
    Jul 2004
    Location
    Dardania - Ancient Illyria
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Now my site is up and running just fine in IE, but not in Mozilla, where it looks devastating!!!
    I don't really know why is looking so bad in Mozilla, every thing is messed up! Meanwhile is doing just fine in IE.


    thanx

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by fiska
    in Mozilla, every thing is messed up
    Do you have a link and we will fix it for you


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
  •