PDA

View Full Version : Having some "padding" problems



Tal
Nov 24th, 2006, 06:59 PM
Alright, my site is made up of one maincontainer (which I call the content), in which it is just a rectangle that is very long and holds a top part (banner/header) and two columns (left and right) which float next to each other. Alright, now, in the left column, there are three divs of the same width (not the same height) and who all use the same middle (.left_column_middle); in the right column, there is a yellow div above a larger blue div (seperated, of course) and then an image next to the smaller div (i believe you don't have to worry about that because it is in an absolute position/position:absolute). Now, the width of the right column=435 px, and the left column=210 or 213px; the maincontainer in all is 748px. Okay, that "low down" on my site is to help you better understand the html/css as well as my prob.

I am having a problem with the text. When I put "padding-left: blah" in the "middles" of all the div's, it works, but when I put "padding-right: blah" (mind you, before the padding-left, because TRouBLE is the order) nothing happens. The text just goes to the outer rim of the div. So, can someone help this prob? Currently, I think it is a problem with the width's of the columns, and how much room that text takes up; it becomes a problem, I think, because the text takes too much room, and...er...well, "blah", I don't really know, which is why I am asking for some help.

Okay, here's the code that should be worried about (and here is the link to the site: http://www.freewebs.com/yhskeyclub)

(all the middle divs, with the "holding" content as well at the top)

body{
margin:0;
padding:0;
background:#325467;
font: 12px verdana #000000;
}

#maincontainer{
width: 748px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}
#content_header {
background-image: url(http://img155.imageshack.us/img155/884/contentheaderdr6.gif);
background-repeat: no-repeat;
width: 748px;
height: 47px;
}

#content_middle {
background-image: url(http://img89.imageshack.us/img89/7954/contentmiddlequ3.gif);
background-repeat: repeat-both;
width: 748px;
}

//*All the stuff that shows up in the middle of the "maincontainer" I have placed INSIDE the content_middle; obvious, I know, but I want to be clear*//

#news_middle {
background-image: url(http://img295.imageshack.us/img295/2057/newsmiddlejf6.gif);
background-repeat: repeat-y;
width: 330px;
margin-left: 2px;
padding-right: 9px;
padding-left: 9px
}
#welcome_middle {
background-image: url(http://img295.imageshack.us/img295/7890/welcomemiddleje2.gif);
background-repeat: repeat-y;
width: 435px;
padding-right: 12px;
padding-left: 12px
}

//*That was all the right column, save for the "image" positioned absolutely next to the news div*//

.left_column_middle {
background-image: url(http://img179.imageshack.us/img179/3166/leftcolumnmiddlehk4.gif);
background-repeat: repeat-y;
width: 210px;
padding-left: 12px
}

//*That's the middle for all the divs in the left_column; they share the same width, so I thought it'd be easier if I just used one middle*//


And here's the code for the "p":



p
{
font: 10px verdana;
text-indent: 2px;
padding-right: 12px;
}
p:first-line
{
font: small-caps 700 13px arial;
}


I hope someone can help!