Hi,
I have a problem with positioning 3 images in one container div. I want to set them at the top of the page but I cannot do it. I’ve been trying for a long time and still struggle with it.
Can somebody look at my code and check it out what is wrong?
link to my codepen io
daniel-bugiel/full/yZXWKj
If you want to organize divs using flex you can order your elements in css or you need to move your html elements in the order you want them to appear.
If you want to order your components with flex the your wrapper has to display: flex as well.
The easiest way to move the .box class to the top is move the html elements to the start of the wrapper.
Yea, but when I set te “box” at the beginning, the rest of content moves down and cannot set them up like before.
I understand, are you just trying to put it at the very top in a row or are you trying to put it in the same line as your header content in a column like it is now.
I’m trying to put them as a column in the same line as my header content right now.
For this case grid would be a better fit.
But if you definitely want flexbox, then you need this structure:
<div class="wrapper">
<div class="another-wrapper">
<!-- Logos -->
<div class="box">
...
</div>
<div class="another-another-wrapper">
<!-- Branding -->
<div class="branding">
...
</div>
<!-- List -->
<ul class="list">
...
</ul>
<!-- Newsletter -->
<div class="Newsletter">
...
</div>
</div>
</div>
...
mindstomedia/pen/yZXmva
Look, what I want to achieve (if it’s possible of course).
Red line - is a div’s border from these 3 pictures
White line - is a div’s border form my content.
I want to make these borders (where I can change position) like this:
Blue border - for these 3 pictures
Black border - for my content.
Yes, may be grid will be better!
Yup, but input with button is still too low. I should think about grid indeed.
In what kind of projects FlexBox is useful?
I’m gonna try it! In what kind of projects FlexBox is useful? Cause I have just started my journey with HTML and CSS and cannot figure it out yet, what should I use and when.
I’ve used flexbox on a whole website, loved it. Great way to make a responsive website.
In my case it was an existing website, old (2007) and not responsive. With flexbox I was able to keep the old elements.
I think it’s possible with your design as well. I’m trying something in codepen. I’ll let you know if I succeed.
Look other videos on that channel too.
This is because the input button element is outside of the parent that the branding element is in. It must be put in the parent.
What you need to understand is how to organize parent and child with flex-box to achieve your desired layout.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ > Check out this flex-box guide
@dannyb I agree with @mindstomedia, you need to organise parents and children. I’ve changed your pen into something that may look like what you want. But it’s not perfect. It’s not very responsive.
Is this what you had in mind?
Oh, and @dannyb, if you put
* {
border: 0.5px solid red;
}
on top of the css file, you can see what you’re doing with the boxes. It helps to see the parents and children, margins, paddings, etc. You can take it out when you’re finished or when you want to see the result. Just put it back in again to have a good look at things.
And a guide to flexbox:
Thank you so much guys for help. I appreciate it 
It’s gonna be a long night haha
Yes, flexbox is great, but not easy. I had many fights with it before flexbox and I became friends. 
Indeed! That’s why I push myself to make more and more exercises and learn by my mistakes 
Yeah flexbox can make your head explode but its its awesome when it does what you want. I recommend you play around with flexbox outside of this project with many simple coloured divs and simple text and organize them in many different ways, this really helped me understand how to structure and how different flexbox css elements work.
I had a whole, real, website to make mistakes with. And when I worked on it I’ve never made so many mistakes in such a short period of time in my entire life! And I loved every minute of it!
Me, who doesn’t like to make mistakes. 