Member Avatar for samw1

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>
  • 2 Contributors
  • 5 Replies
  • 124 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by Lusiphur
Lusiphur commented: bump up for including all of the needed info btw +1
Member Avatar for Lusiphur

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

Edited by Lusiphur because: n/a
Member Avatar for samw1

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.

Member Avatar for Lusiphur

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

Member Avatar for samw1

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

Member Avatar for Lusiphur

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 <div class="leftbox"> and <div class="rightbox"> to <div id="leftbox"> and <div id="rightbox"> 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 "<div class=" instead they appeared one on top of each other.

Hope this helps :) Please mark solved if your problem is resolved.

commented: Thank you!! It worked. Some many hours wasted for such all small thing. +0
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.