position one column to right of page

Question

I only need one column on my index page and I want it to be on the right side of the screen. I am using a background image that has what I want on the left. bg-image is in the body

I am trying this approach but it is not getting all the way to the right. Am I going about this wrong and more generally how do you position one column to the right of the screen?

<div style=" float:right" >
   <div class="one"></div>
   <div class="two"></div>
   <div class="three"></div>
   <div class="four"></div>

</div>

css for the four inner divs

body{
background-image: url(images/splashpage.jpg);
background-position:top;
font-family: Arial, Helvetica, sans-serif;


  }
.one{
 <!-- width:40%; -->
 background-color:lightblue;
 font-family: Arial, Helvetica, sans-serif;
 position:relative;

 <!-- left:150px; -->

}
.two{
 width:580px;
 background-color:lightgreen;
 position:relative;
 right:100px;
 top:50px;
}
.three{
 width:600px;
 background-color:blue;
 position:relative;
 right:100px;

}
.four{
 width:580px;
 position:relative;
 left:20px;
 margin: 0 auto;
 top:50px;

}
.footer{
 width:580px;
 text-align:center;
 position:relative;
 top:50px;

Yes, so may be other things would be affecting this so I asked.. — Mr. Alien, Feb 15 '14 at 07:54
@rogerthat it's getting bit confusing, can you make a fiddle so that I can help you out with a precise reason of the issue? — Mr. Alien, Feb 15 '14 at 07:57
http://jsfiddle.net/m6wpw/6/ in this fiddle wat do you need the change?? is this the output you got from your code? if so what is the change to be done.. — Amarnath Balasubramanian, Feb 15 '14 at 08:06
@AmarnathBalasubramanian yes, thats right.I need it all to be flush with the right side of the screen — rogerthat, Feb 15 '14 at 08:11
@rogerthat I would suggest you to learn [`float`](http://stackoverflow.com/questions/16568272/how-css-float-works-why-height-of-the-container-element-doesnt-increase-if-it/16568504#16568504), I've explained it in a detailed way :) — Mr. Alien, Feb 15 '14 at 08:14
@Mr.Alien floating the container div is not good enough and where did you explain it? — rogerthat, Feb 15 '14 at 08:16
@rogerthat I've provided a link in the comment, click on the word `float` — Mr. Alien, Feb 15 '14 at 08:16
@Mr.Alien But I want them stacked not side by side. floating each div would just put them side by side — rogerthat, Feb 15 '14 at 08:18
@rogerthat You said you want to float, now you saying you want to stack, sorry but am not getting a clear picture here :) still, I provided the link so that you can refer how float really works — Mr. Alien, Feb 15 '14 at 08:21
@Mr.Alien That's what the html is doing. it has a container that is `float: right` and nested divs that stack within it. — rogerthat, Feb 15 '14 at 08:24
@Mr.Alien Nothing until I changed the width of the body. If i change the `width` to 100% or 1000px all the `divs` go left side even with the `float:right`. If i have no width everything sits nicely where I want it but that can't be good practice — rogerthat, Feb 15 '14 at 08:29

score 0 · Answer 1 · answered Feb 15 '14 at 09:12

this was working fine for the containing div to float right, but all this was doing was putting the inner divs side by side and I need them to stack.

<div style=" float:right" class="container" >
  <div class="one" style="float:right"></div>
  <div class="two" style="float:right"></div>
  <div class="three" style="float:right"></div>
  <div class="four" style="float:right"></div>
</div>

so I put a clear div in between each and now the container div floats right as well as the inner divs while stacking. It seems simple now but maybe if someone else has this problem this will help.

<div style=" float:right" class="container" >
  <div class="one" style="float:right"></div>
     <div style="clear:both"></div>
  <div class="two" style="float:right"></div>
     <div style="clear:both"></div>
  <div class="three" style="float:right"></div>
     <div style="clear:both"></div>
  <div class="four" style="float:right"></div>
</div>

not sure if its best practice or if there's a more efficient way but it works.

position one column to right of page

1 Answers1