Border around main div

  • Resolved walterego

    (@walterego)


    16 years, 8 months 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.

Viewing 15 replies - 1 through 15 (of 15 total)
  • Thread Starter walterego

    (@walterego)

    16 years, 8 months ago

    Anyone?

    Root

    (@root)

    16 years, 8 months 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.

    Thread Starter walterego

    (@walterego)

    16 years, 8 months 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.

    Thread Starter walterego

    (@walterego)

    16 years, 8 months 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).

    Root

    (@root)

    16 years, 8 months 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.

    Thread Starter walterego

    (@walterego)

    16 years, 8 months 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.

    Root

    (@root)

    16 years, 8 months ago

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

    Thread Starter walterego

    (@walterego)

    16 years, 8 months ago

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

    Root

    (@root)

    16 years, 8 months ago

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

    Thread Starter walterego

    (@walterego)

    16 years, 8 months 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.

    Root

    (@root)

    16 years, 8 months ago

    You really take the biscuit. I give up.

    Thread Starter walterego

    (@walterego)

    16 years, 8 months 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.

    Root

    (@root)

    16 years, 8 months 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.

    Thread Starter walterego

    (@walterego)

    16 years, 8 months 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.

    Root

    (@root)

    16 years, 8 months ago

    Er plus the margin?

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Border around main div’ is closed to new replies.