Attach div to the right of another div

Question

I have a div which is like a container and inside of it there are 2 images. One image is on the left side of the div and the other is on the right. My container is Bootstrap's container

Both of them are wrapped with a div, and that div's position is fixed.

My problem is that I can't locate the right image to be attached to the right side of the conatiner. I tried the float and the right properties but they not give the expected result.

How can I attach div to the right of another div?

Anuradhapura

can u show your code or jsfiddle – Burlesque

@RohitAzad jsfiddle.net/mqwbcLn8/1 (In my website the element is an image and not text) – Anuradhapura

One image is on the right side of the dive and the other is on the right???? – Professor

@AndreuRodrígueziDonaire Sorry. I fixed the question – Anuradhapura

you can use :after pseudo class – Robbi

@RohitKumar How the code should look like? – Anuradhapura

you can try col-md-offset inside row class – Heartworm

@Anuradhapura div:after { content: url(linkToImage); } I'm a little not sure about the syntax, just not sure about how to add images using :after but I saw the code somewhere here on SO, so if this don't works then try googling on how to insert image using :after. – Robbi

elements with fixed position will be relative to viewport. – Grouch

Answer 1

https://jsfiddle.net/mqwbcLn8/5/ fixed Nem's code.

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 are always sticked together. Then you just move the wrapping div and they both keep together. I added pink background so you can see that you don't lose any space with that solution.

The wrapper is just for the position and to keep the other two elements in place. Like this you can position those two elements as you wish, while they always stay together like this.

Appellation

Floating works as well. The OP was not entirely clear but I took the description to mean the left element sticks to the left, right element sticks to the right, and if the container becomes larger than the 2 inner divs combined there would be space between them. – Dodds

Thats the problem with questions that aren't really clear... :) – Appellation

Answer 2

If I'm understanding your problem correctly, you have a large container with fixed position. A left div on the inside of the container that sticks to the inside left, and a right div inside the container that sticks to the inside right?

You can just set the display to inline-block which will force them side by side, and then use left/right to position them within the container:

HTML:

<div class="container">
    <div class="left-element">
        left
    </div>
    <div class="right-element">
        right
    </div>
</div>

Your css would just 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/

Dodds

The left and the right elements should have a fixed position – Anuradhapura

position: fixed will put an element fixed relative to the window, not to a parent container I dont believe. The above will "fix" the left and right elements to a fixed position within the container element. What is your reason for wanting the left/right elements to have position: fixed? – Dodds

Here is an example from another thread: jsfiddle.net/T2PL5/85 ... Instead of display, you can also float left/right, and position: fix the left inner container, but the flow screws up if you try to fix both the left and the right divs because they'll both be relative to the window (not the container) and overlap each other – Dodds