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

CSS: .main { width: 500px; border: 2px solid #C33; border-bottom-width: 2px; background-color: #252525; min-height: 1000px; margin-right: 10px; float: left; } .side { width: 200px; border: 2px solid #C33; min-height: 100px; float:right; margin-top: 100px; background-color:#252525; } .wrapper { margin-top:10px; width: 760px; } HTML:

test main

test side — NotKimJongUn, May 10 '14 at 19:27
@user3091051 Please add that code to your question by clicking edit — Lee Taylor, May 10 '14 at 19:37

Imran Bughio · Accepted Answer · 2014-05-10T19:37:42.010

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;
}

edited May 10 '14 at 19:37

answered May 10 '14 at 19:05

Imran Bughio

4,811
2
30
53

Thanks for the answer. I do have a problem though. I want my "main" in the center, and 500px wide. Then i want the "side" 200px wide and next to it. But So i set the wrapper to 700px, but for some reason the "side" push the "main" more to the left so it's not any longer centered. Picture here: http://i.imgur.com/SsDEUOL.png – NotKimJongUn May 10 '14 at 19:23
You can not keep 1 div center & other to it's left at the same time like that -- i would suggest using `position: absolute;` or negative margin.. i have updated my answer to show you absolute positioning technique. – Imran Bughio May 10 '14 at 19:39

score 0 · Answer 2 · answered May 10 '14 at 19:00

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/

Nielarshi · Answer 3 · 2014-05-10T19:16:28.890

0

enter image description here

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

edited May 10 '14 at 19:16

answered May 10 '14 at 19:09

Nielarshi

1,126
7
11

Floating box to the right

3 Answers3

DEMO

Preview:

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