Topic: Suggestions to clean up this CSS

I am reworking a site over the past couple weeks, and wanted to get some input on cleaning up the code. It's really a mess right now but for some reason my paragraphs on the 1st column aren't reflecting margins or padding correctly. Plus I know I've butchered it waaay to much.

http://beta.upsidedown21.org/index.php

Then I did a 2 column version for posts.

http://beta.upsidedown21.org/index2.php

Thanks...

For index.php, you have side margins on #columnA>div.box. The margin-left on that element is increasing the margin on the side, so if you want that margin to match up with that of #columnC, then remove margin-left from #columnA>div.box. The margin-right on #columnA>div.box, however, is what's keeping #columnB in the right spot, so THAT margin-right should actually be added to #columnA and removed from #columnA>div.box, in my opinion.

I base this advice on the fact that you opted NOT to put side margins on #columnC>div.box.

EDIT: Some additional suggestions after going through your CSS in Firebug:

• You could try using a grouped selector on all the columns in order to avoid repeating some of your style rules. Example: #threecolumn #columnA,#threecolumn #columnB,#threecolumn #columnC{float:left;color:#333;padding:0px;display:inline;}
• Assuming that you don't need to support pre-IE7 browsers, you can use child selectors in place of some descendant selectors. E.x. "#navigation>ul" rather than "#navigation ul". Child selectors are more efficient than descendant selectors, as browsers don't need to check as many elements to apply them.

----------------------


(Edited by DavidJCobb on 07-31-2009 18:17)

(Edited by DavidJCobb on 07-31-2009 18:18)

Ok this is another problem I'm having and it's not working right. I'm going crazy trying to figure this one out...

I need to have an image either float to the left, right, or center. Here is the CSS to make it float left.

.leftimg {
float: left;
margin-right: 15px;
border:none;
margin-left: 30px;
}

.caption {
color: #4E99CA;
font-size: 11px;
text-align: center;
line-height: 15px;
}

Then the html would look like this:

<div class="leftimg"><img src="image.jpg" width="250" /><div class="caption">This is a caption</div></div>

But for some reason the text isn't wrapping correctly. It makes the picture box extend way past the width of the image creating ugly white space.

Google is not helping in any way with this either.... grrr....

You need to set a width for your caption field as it will not inherit the 250px value specified in the image.

Actually, the floated div itself needs to have a width specified. Any time you float an element you need to specify a width for it.

quote:

---

Taeo920 said

Any time you float an element you need to specify a width for it.

---

no you don't

As for the caption stuff, see if this stuff helps. This guy has it going on ;-)

Later,

C:\