Can't get a div to float right properly, its getting pushed down

Question

Been scratching the old noggin for a while on this one. I've tried many things but I cant get the sign-in div to sit properly aligned to the top. It's getting pushed underneath the main article div for some reason. I feel like I have too many nested divs. Please help a noobie out.

My site is www.project-paleo.co.uk

Here is the code for the main indec wrapper :

div.indexcontent {
vertical-align: top;
width: 970px;

}

div.newsext {
text-align: left;
clear: none;
width: 680px;
float: left;
border-width: 7px 7px 7px 7px;
  border-image: url("images/boxborder3.png") 7 7 7 7 round;
}

div.indexforumext {
text-align: left;
width: 680px;
float: left;
border-width: 7px 7px 7px 7px;
  border-image: url("images/boxborder3.png") 7 7 7 7 round;
}


div.newshead{
background-image:  url("images/divhead.png");
background-color: #0e141f;
background-repeat: no-repeat;
padding-left: 5px;
display: inline;
}

div.newscontent {
background-image:  url("images/cbox.png");
background-color: #0e141f;
background-repeat: no-repeat;
padding: 10px;
}

div.rightbox {
width: 250px;
float: left;
border-width: 7px 7px 7px 7px;
border-image: url("images/boxborder3.png") 7 7 7 7 round;

}

<div class="indexcontent">

		<div class ="newsext">
		<div class ="newsint">

			<article class ="post">

				<div class ="newshead">

				<div>
				<img id="Project Paleo" src="<?php echo get_bloginfo('template_directory');?>/images/note.png" alt="" height="35" width="30"/>
				</div>

				<div class="newstitle">
				<h2><a href="<?php the_permalink(); ?>"> <?php the_title() ;?></a></h2>
				</div>

				</div>

				<div class ="newscontent">
				<?php the_content(); ?>
				</div>

			</article>

		</div> <!-- Newsint -->
		</div> <!-- Newsext -->

		<div class ="indexforumext">
			<div class ="indexforumint">

				<?php echo do_shortcode("[bbp-forum-index]"); ?>

			</div> <!-- indexforumint -->
	
		</div> <!-- indexforumext -->


		<div class ="rightbox">

			<div class ="rbhead">
			
				<h2> Server Map </h2>

			</div>

			<div class ="login">

				<?php echo do_shortcode("[login_widget]"); ?>

			</div>

		</div>


</div> <!-- IndexContent -->

Answer 1

As i see your main container/holder/wrapper (.indexcontent) don't have position:relative, using position:absolute on '.rightbox' won't bring the box to right position. So try this codes

.indexcontent{
    position:relative;
}

.rightbox{
    float: none;
    position: absolute;
    right: 0px;
}

Answer 2

The problem is caused by the <div class ="indexforumint"> element. You should wrap <div class ="indexforumint"> and <div class ="newsint"> in a <div> and then float the wrapping div.

See this:

HTML

<div class="indexcontent">

<div class="left-wrapper"> <!-- added this div as a wrapper !-->
    <div class ="newsext">
        <div class ="newsint">

            <article class ="post">

                <div class ="newshead">

                <div>
                <img id="Project Paleo" src="<?php echo get_bloginfo('template_directory');?>/images/note.png" alt="" height="35" width="30"/>
                </div>

                <div class="newstitle">
                <h2><a href="<?php the_permalink(); ?>"> <?php the_title() ;?></a></h2>
                </div>

                </div>

                <div class ="newscontent">
                <?php the_content(); ?>
                </div>

            </article>

        </div> <!-- Newsint -->
    </div> <!-- Newsext -->

    <div class ="indexforumext">
        <div class ="indexforumint">

            <?php echo do_shortcode("[bbp-forum-index]"); ?>

        </div> <!-- indexforumint -->

    </div> <!-- indexforumext -->
</div> <!-- left-wrapper -->

<div class ="rightbox">

    <div class ="rbhead">

        <h2> Server Map </h2>

    </div>

    <div class ="login">

            <?php echo do_shortcode("[login_widget]"); ?>

    </div>

</div>

CSS

div.indexcontent {
vertical-align: top;
width: 970px;

}

// Added these styles 
div.left-wrapper {
float:left;
width:660px;
}

// Change width to 100%
div.newsext {
text-align: left;
clear: none;
width: 100%;
float: left;
border-width: 7px 7px 7px 7px;
border-image: url("images/boxborder3.png") 7 7 7 7 round;
}

// Change width to 100%
div.indexforumext {
text-align: left;
width: 100%;
float: left;
border-width: 7px 7px 7px 7px;
border-image: url("images/boxborder3.png") 7 7 7 7 round;
}


div.newshead{
background-image:  url("images/divhead.png");
background-color: #0e141f;
background-repeat: no-repeat;
padding-left: 5px;
display: inline;
}

div.newscontent {
background-image:  url("images/cbox.png");
background-color: #0e141f;
background-repeat: no-repeat;
padding: 10px;
}

div.rightbox {
width: 250px;
float: left;
border-width: 7px 7px 7px 7px;
border-image: url("images/boxborder3.png") 7 7 7 7 round;

}

Hope that helps!

Answer 3

Add

position:absolute;
top:5px;
right:5px;

to div.rightbox in your CSS