CSS Float set to right but floating left

Question

On this page: http://sneakersinsight.com/xml/adidas-nmd_xr1

As you can see the twitter feed is sitting right next to the photo where as I am trying to get it to float to the right side of the page with the same spacing as the photo has to the left.

The twitter feed's css looks like this:

.preview-twitter {
margin: 0;
padding: 0;
position: relative;
float: right;
right:0;
margin-top: 5%;
margin-bottom: 3%;
width: 40%;
padding-top: 1%;
padding-bottom: 1.38%;
display: inline-block;
background: #373737;}

The left photo's css looks like this:

.item-preview {
position: relative;
margin-top: 5%;
margin-bottom: 3%;
left: 4%;
width: 40%;  
border: 10px solid #373737;
border-width: -moz-calc(50% - 10px);
border-width: -webkit-calc(50% - 10px);
border-width: calc(50% - 10px);
display: inline-block;
padding: 0;}

They're both contained in a div, of which the css is:

.preview-wrapper {
display: flex;
position: relative;
overflow: auto;
max-height: 42vw;
min-height: 42vw;}

Please let me know if you need any other information to help.

Thanks!

As per the computation, it doesn't have any floats. Weird. Did you check out the computed value for `.preview-twitter`? — Praveen Kumar Purushothaman, Dec 03 '16 at 23:01
@PraveenKumar I hadn't thought to but yes you're right, that is really weird. Any ideas what might be causing this? — Ashley, Dec 03 '16 at 23:03

score 2 · Accepted Answer · answered Dec 03 '16 at 23:02

It's because the parent has:

display: flex;

Remove the display: flex, which also answers why float wasn't applied to the either children.

You need to remove the flex in two areas for .preview-wrapper. Both are in http://sneakersinsight.com/css/styles.css on line 262. For some reason, it's not two, but your stylesheet is being loaded twice. Please check that as well.

CSS Float set to right but floating left

1 Answers1