[SOLVED] 3 columns?

PicoDeath · #1 Dec 4th, 2007, 20:29

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 · #2 Dec 4th, 2007, 20:48

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 · #3 Dec 4th, 2007, 20:55

try replacing your code with the code below .

HTML: Select all

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

Monie · #4 Dec 5th, 2007, 03:57

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

Marc · #5 Dec 5th, 2007, 14:12

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

PicoDeath · #6 Dec 6th, 2007, 09:11

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 · #7 Dec 6th, 2007, 09:19

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

PicoDeath · #8 Dec 6th, 2007, 10:08

... 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 · #9 Dec 6th, 2007, 10:10

Have you cleared your floats from above?

welshstew · #10 Dec 6th, 2007, 10:20

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

HTML: Select all

<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: Select all

clear:both

on the boxcontent css
that should clean it up for you

edit: screen shot attached

Stuart · #11 Dec 6th, 2007, 11:50

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

PicoDeath · #12 Dec 6th, 2007, 12:08

Thanks a lot, I'll update it later.

welshstew · #13 Dec 6th, 2007, 12:29

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 · #14 Dec 6th, 2007, 20:55

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

dab42pat · #15 Dec 6th, 2007, 21:25

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

dab42pat · #16 Dec 6th, 2007, 22:22

It may also be an idead to alter your footer gif to fit a width of 753px and adjust the footer div width to the same. That should line up everything.

Monie · #17 Dec 7th, 2007, 02:36

Is it FF extension Welshstew? nice one..

Stuart · #18 Dec 7th, 2007, 02:44

Quote:

Originally Posted by monie

Is it FF extension Welshstew? nice one..

Found it! Tinseltown

Monie · #19 Dec 7th, 2007, 03:03

Installing....

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] 3 columns?