CSS Boxes

Brooke posted this at 20:02 — 21st March 2007.

Joined: Feb 1999

Hello everyone. I am in desperate need of help on 2 issues:

1. See the white and purple boxes? They are supposed to go:
white purple
purple white

I have tried and tried but I cannot get them lined up. I think there is something in the html that is wrong - but it could be the css.

http://www.cataluna.com/clients/EF/
css - http://www.cataluna.com/clients/EF/Templates/css-andy.css

2. See the pi symbol at the bottom right? I want that all the way at the bottom and always just inside the big gray box (wrapper) And at the same time have the copyright all the way at the bottom.

Any help anyone can give would be soooooooo great!

Thanks guys!

demonhale posted this at 02:56 — 22nd March 2007.

He has: 3,278 posts

Joined: May 2005

Here is what I did with your box codes on the css... Even if you want it reversed, you should follow the order they appear in the html and color them correspondingly. and always make sure your floats are patterned in the same order...

#box1 {
	width: 40%;
	border:solid 1px #C4B2D6;
    float:left;
	margin-top: 10px;

}
#box2 {
	width: 40%;
	background:#C4B2D6;
    float:right;
    
	margin-top: 10px;

}
#box3 {
	width: 40%;
		border:solid 1px #C4B2D6;

	float:right;
	margin-top: 10px;


}
#box4 {
	width: 40%;
	background:#C4B2D6;
    float:left;
	margin-top: 10px;

}

I don't understand your second problem... Good luck on the site...

Brooke posted this at 13:18 — 23rd March 2007.

She has: 681 posts

Joined: Feb 1999

Thank you demonhale! I have had sooooo much trouble with this. I understand it now.

Let's see - I know my 2nd problem eludes you - it's probably me explanation:

I have a pi symbol in the lower right (TT).
I have a copyright at the bottom
The copyright is not all the way at the bottom - how do I get it there?
Annnnd - the pi symbol is not all the way to the right - how do I get it there?

If you are anyone else can help that would be great!

demonhale posted this at 03:50 — 25th March 2007.

He has: 3,278 posts

Joined: May 2005

Change Copyright on CSS to this...

#copyright {
	margin: 0 0 0 160px;
	font: bold;
	font-size: 0.9em;
	height: 15px;
	width: 700px;
	text-align: center;
	background: #000 url(../images/piA004.jpg) no-repeat right bottom;
	clear: both;
	padding-top:65px;
	}

'
.
Explanation, since you didn't use nested divs, the texts will depend on the assignments of distance from the parent div, the only solution would be to pad the texts accordingly and match the total height by adding proper height and paddings....