Position a Div Container on the Right Side

Position a div container on the right side

Is this what you wanted? - http://jsfiddle.net/jomanlk/x5vyC/3/

Floats on both sides now

#wrapper{
background:red;
overflow:auto;
}

#c1{
float:left;
background:blue;
}

#c2{
background:green;
float:right;
}​

<div id="wrapper">
<div id="c1">con1</div>
<div id="c2">con2</div>
</div>​

how to position a div to the very right side of the screen

You can simply do this:

.form_style {
width:500px;
margin:50px ;
float:right;
top:-40px;
}

How to align my div to the right side of container per element?

You can define new class and use it in every bubble you want it in right

.right_chat {
right:0;
}

another advice id prefer to use just for one element so in my code i change it to class and use it in html code

body {
background-color: #6B6B6B;
margin: 50px;
font-family: Arial;
color: darkgrey;
font-size: 14px;
line-height: .3;
letter-spacing: .5px;
}
.chattext {
font-family: Arial;
color: grey;
font-size: 12px;
line-height: 1.1;
letter-spacing: .5px;
}
.right_chat {
right:0;
}
.chatbox {
position: absolute;
width: 400px;
padding: 15px;
padding-top: 5px;
border-radius: 0px 0px 30px 30px;
background-color:rgba(0, 0, 0, .4);
grid-template-columns: 500px;
display: grid;
}
.bubble {
position: absolute;
max-width:200px;
padding: 15px;
padding-top: 10px;
border-radius: 0px 30px 30px 30px;
background-color:rgba(0, 0, 0, .3);
}
<div class="chatbox">
<div style="height:200px"><p class="bubble chattext right_chat" id="">This should be right > please use htnl code on this div to align</p><p style="margin-top:70px;" class="bubble chattext">stay left</p></div>
</div>

Position div in the middle on the right side of another div

I think this is what you're looking for. I used flexbox and was able to do this in 2 lines :)

I also tidied up the HTML/CSS. Going forward you want to separate them to make it easier to read and edit.

#mainContainer {  background: red;  width: 100px;  height: 100px;  margin-top: 50px;  text-align: right;}
#singleOptions { height: 100%; background: black; float: right; display: flex; align-items: center;}
#myObject { width: 10px; height: 10px; background: blue;}
<div id="mainContainer">  <div id="singleOptions">    <div id="myObject"></div>  </div></div>

How to place a div on the right side with absolute position

yourbox{
position:absolute;
right:<x>px;
top :<x>px;
}

positions it in the right corner. Note, that the position is dependent of the first ancestor-element which is not static positioned!

EDIT:

I updated your fiddle.

How to align element to right side of div box?

There are a few ways to accomplish this. One way is to add an automatic left margin to the tree:

margin-left: auto;

Another option would be to apply float: right; to the tree, which may or may not result in the content flow you need.

And finally, my recommendation honestly would be to just use flexbox.

Margin Example

#foo {    display: block;    width: 500px;    height: 500px;    background: #5e5e5e;}
#tree { width: 100px; height: 30px; background: #000000; margin-left: auto;}
<div id="foo">    <div id="tree">Some Text here</div></div>

Position two div containers on the left and right side respectively, and each div has a gap in between

Either you position your elements (e.g. as you did with position: fixed;) or you float them. Both at the same time is not possible.

Here is an example of only floating the elements (I just removed the position rules):

var getElement = document.getElementById('rectTopNearestBooth1');getElement.style.width = "30%";getElement.style.height = "200px";getElement.style.borderStyle = "solid"getElement.style.background = "red"getElement.style.marginLeft = "10%"getElement.style.cssFloat = "left"
var getElement2 = document.getElementById('rectTopNearestBooth2');getElement2.style.width = "30%";getElement2.style.height = "200px";getElement2.style.borderStyle = "solid"getElement2.style.background = "red"getElement2.style.cssFloat = "right"getElement2.style.marginRight = "10%"
<div id="rectTopNearestBooth1">  <div>    <img id="topNearestBoothLogoIcon1" />  </div>  <div id="topNearestBoothName1"></div>  <div>    <img id="nearestBoothTimeIcon1" />    <div id="nearestBoothTimeText1"></div>  </div>  <div>    <img id="nearestBoothDistIcon1" />    <div id="nearestBoothDistText1"></div>  </div></div>
<div id="rectTopNearestBooth2"> <div> <img id="topNearestBoothLogoIcon2" /> </div> <div id="topNearestBoothName2"></div> <div> <img id="nearestBoothTimeIcon2" /> <div id="nearestBoothTimeText2"></div> </div> <div> <img id="nearestBoothDistIcon2" /> <div id="nearestBoothDistText2"></div> </div></div>

DIV to the right side of the page

There are multiple approaches to this, and you might have to experiment what works for you.

First of all, there's the position property, if you wanted to place the navigation to the right you'd get:

#navigation
{
position: absolute; /*or fixed*/
right: 0px;
}

This approach is very situational and might break. In some cases even breaking the entire lay-out. Best practices dictate to use this one as little as possible, but sometimes there's no other choice.

The other way, which may or may not work, again, is to use the float property

#navigation
{
float: right;
}


Related Topics



Leave a reply



Submit