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
Vertical Scrolling in iOS Not Smooth
How to Make Double Lines Border in CSS, Each Line in Different Color, Without Using Background Image
Semantic Grid with Bootstrap + Less Mixins ¿ How
Using Grunt Grunt-Contrib-Less) for Compiling Bootstrap 3.1 Less in Visual Studio 2013
How to Select First Img Tag in a Div with Many Img Tag
In CSS How to Change Font Size of H1 and H2
HTML Special Characters in CSS "Content" Attribute
Changes in CSS Files Are Not Reflected After Deployment
Height: Auto on Svg Not Working
CSS 100Vh Is Too Tall on Mobile Due to Browser Ui
Twitter Bootstrap - Fixed Layout with Scrollable Sidebar
How to Create a Light Oval-Shaped CSS3 Shadow
Differences and Similarities Between Svg and CSS3 Animations
Getting Inline-Block Element's Height to Fill the Parent
CSS to Make Images Resize and Fit Any Screen the Same