Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #6242

    Hello, I am polishing my business site after having taught myself some beginning CSS from reading through these forums, and so far they have been a great help. But I have a question:

    Visually what I want to do might seem similar, but I suspect I will have to edit more than just the style.css. Being a CSS novice, I will try to explain what I want as well as I can-

    This is my rough site:

    1) On the main page, I want to know if it is possible to add a “box” or stroke around the main 3-column content/element area so that it visually pops out from the background. Like a panel + stroke with a black background that contains the columns (images/heading/text) while making it pop from the dark grey wrapper background. Or going further, to add similar “boxes” around each individual content column…

    2) On individual pages, I want to essentially achieve the same effect, but to have a “box” or panel surround the content area as well.

    The effect I am after is separating the mainpage/page content from the background so that intuitive navigation and comprehension of the site is easier/faster.





    1) You can add a different background color to the main content area or to the box div areas. The code for the main area would look like:

    .home #main {
    background: #000;

    for the box areas:

    .home .box {
    background: #000;

    2) If you’d like to change the color of the content area on all pages use:

    #main {
    background: #000;


    Thanks Dude, I am in the middle of tweaking it around right now. So far it has achieved what I wanted for the main content boxes. I will try to add it to all pages universally next.

    One thing- the custom box in the footer also got the changes applied to it as well (black background, 1px border). I tweaked the css for the footer area to get it back to normal, but how would I go about focusing just on the 3 main columns? My fix seems ugly, I am sure there is a more elegant way to single out the 3 main boxes… A broad css question, I know.

    Thanks, and I will continue to seek your help if I need anything else.


    Hey – I missed this. Mea culpa. Use following code instead:

    .home #main .box {
    background: #000;


    Thanks. One final question for this post- how can I set a margin for the text within the content space? Right now the text goes right to the edge of the right hand margin of the content areas, I wanted to center the text within the content areas 8px or so.



    I don’t see any margin problems on your site. Did you solve it? Am I missing something? If so, could you please specify where exactly the problem lies?



    I did have to change the padding value for p { } in style.css, line 802. Was something like 0 0 2em 0, and instead changed it to 0, 12px. This gives me a nice margin within the content area.

    There might be a more graceful solution, but this one works so far.

    Incidentally, I also had to fix the contact form entry area- the text entry box overran the content area margin. This seemed to bring it back in line:

    #top .text_area{

    width:560px; /*orig 600 fixes contact text area to stay within content box*/



    I’m not entirely sure what brought this up but I’m glad to see you’ve worked it out =]

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Adding mainpage/page column "boxes" (sort of…)’ is closed to new replies.