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?

9

2 Answers

fixed Nem's code.

HTML:

<div> <div> left </div> <div> 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.

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> <div> left </div> <div> 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:

3

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy