Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Floating boxes on the right side

    Hello there Codingforums
    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.
    (this forum resizes my picture, so you can't see the box, i'll leave the direct link here)
    http://i.imgur.com/BrLXvrR.png

    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
    http://i.imgur.com/Ao8Jado.png

    Any help will be greatly appreciated

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,305
    Thanks
    23
    Thanked 612 Times in 611 Posts
    A little trick:
    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="UTF-8" />
    <title>Title of the document</title>
    <style type="text/css">
    #container{
    	width: 1000px;
    	height: 1000px;
    	outline:1px solid red;
    }
    #center{
    	height: 100%;
    	width: 400px;
    	position:absolute; /*   THIS IS THE TRICK   */
    	left: 25%;         /*   THIS IS THE TRICK... AND NOT MARGIN AUTO   */
    	outline:1px solid green;
    }
    #right{
    	width: 200px;
    	height: 200px;
    	float:right;
    	outline:1px solid blue;
    }
    
    </style>
    </head>
    
    <body>
    <div id="container">
    	<div id="center"></div>
    	<div id="right"></div>
    </div>
    
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •