Border around main div

  • Resolved walterego

    (@walterego)


    17 years, 7 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)

    Anyone?

    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)

    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)

    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).

    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)

    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.

    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)

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

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

    Thread Starter walterego

    (@walterego)

    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.

    You really take the biscuit. I give up.

    Thread Starter walterego

    (@walterego)

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

    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)

    <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.

    Er plus the margin?

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