WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Border around main div (16 posts)

  1. walterego
    Member
    Posted 7 years ago #

    Hey guys,

    I´m having a CSS and XHTML problem. I have a #main div that contains a #sidebar and #content div. I´m trying to make a border around this #main div. It only seems to work in IE (7), not in FF. Here's the xhtml (partially):

    <body>
        <div id="rap">
            <div id="header">
                <div id="logo">
                </div>
                <div id="horimenu">
                    <ul>
                        <?php
                            wp_list_pages('sort_column=menu_order&title_li=&depth=1');
                        ?>
                    </ul>
                </div>
            </div>
            <div id="main">
                <div id="content">
                    <div class="post">
                        <div class="post-info">
                            <div class="post-title">
                            <h2>Het laptop dilemma</h2>
                            </div>
                            <div class="post-date">
                            <h2>17 juni 2007</h2>
                            </div>
                        </div>
                        <div class="post-content">
                        <p>Some content here</p>
                        </div>
                    </div>
                </div>
                <div id="sidebar">
                    <div id="rss" class="sidebardiv">
                        <h2>RSS abbonementen</h2>
                        <ul>
                            <li><a href="#">RSS voor logs</a></li>
                            <li><a href="#">RSS voor reacties</a></li>
                        </ul>
                    </div>
                    <div id="lastlogs" class="sidebardiv">
                        <h2>Laatste logs</h2>
                        <ul>
                            <li><a href="#">Het laptop dilemma</a></li>
                            <li><a href="#">Zelfgemaakte ijsthee</a></li>
                            <li><a href="#">AGLOCO viewbar te downloaden</a></li>
                            <li><a href="#">Traffic generen met een blogkermis</a></li>
                            <li><a href="#">Even over de grote donorshow</a></li>
                        </ul>
                    </div>
                    <div id="categories" class="sidebardiv">
                        <h2>Categorien</h2>
                        <ul>
                          <li><a href="#">Alledag</a></li>
                          <li><a href="#">Communicatie</a></li>
                          <li><a href="#">Cultuur</a></li>
                          <li><a href="#">Energiebesparing</a></li>
                          <li><a href="#">Informatiemanagement</a></li>
                          <li><a href="#">Overheid</a></li>
                          <li><a href="#">School</a></li>
                          <li><a href="#">Walter's cuisine</a></li>
                          <li><a href="#">Web</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </body>

    This is the CSS:

    body {
    	text-align:center;
    	font-family:Arial, Helvetica, Sans-Serif; }
    #rap {
    	width: 800px;
    	margin:0 auto; }
    #header { }
    #logo {
    	margin:0 auto;
    	width:725px;
    	height:180px;
    	background: url(img/logo.png) #6C5635 no-repeat bottom center; }
    #horimenu {
    	background-color:#2e3192;
    	padding:10px 0px; }
    	#horimenu ul {
    		margin:0px;
    		list-style-type: none;
    		display: inline; }
    	#horimenu ul li {
    		padding: 0 5px;
    		list-style-type: none;
    		display: inline;  }
    	#horimenu a, #horimenu a:link, #horimenu a:visited, #horimenu a:hover {
    		font-size:14pt;
    		color:#fff;
    		text-decoration:none; }
    		#horimenu a:hover {
    		color:#6C5635;
    		text-decoration:underline; }
    #main {
    	width:725px;
    	margin:0 auto;
    	border-left: 2px solid #2E3192;
    	border-right: 2px solid #2E3192;
    	border-bottom: 2px solid #2E3192;
    	display:block; }
    #content {
    	float:right;
    	width:485px;
    	margin-right:10px;
    	display: inline; }
    #sidebar {
    	float:left;
    	width:210px;
    	margin-left:10px;
    	display: inline; }
    div.sidebardiv {
    	float:left;
    	width: 200px;
    	margin:5px 0;
        text-align:left;
    	background: #8CC63F; }
    		div.sidebardiv ul li {
    			padding:0 0 0 0;
    			list-style: none; }
    		div.sidebardiv ul li a{
    			color:#fff; }
    		div.sidebardiv h2 {
    			padding: 0 0 0 5px;
    			font-size:14pt;
    			color:#2E3192; }
    .page_item ul li a, .page_item ul li a:visited, .page_item ul li a:hover {
    	display: inline;
    	color:#fff;
    	font-weight:bold; }
    
    .post {
    	width:100%; }
    .post-title {
    	float:left;
    	text-align:left; }
    .post-date {
    	float:right;
    	text-align:right; }
    .post-content {
    	float:left;
    	text-align:left; }

    Can anybody tell me what I'm doing wrong here? There's a screenshot of the result here.

  2. walterego
    Member
    Posted 7 years ago #

    Anyone?

  3. Root
    Member
    Posted 7 years ago #

    For this type of question we must have a link to the Blog In Question. And then we can read the code therein. We are coders. Not graphic designers. Photoshop/Screen Shots are no good.

  4. walterego
    Member
    Posted 7 years ago #

    Well, the theme can't be seen only yet. I'm designing it on a local testing server. The theme so far can be downloaded from here.

  5. walterego
    Member
    Posted 7 years ago #

    To clarify even more, here's what the basic structure should be like:

    <body>
    <div id="main" style="width:725px; margin: 0 auto; border:#000000 solid 2px;">
    <div id="content" style="float:right; width: 515px;">hello content
    </div>
    <div id="sidebar" style="float:left; width:200px;">hello sidebar
    </div>
    </div>
    </body>

    This one doesn't do what I want either (wrapping the border around the content and sidebar div).

  6. Root
    Member
    Posted 7 years ago #

    Well it wont do. You width calculation is wrong. It seems right. But it does not allow for the *Variations of the Box Model*. I would drop the width of #content by 4+ px.

  7. walterego
    Member
    Posted 7 years ago #

    Dropping the width of #content will only make the space in the center between #content and #sidebar bigger.

    But anyway, can anybody tell me what I'm missing? The way I see it, there's nothing wrong with the CSS or XHTML here.

  8. Root
    Member
    Posted 7 years ago #

    If you can not see that something is wrong with the CSS there is no point in asking people who can:)

  9. walterego
    Member
    Posted 7 years ago #

    You're not making any sense Root. You're also not helping, so why do you bother posting?

  10. Root
    Member
    Posted 7 years ago #

    Well tell me this. Have you tried my solution or have you just presumed you know the result?

  11. walterego
    Member
    Posted 7 years ago #

    Yeah, I did try. Setting the position: absolute; to #main makes the border work btw. The margin: 0 auto; just doesn't work anymore then.

  12. Root
    Member
    Posted 7 years ago #

    You really take the biscuit. I give up.

  13. walterego
    Member
    Posted 7 years ago #

    Solved! Setting overflow to auto on #main did it. Only checked in IE7 and FF2 though. This article seems quite comprehensive on the subject.

  14. Root
    Member
    Posted 7 years ago #

    Errrrrrrrrrrrrr. Did you notice while you were flaming me that 45% x 2 = 90%. ie LESS THAN the width of the parent minus the border. Jeeeeeeeeeeeez. You moron.

  15. walterego
    Member
    Posted 7 years ago #

    <div id="main" style="width:725px; margin: 0 auto; border:#000000 solid 2px;">

    725-2-2=721

    <div id="content" style="float:right; width: 515px;">hello content
    </div>
    <div id="sidebar" style="float:left; width:200px;">hello sidebar
    </div>

    515+200=715

    </div>

    721-715=6, ie still 6px less than the parent minus the border. This was never the problem. I left it this way.

  16. Root
    Member
    Posted 7 years ago #

    Er plus the margin?

Topic Closed

This topic has been closed to new replies.

About this Topic