• 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


bamme

Senior Member
#1
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
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?
 

bamme

Senior Member
#3
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.
 

Attachments

Sunburn

Active Member
#4
Hi Emma,

try adding the following to the css.

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

let me know how you get on.
 

bamme

Senior Member
#6
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
 

Sunburn

Active Member
#7
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.
 

bamme

Senior Member
#9
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 :)
 

Harry

Senior Member
#10
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!)
 

bamme

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