Floating box to the right

Question

I'm currently creating a website, which has a centered box with text and and such. Now, i also want a box floating on the right, with a little gap from my main box. I'll leave a picture here, where the red box i drew is the floating box i want to make.

Btw. the blue box is just a censored box i didn't want on the picture.

So my question for you is, how do i make a floating box like that? I've tried a couple of times with different methods. in the CSS, i've made a box and gave it the property float:right; But when i do that, it just turns out like this

Any help will be greatly appreciated

Answer 1

DEMO

You can keep an element center align by defining its width then using margin: 0 auto; technique. this will make sure your center div is in center then you can use position: absolute to create the other box on offset position.

HTML:

<div class="main-wrapper">
    <div class="main">This is in center position.</div>
    <div class="side">This is in offset position.</div>
</div>

CSS:

body {
    background: #333;
    color: #fff;
}
.main-wrapper {
    position: relative;
    margin: 0 auto;
}
.main, .main-wrapper {
    width: 500px;
}
.main {
    border: 1px solid #f00;
    min-height: 500px;
}
.side {
    width: 200px;
    border: 1px solid #f00;
    min-height: 200px;
    position: absolute;
    top: 60px;
    right: -300px;
}
.main, .side {
    text-align: center;
    padding: 10px;
}

Answer 2

My best guess is that you have a <div> with a float: right; in the end. Keep it in the first code. So that it gets floated correctly. I would code this way:

<div class="right">Right</div>
<div class="main">
  Main Contents
</div>

CSS would be:

.right {float: right; width: 20%;}
.main {margin: auto; width: 60%;}

Preview:

Fiddle: http://jsfiddle.net/praveenscience/8WHyp/

Answer 3

U can have main container display : inline-block

width of each sub container as width : 30%;

and width of the floating box which is inside 3rd sub container as

width : 100%;

In case u dont need first div,

put some margin for the 2nd container

ex .. margin-left : 300px;

and in case u dont want ur floating box width to be 100% of the 3rd container, u can adjust it too