Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Floating elements coming out of content box question

Discussion in 'Website Design Forum:' started by bamme, Dec 1, 2010.

  1. bamme

    bamme Senior Member

    hi everyone

    im having a bit of trouble with this page:

    StephenBailey.co.uk | Designer and Maker of Bespoke Wooden Furniture in Alton

    The li's are styled weirdly here because it needs to accommodate a certain CMS - the image in there is actually very large, and the way the css is written, means it will give the illusion of a cropped image.

    html for one portfolio item:

    HTML:
    <ul id="port-items">
    <li><span><img src="../img/gal/other-4.jpg" width="100" /></span></li>
    <li class="port-item-text"><a href="chairs.php">Chairs</a></li>
    ...
    </ul>
    
    css:

    Code:
    body#portfoliopage ul#port-items {margin-top:20px;width:400px;}body#portfoliopage ul#port-items li {line-height:77px;display:inline;text-indent:0px;float:left;width: 77px;    height: 77px;    border: 1px solid #fff;    margin: 0;    padding: 2px;    list-style:none;    margin-right:20px;    margin-bottom:20px;    background:none;}body#portfoliopage ul#port-items li span    {    display:block;    width: 73px;    height: 73px;    overflow: hidden;    border: 2px solid #fff;    background: #fff;    }body#portfoliopage ul#port-items li.port-item-text {border:0px; width:70px;}

    The site owner will in time add more portfolio sections (list items), so, the list items will get longer and longer down the page.

    My problem is that the outer content box does not accommodate this - it stays the same height. This is because the list items are floated left.

    I've done a demo of the incorrect looking page with more <li>'s:

    StephenBailey.co.uk | Designer and Maker of Bespoke Wooden Furniture in Alton

    Without the floating, I can't see how I can keep all those little style rules in there for the CMS.

    Can anyone suggest anything? :/

    Thanks!

    Emma
     
  2. Aarlev

    Aarlev Member

    Just had a quick glance. Doesn't look like you've cleared your floats? I just tried to add clear:both; in Firebug to #footer and that seemed to solve the issue.

    So maybe if you try to just put in a BR or a DIV with a class of clear on it after your floats. And a .clear {clear:both;} in your CSS if you haven't got that already?
     
  3. bamme

    bamme Senior Member

    Thanks Aarlev, I did try that, but I've attached the screenshot that this produces - the content then just doesn't span all the way to the bottom. I suppose I should have maybe thought of a way to make that content box go to the bottom without a fixed height, I just thought adding that to #footer must've therefore been wrong.

    But I guess if you're suggesting this it's probably not wrong and I should look at the #content div- these are guesses but i've tried height:100% and just not giving #content a height at all, does anyone know a way around this? I remember getting this on a diff design ages ago..

    Thanks again sorry if im being slow.
     

    Attached Files:

  4. Sunburn

    Sunburn Active Member

    Hi Emma,

    try adding the following to the css.

    #content {overflow:hidden;height:auto;}

    let me know how you get on.
     
  5. Harry

    Harry Senior Member

  6. bamme

    bamme Senior Member

    Thanks Harry, the image sizing within the code, to make thumbnails is because of the cms, which i am unfortunately too stupid to understand or change, someone else made this. So I will stick to the code I've got to avoid breaking anything, however the #content {overflow:hidden;height:auto;} did work, thankyou :)

    The only thing about it is, even though it's fine on that one page, it cuts off the bottom of some sections/images, if you see here:

    StephenBailey.co.uk | Designer and Maker of Bespoke Wooden Furniture in Alton

    Those images were added thru the CMS, don't know if that contributes to anything, however it's solved by changing the #content height in Firebug, suggesting it is what i think - the content box is cutting it off
     
  7. Sunburn

    Sunburn Active Member

    Emma, the code that makes up the 2nd link you posted really needs to be re-built its a complete mess .. sorry.
    I doubt your going to get a simple css fix for that page. It needs to be recoded imho.
     
  8. Harry

    Harry Senior Member

    Yup yup, ideally a recode is needed, unfortunately.
    You're free to have what I provided.
     
  9. bamme

    bamme Senior Member

    thanks guys for looking at it :) thing is this is all linked up with a cms so although it looks like plain html it's not, there's quite a bit of php in there making up the galleries. im not clever enough to know what's needed to recode that page anyway, even if i did recode it, to be honest.

    how long do you think it might take to just recode these portfolio section pages so that no images get chopped off the bottom? if its not a huge job and someone wanted some money for it then let me know what it'll cost, i can't pay for it if its a huge job so no worries if so, ill try to figure something :)
     
  10. Harry

    Harry Senior Member

    You need a new team of developers. That page's code is pretty backward. Spaghetti code, really, and the only viable fix is a rebuild.

    Haven't you had these issues before, though? Devs you work with producing ****e code that you're then left to fix? I think they're the problem, really. Tackle the root-cause, not its symptoms (i.e. get someone who can do it properly!)
     
  11. bamme

    bamme Senior Member

    Thanks Harry :) I dont really have that option ha but thankyou for your help and for making that revised page for me. Really helpful
     

Share This Page