Moving container with flexbox

[casiowr]

Hello everyone,

My main problem is that I am not able to move container “#main-left” to the ‘right-top’ of container “#left” using FLEXBOX.
I hoppe u know what I mean.
So this blue container need to fix to top-right margin of red container.
I am asuming that it could be problem with main axis and cross axis…

https://codepen.io/adis-utovi/pen/MzOmLP

[Beverleyh]

I’m not sure what its supposed to look like, or how the other elements are meant to fall around #main-left, but does this behave more like you’d expect?;

#left {
  display: flex;
  flex-direction: row;
  justify-content:space-between;
}

It might be wise to provide a diagram of the overall main layout.

[casiowr]

Thank you Beverleyh for you answer, I got that resulet top-right, but my div #logo-search are moved. #main-left container is took spave of that div. My play is leave #logo-search as it is, but only mode blue container to top-right of red.

[casiowr]

This is how is supposed to look like my layout

https://imgur.com/a/1fisgAY

[Beverleyh]

Looking at the diagram, I’m not sure that I see the point in making #left a flex parent at all. Try removing that (let it revert back to a standard block-level div) and float #main-left to the right instead.

[casiowr]

Well, I am finally succeed to make layout like I wanted, I hoppe so.

Now I have an issue how to align this number ’01’ to be right side of the image, not below of image. Of course this need to be done with flexbox, not floats…

Second, I would like for this layout took column view when I watching from smalled screen. Need to be column, first .left and below .right section

This is my codepen of layout

https://codepen.io/adis-utovi/pen/ZmvaWm?editors=1100

[Author]

Posts