[SOLVED] 3 columns?

PicoDeath · December 4th, 2007, 05:29 PM

http://www.leoncalder.com/clients/housing/
http://www.leoncalder.com/clients/housing/style.css

How come the 3 headings below the image aren't level? I'm pretty sure that's how it's supposed to be done(coding). Anyone spot the problem?

Stuart · December 4th, 2007, 05:48 PM

Try adding float:left; to #boxcontainer. I think the reason that this is happening is that the content above the left box is "shorter".

dab42pat · December 4th, 2007, 05:55 PM

try replacing your code with the code below .

HTML Code:

#left {
width: 352px;
height: 232px;
float: left;
padding: 19px;
}

Monie · December 5th, 2007, 12:57 AM

Do you mean the blue colored button? It's perfect the way I looked at it.

Marc · December 5th, 2007, 11:12 AM

Have you fixed this issue now? I don't see any problems in Firefox.

PicoDeath · December 6th, 2007, 06:11 AM

Yep, dabs fixed the issue.

However, look again and now I need 3 boxs below them.

Also there's a small error with the picture in IE6.

Any ideas? Mostly need the box one sorted asap.

Marc · December 6th, 2007, 06:19 AM

The page is completely mucked up in Firefox. See my attachment.

PicoDeath · December 6th, 2007, 07:08 AM

... I know, that's what my post is about. It completely messed up when i added the other 3 boxs.

I can do it using another 3 divs easyily, maybe that's the best position.

Marc · December 6th, 2007, 07:10 AM

Have you cleared your floats from above?

welshstew · December 6th, 2007, 07:20 AM

you need to change your box content div to the followg:

HTML Code:

<div id="boxcontainer">
    <div id="box1"/>
<div id="box2"/>
<div id="box3"/>
<div style="clear: both;"/>
    <div class="boxcontent">46546</div>
    <div class="boxcontent">46546</div>
    <div class="boxcontent">46546</div>
    </div>

and then remove the

Code:

clear:both

on the boxcontent css
that should clean it up for you

edit: screen shot attached

Stuart · December 6th, 2007, 08:50 AM

Woah! Stew, what's with your browser? Looks very... holiday-ish

PicoDeath · December 6th, 2007, 09:08 AM

Thanks a lot, I'll update it later.

welshstew · December 6th, 2007, 09:29 AM

Quote:

Originally Posted by PicoDeath

Thanks a lot, I'll update it later.

No probs

Quote:

Originally Posted by swagner

Woah! Stew, what's with your browser? Looks very... holiday-ish

Tis the season

mas:

PicoDeath · December 6th, 2007, 05:55 PM

How come there's a bigger gap between the first box than the 2nd/3rd box?

dab42pat · December 6th, 2007, 06:25 PM

If you remove

margin-right: 2px; from #boxcontent 1 and border-right:2px solid #ffffff; from #box 1 that should even things up.

then add margin-left:2px to #boxcontainer