CSS Column Problem

Hey, I'm having problems with my code/layout. The right hand column is at the bottom of the page rather than at the right where it should be.

Here's the relevant code:

body {
background-color:#161616;
color: #FFFFFF;
font-size:10px;
font-family: Verdana;
}

a {outline:none;} img {border:0px;} .clear {clear:both;}

a {color:#92BDE7;font-weight:bold;text-decoration:none;} a:hover {text-decoration:underline;}
a.title {color:#FFF;text-decoration:none;font-weight:bold;} a.title:hover {text-decoration:underline;}

#wrap {width:1024px;overflow:hidden;margin: 0 auto;background-image:url(sources/wrapbg.jpg);}
#leftbox {width:678px;overflow:hidden;float:left;}
#rightbox {width:346px;overflow:hidden;float:left;}

.th {width:1014px;height:27px;background-image:url(sources/th.jpg);line-height:27px;color:#777;text-align:right;padding-right:10px;}
.cl {width:299px;height:75px;background-image:url(sources/cl.jpg);float:right;padding-left:20px;padding-top:45px;}
.b {width:1024px;height:120px;background-image:url(sources/b.jpg);}
.ms-header {width:1024px;height:31px;background-image:url(sources/ms-header.jpg);}
.lb-header {width:638px;height:40px;background-image:url(sources/lb-header.jpg);font-weight:bold;line-height:35px;padding-left:40px;}
.lb-content {width:668px;padding-left:5px;padding-right:5px;padding-top:5px;}
.ln-info {width:668px;line-height:16px;padding-top:8px;}
.link {width:678px;height:25px;background-image:url(sources/link.jpg);margin-top;5px;}

.rt-header {width:316px;height:40px;background-image:url(sources/rt-header.jpg);font-weight:bold;line-height:35px;padding-left:40px;}
.rt-content {width:346px;height:25px;background-image:url(sources/rt-content.jpg);}
.rt-cloud {width:20px;float:left;padding-left:7px;padding-top:5px;}
.rt-info {width:268px;float:left;padding-left:3px;padding-top:4px;}
.rt-info a {color:#FFF;text-decoration:none;font-weight:100;}
.rt-info a:hover {text-decoration:underline;}
.rt-comment {float:left;padding-top:4px;}
.rt-match {width:288px;float:left;padding-left:7px;padding-top:4px;}
.rt-match a {color:#FFF;text-decoration:none;font-weight:100;}
.rt-match a:hover {text-decoration:underline;}
.rt-win {float:left;padding-top:4px;}

.footer {width:1024px;height:110px;background-image:url(sources/footer.jpg);}
.ms-header2 {width:320px;height:26px;background-image:url(sources/ms-header2.jpg);margin-left:10px;font-size:11px;line-height:26px;padding-left:10px;}
.ms-content2 {width:320px;height:21px;background-image:url(sources/ms-content2.jpg);margin-left:10px;line-height:21px;padding-left:10px;}

<!-- PHP STUFF HERE -->
</head>
    <body>
    
        <div id="wrap">
            <div class="th"><?php include("counter.php"); ?></div>
            
            <div class="b">
                <div class="cl"><?php include("login.php"); ?></div>
            </div>
            
                    <!-- Links -->
        
            <div class="ms-header"></div>
            <?php include("sc_sponsors.php"); ?>
            

            <div class="leftbox">
              <div class="lb-header">Featured Content</div>
<div style="clear: both;"></div>              

              <div style="margin-top: 4px;" class="lb-header">Latest News</div>
              <div class="ln-info">
                    <!-- content -->
              </div>

            </div>
            
            <div class="rightbox">
                <div class="rt-header">Recent Threads</div>
                <?php include("latesttopics.php"); ?>

                <div class="rt-header">Recent Matches</div>
                <?php include("sc_results.php"); ?>

                <div class="rt-header">Downloads</div>
                <?php include("sc_files.php"); ?>
            </div>


            <div style="clear: both;"></div> 
            <div class="footer"></div>
        </div>
    
    </body>
</html>

samw1

Newbie Poster

6 posts since Jul 2010

Reputation Points: 11

Solved Threads: 0

1 Year Ago

I'm way too warm and my brain's not workin' right today but...

You have:

wrap {width:1024px;overflow:hidden;margin: 0 auto;background-image:url(sources/wrapbg.jpg);}
leftbox {width:678px;overflow:hidden;float:left;}
rightbox {width:346px;overflow:hidden;float:left;}

And I'm kinda thinking that rightbox should be:

rightbox {width:346px;overflow:hidden;float:right;}

But again, I've been having an off day today so I could be 100% wrong on this :P

Hope this helps :) Please mark as solved if it resolves your issue.

Edit: I'm also wondering why those "classes" don't have a # or . notation to them but *shrug* not gonna concern myself with the little things hehe

Lusiphur

Posting Shark

Team Colleague

966 posts since Jun 2010

Reputation Points: 207

Solved Threads: 127

1 Year Ago

No. Didn't help. Thanks for trying. I've been trying to go at this for hours. Think I might start from scratch if I can can't get it.

samw1

Newbie Poster

6 posts since Jul 2010

Reputation Points: 11

Solved Threads: 0

1 Year Ago

Something I didn't think of before...

Divs default to having some padding to their "container" which could be causing an issue since your two (left and right) divs add up to a total combined width of 1024 and are being placed inside a div of width 1024.

You may want to make sure you a) set all padding to 0 and b) possibly shrink the component divs by a few pixels so they don't overload the containing wrapper div.

Also, ya, my brain doesn't work today cus I actually DELETED your #'s when I was copying your example and they were there in the first place :P

Lusiphur

Posting Shark

Team Colleague

966 posts since Jun 2010

Reputation Points: 207

Solved Threads: 127

1 Year Ago

I set the wrapper to 1950px. Didn't do much in bringing the right content up into the right coloum. I have to go, I'll reply/edit this post later with suggestions completed..

samw1

Newbie Poster

6 posts since Jul 2010

Reputation Points: 11

Solved Threads: 0

1 Year Ago

Show Comments

HA!!! I can't believe I didn't see this before...

You've got it working just fine... the only thing you're doing wrong is your div statements.

Change and to and and you should be golden. Oh, and ya, change the rightbox definition's float to right instead of left.

I did some testing of my own and with the following CSS:

#wrap {
	width: 1024px;
	margin: 0 auto;
}
#leftbox {
	width: 678px;
	float: left;
}
#rightbox {
	width: 346px;
	float: right;
}

and the following HTML

<body>
<div id="wrap">
    <div id="leftbox">
        Featured Content
    </div>
    <div id="rightbox">
        Recent Threads
    </div>
</div>
</body>

I get a 2-column effect as intended but if I used "

Lusiphur

Posting Shark

Team Colleague

966 posts since Jun 2010

Reputation Points: 207

Solved Threads: 127

This question has already been solved

You