Making a div go down right side of page

HTML & CSS
1

How can you make a div place nicely on the right side of the screen without creating a horizontal scroll bar?

I have tried a few things like margin-left: 100%; which just creates a scrollbar. Also I have done things like margin-left:94.1%; it works good in some browsers but in others it doesnt.

2

The basic model is:-

body = 100%

Content = 90%
right = 10% (or even 9.99%) and float the right div to the right.

Check out the following thread for my help:

or have a look at my layout code (which is just a modified version of the above so I can see it clearer)

http://www.webdsign.co.uk/test2.htm
http://www.webdsign.co.uk/test2.css

Hope that helps in some way.

3

Hi,

To place an element on the right hand side of the page just put it there :slight_smile:


position:absolute;
right:0;
width:200px

Or float it there:


float:right:
width:200px;

It all depends on what you are trying to achieve. If you want 100% height then look at the links Mikel posted above and look at my 3 col thread which explains 100% height in detail.

Here’s just a basic example of putting something on the right without a scrollbar appearing.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {margin:0;padding:0}
#right{
 width:200px;
 background:#ffffcc;
 border:1px solid #fff;
 position:absolute;
 right:0;
 top:220px
}
#right2 {
 width:200px;
 float:right;
 height:200px;
 background:red;
}
</style>
</head>
<body>
<div id="right2"> 
  <p>This is some right content : This is some right content</p>
</div>
<div id="right"> 
  <p>This is some right content : This is some right content</p>
</div>
</body>
</html>

Paul

4

thanks guys. Ill look into these

5

Just know that if you float it there…it will then grow or shrink with the browser window. If the rest of your page allows this, it’s fine.

Another good source for css is www.csszengarden.com. Click on their “resources” for lots of info.

6

it will then grow or shrink with the browser window

I think I should be ok on that since all my divs are measured in percentages not a defined number of pixils. Thanks for the heads up though.