design help
hey there, i'm wondering how i would be able to create an overlap design as seen here where the image is a 50/50 split between inside and outside the black div element. i've attatched a codepen of what i've got so far (for mobile view). Anyone have any tips on how to achieve this?
https://codepen.io/deerCabin/pen/mdQBjag
18 Replies
Do you want the image to cut 50/50 of the black div showing the currency?
https://codepen.io/myntsu/pen/xxQPRYG
Here you have an example.
There's many ways to do it, but this is one of them.
ah so for each "product" container i'd have to have a before or after psuedo class of the company icon container?
sorry, what do you mean?
It could be, you can do it with a regular div as well.
There's multiple ways of achieving it.
the site is also responsive so the one column of nike trainer boxes turn into two when it reaches tablet size etc, so would regular divs be the way to go as i'm making a grid container around them?
You could do either way.
Like I mentioned, there's many ways of achieving it.
Above's example is using a
::after, could be a ::before too.I couldn't get your objective
i've experimented with it and came up with something that sorta works but even that comes with an error 😅
the black box container holds the brand logos and nike shoe boxes too with a
max-height property set on it, but it doesn't seem to recognise the end of the container where the boxes end but rather where the max height property ends, which makes sense of course, so when i add a new section it appears underneath the black box rather than underneath the shoe containers as shown here. For this specific design i'm going to try to utilize divs but am just completely confused about how to go about the design. I've updated the codepen if that helps.
https://codepen.io/deerCabin/pen/mdQBjag
This happens for one reason.
Since you pulled each of the element's inside the products section out of the flow, then the whole products section becomes 0 height, 0 width.
That's why the footer is sitting there.
so i make the products div a height of 100%?
The width of the section is determined by the tag, in this case <section> that comes with
width: 100% by default, and the height is set to auto, and the height is evaluated based on the content itself.
height: 100% wouldn't do anything.ah yeah because i've set the max width the content is what's in the black box, i see now
The issue is here:
The height is being forced.
That's why the footer is sitting at that exact position, because it won't grow higher than that.
If you want to keep that black box and the elements under neath, you need to make a div just for the black-box, and let the section's offer to naturally expand.
Usually it's not good to fixate heights, unless you know what it is for.
ah i see i see, so from what you've said, if i keep the brand logos div and shoe box div wrapped in the same container, remove the fixated height on the contaienr, make the container holding both of them
position: relative; and have a seperate div for the black box as you've said with position: absoloute; and a z-index: -1; then position it at the top of the container, that'd do the trick sufficiently?Well, in this particular situation, trying would be better.
Give it a try, and let me know how it goes :)
yeah that seems to have worked perfectly 🙂
thank you for your help with this, you must see me in this channel frequently and it must get annoying having to explain basic things constantly 😅, some things are a little difficult to grasp at first look but after explanation etc become easier
That's completely fine. This is the purpose of this channel, for people to ask, learn and help 
it up.
it up.will do! starting to love css ngl 😅