I need some help with something. I’m trying to get an understanding on creating containers and positioning those containers to create a website layout. Some of these containers I also put inside other containers. I am aware things like flexbox and grid are there to help make it easier as well as the frameworks available like bootstrap. I just really want to understand pure CSS better before using the newer technologies.
Basically, I would like to know how to position these “containers” wherever I want using floats and clears. I want control over positioning elements like a guy or girl has control over a lover that’s obsessed with them. You know? Like you say jump and that person asks “How high? How many times? Big or small jumps? I’ll do it forever!”
Where I am right now I can do a website layout decently after my breakthrough today. Praise God. However it is when I position one container inside another container that I can’t get it to where I want it to be.
I’m trying to make the layout on this page. I am having trouble creating the layout for the third container which has the other containers inside of it.
I feel like I’m so close to understanding positioning in CSS. I just need to get over this hurdle. Any help will be appreciated. Thank you!
What I was doing here was trying to practice building layouts. The thing that causes the most difficulty for me in CSS is positioning containers. So I thought make a bunch of blocks and try to move them around the page until I am comfortable. After playing with it for a bit I went on to try to make this layout: https://www.lucidchart.com/pages/templates/wireframe/ecommerce-wireframe-template
So if you look at the top of the wireframe from that link you will see there is a search bar and below it is links to departments etc and to the right is where you can sign in or go to your cart. If you look at my codepen that is the red div I made. I am pretty sure I can create the list (ul) for those links, do the search bar and style and position them but I was focused on the layout only because if I can’t get the layout down then I won’t be able to build the whole thing.
The blue div on my codepen is the section where there is a header and finally my green div is the container for the section of the wireframe where “welcome, sign in and create account” as well as popular departments, clothing and deals are. This is where I find myself stuck. For the life of me I couldn’t get the blocks I made to be in the position it was in the wireframe.
Finally, if you look at the bottom of my css file on codepen you will notice that I have some code in there that changes things if you replace box_3 to box_11 with them. So those I commented out are the “solutions” I got to after I watched a video. I was planning on continuing with it to see if it can give me the results I wanted when I saw your reply on my post.
I feel like the “solution” I came up with is not really an effective solution and more like a patch up job. I just really want to know how to make that third section (aka my green section) as I believe if I can do that I can basically begin to master CSS.
Sorry for the long post. Thank you for taking the time to help.
Edit: Also thank you for the resources. I’ll go check them out right now.