WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Parent div not showing border or background color CSS (7 posts)

  1. leon@leonsthoughtforfood
    Member
    Posted 3 years ago #

    OK I am fairly new to web development but the problem I am having was one of the first things that I learned to do. I am writing my own them for my new wordpress version of my site. Right now it is very simple. I made a parent div to wrap all of the site
    /*
    <body>
    <div id="bodycenter">

    all my content

    </div>
    </body>
    */
    the css is

    #bodycenter{
    margin: 0 auto 0 auto;
    height: 100%;
    width: 798px;
    text-align: left;
    background-color: #ffffff;
    border: 1px solid #000000; }

    The content does have fixed width and is centered in browser window, but it does not show color it just inherits the color of the body and it does not show a border. I have spent 5 days googling questions and reading looking for help at this rate I can't get anything else done it is driving me nuts please help. the address of my wordpress is http://www.leonsthoughtforfood.com/blog/wordpress/
    and the theme I'm working on is "thought"

  2. leon@leonsthoughtforfood
    Member
    Posted 3 years ago #

    Ok I apologize but right after I posted this I accidentally combined a new question in Google to half of the old one and the first search result was the answer. For anyone else with this problem I had to give #bodycenter a float: left; to get it to truly wrap around the content so that you could see its borders and back ground. This how ever corrupted the centering of the div that the margin left,right auto had afforded. so I split the attributes into 2 divs

    #bodycenter{
    margin: 0 auto 0 auto;
    width: 798px;
    }
    #wrapper{
    text-align: left;
    background-color: #ffffff;
    border: 1px solid #000000;
    float: left;
    }
    and the html went like this
    /*
    <body>
    <div class="bodycenter">
    <div class="wrapper">

    content

    </div>
    </div>
    </body>
    */

  3. ahuggins
    Member
    Posted 3 years ago #

    You could really probably delete your "bodycenter" div entirely and just use the "wrapper" div.

  4. leon@leonsthoughtforfood
    Member
    Posted 3 years ago #

    But when I did that the float left that made it wrap around content also disengaged the centering and it was all the way to the left of the browser window

  5. ahuggins
    Member
    Posted 3 years ago #

    Yeah, there are a few things wrong. Here is how your style.css should begin:

    body{
    	margin: 0 auto;
    	font-family: "trebuchet ms", Helvetica, Georgia, Sans-serif;
    	font-size: 14px;
    	text-align: center;
    	background: #dcdcdc;
    	color: #000000;
            width: 797px;
    }
    
    #wrapper{
    	background-color: #ffffff;
    	border: 1px solid #000000;
            text-align: left;
    }

    You can then delete the "bodycenter" div and your layout stays intact. The problem comes from not setting your width on your 'body' and apparently it requires a specific declaration of pixels, so if you only specify '797' and not '797px' it doesn't behave properly.

    "Fixing" this is going to cause other problems to your site, they should be fixable, it's just a matter of whether or not you want to put the time in. However, fixing it may make your css easier to understand and therefore easier to maintain, but that's going to be up to you.

  6. leon@leonsthoughtforfood
    Member
    Posted 3 years ago #

    but then the #dcdcdc color will only be as wide as the rest of the content when I want that to be the color of the excess browser window.
    am I suppose to be assigning attributes to <html>?

  7. leon@leonsthoughtforfood
    Member
    Posted 3 years ago #

    I do want it to be correct, easy to understand, easy to maintain no matter how much time it takes. for the record :-)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.