WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] CSS parsing problem (8 posts)

  1. Jonas Grumby
    Member
    Posted 4 years ago #

    Hi everyone. I'm sure this is what we used to call a ID-10T error, but what I am trying to do is create a theme that has a white border around the entire thing, a header area across the top, and a sidebar and content area below that. What is happening is that the text starts inside the white border, but then breaks out of it and continues down the page instead of staying contained within the border. My code works fine as static HTML but not in WP.

    Here is the simple code that I wrote into index.php to test this:

    <div id="container">
    	<div id="testheader">
    this is the header this is the header this is the header this is the header this is the header this is the header this is the header this is the header this is the header this is the header this is the header this is the header this is the header this is the header this is the header this is the header
    	</div>
    
    	<div id="wrapper">
    		<div id="content">this is the the content area this is the the content area this is the the content area this is the the content area this is the the content area this is the the content area this is the the content area this is the the content area this is the the content area this is the the content area this is the the content area this is the the content area this is the the content area this is the the content area </div>
    		<div id="sidebar">this is the sidebar this is the sidebar this is the sidebar this is the sidebar this is the sidebar this is the sidebar this is the sidebar this is the sidebar this is the sidebar </div>
    	</div>
    
    </div>

    Here is the stylesheet info:

    body {
    	font-size: 62.5%; /* Resets 1em to 10px */
    	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
    	background: #000000;
    	color: #FFFFFF;
    	}
    
    #container {
    	width: 900px;
    	background: #000000;
    	border-width: 4px;
    	border-color: #FFFFFF;
    	border-style: solid;
    	margin: auto;
    	}
    #wrapper {
    	padding: 10px;
    	font-size: 12px;
    	line-height: 20px;
    	}
    
    #content {
    	float: right;
    	width: 600px;
    	}
    
    #sidebar {
    	font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
    	float: left;
    	width: 210px;
    	}

    Note that testheader is not defined in the stylesheet. I changed it from header to testheader so the header background graphic would not be called in.

    Here is how it displays: http://johnnasta.com/blog/?theme=VNF

    I did originally try to code it all out with loop, sidebar, and header code but had the same results. I stripped all of that out and replaced it with dummy text to simplify the example and eliminate possible causes.

    It seems like this should be simple. Can someone tell me what I'm doing wrong?

    Thanks!

  2. Jonas Grumby
    Member
    Posted 4 years ago #

    p.s. I have tried adding height: auto; as well as min-height: 100%; to the container style but neither of those made any difference :(

  3. Jonas Grumby
    Member
    Posted 4 years ago #

    p.p.s. adding display: inline-block; to the container CSS fixed the problem of the floated elements breaking out of the container but now it's no longer centered. I guess I could wrap the whole thing in another div.

    Other things that did not work:

    • The clearfix example shown here made the white border go away entirely and made the width go to 100%
    • Using <div style="clear: all;"></div> or <br clear=all> after the nested divs did nothing.
    • Adding float: none; or float: center; to the container style

    As Paul McCartney once said "I'm getting closer, my salamander".

  4. Rev. Voodoo
    Volunteer Moderator
    Posted 4 years ago #

    there is no such thing as float center...

    it's usually done with margins... like margin:0 auto;

  5. Jonas Grumby
    Member
    Posted 4 years ago #

    Thanks @RVoodoo. Setting either the container or a new parent div to margin:0 auto; did not work. Wrapping the whole thing in a new parent div with text-align: center; and then setting the container div to text-align:left; worked. It's displaying the way I want it to now, and no errors reported from W3C Markup Validation.

    float: center; was wishful thinking on my part.

    I always appreciate your help.

  6. Rev. Voodoo
    Volunteer Moderator
    Posted 4 years ago #

    yeah...float:center would be very nice!

    glad you got things set up!

  7. Jonas Grumby
    Member
    Posted 4 years ago #

    Yeah, thanks. I found some good info here about inline boxes and other CSS elements.

  8. Jonas Grumby
    Member
    Posted 4 years ago #

    For anyone who doesn't want to read the whole page, here is the key text:

    "There are two basic types of boxes, block and inline. Block boxes are generated by elements such as P, DIV or TABLE. Inline boxes are generated by tags such as B, I or SPAN and actual content like text and images."

Topic Closed

This topic has been closed to new replies.

About this Topic