Attach a div to the right of another div
I have a div that looks like a container and there are 2 images inside it. One image is on the left side of the div and the other is on the right. My container is a Bootstrap container
Both of them are wrapped in a div, and div position
- fixed
.
My problem is that I cannot find the correct image to be attached to the right side of the conatiner. I tried properties float
and right
, but they don't give the expected result.
How can I attach a div to the right of another div?
source to share
https://jsfiddle.net/mqwbcLn8/5/ fixed code Nem.
HTML:
<div class="container">
<div class="left-element">
left
</div>
<div class="right-element">
right
</div>
</div>
CSS
.container {
position: fixed;
left: 350px;
padding: 0;
margin: 0;
background-color: #ff00ff;
}
.left-element {
background: green;
display: inline-block;
float: left;
}
.right-element {
background: red;
display: inline-block;
float: left;
}
You float both elements, so they always stick together. Then you just move the wrapper div and they both stick together. I added a pink background so you can see that you are not wasting any space with this solution.
The wrapper is only for position and for keeping the other two elements. This way, you can place these two elements as you wish, while they always stay together.
source to share
If I understand your problem correctly, you have a large fixed position container. The left div on the inside of the container that sticks to the inside on the left, and the right div inside the container that sticks to the inside on the right?
You can just set the display to inline-block, which will force them side by side, and then use left / right to place them in the container:
HTML:
<div class="container">
<div class="left-element">
left
</div>
<div class="right-element">
right
</div>
</div>
Your css will look like this:
.container {
width:500px;
position: fixed;
}
.left-element {
background: green;
display: inline-block;
position: absolute;
left: 0;
}
.right-element {
background: red;
display: inline-block;
position: absolute;
right: 0;
}
jsfiddle: https://jsfiddle.net/mqwbcLn8/3/
source to share