Hello and welcome to our community! Is this your first visit?
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
    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)

    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

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Thanked 1,008 Times in 1,005 Posts
    A little trick:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <meta charset="UTF-8" />
    <title>Title of the document</title>
    <style type="text/css">
    	width: 1000px;
    	height: 1000px;
    	outline:1px solid red;
    	height: 100%;
    	width: 400px;
    	position:absolute; /*   THIS IS THE TRICK   */
    	left: 25%;         /*   THIS IS THE TRICK... AND NOT MARGIN AUTO   */
    	outline:1px solid green;
    	width: 200px;
    	height: 200px;
    	outline:1px solid blue;
    <div id="container">
    	<div id="center"></div>
    	<div id="right"></div>
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.


Posting Permissions

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