how is this form can be between two divs
I don’t know how to achieve this particular space diva
36 Replies
easiest is to use linear-gradient for the background
if you set the endpoint of the first color to (almost) the same point as the start of the second one, you get that kind of line
Edit fiddle - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
Sorry if I asked the wrong question
I want the form to be between them two divs but the problem is the green div doesn’t stay with the same space when I move form the space will also gone
if you change your background on
.experience-parallel to
you should be good
you may want to teak the percentages a little, it looks more like 2/3rds rather than half, in your screenshoti think he means how the form is overlapping both divs
I'm 99% sure it's not
you fake it overlapping the other div by giving part of the div it is in, the background of the div below it
it looks like it's overlapping the next div, but there's no reason to break the flow like that if you can just fake it. There's no difference in the user experience, and it's much, much less likely to break or cause weird issues when the content changes
you could also use grid
(I agree that's what he's asking btw, just saying that the form is very, very likely not to actually be in two divs)
yeah that's fair enough
and whatever you want to do to make it actually overlap another div, is much less accessible and maintainable, and a lot more work than just setting up the gradients like this.
i don't think grid would make it less accessible right? i've don't think i've heard that, but i may be wrong. you'd just have something like
grid-template-rows: repeat(4, auto); and place the content in the corresponding rows and could probably set up a utility class for the overlapping for maintainability too. i may be wrong as i said though.hmm, maybe not less accessible
but still much more complicated
you'd have to layer two elements into the same grid cell, and that's just entirely unnecessary
When I overlap form I don’t get the empty spaces I want to achieve in the particular div I.e upper div
I don't know what you mean
i think they mean this
That's literally what this does though?
perhaps it's not too clear
the border is just there to show where the div boundaries are
Yes exactly
I appreciate you guys thank you
I am trying to figure this out thanks for putting input @Jochem @snxxwyy
Actually I tried out the grid method I recommended and it doesn’t work as I thought, might make a post about that
You could do something like this though https://codepen.io/b1mind/pen/xxvgvmK
Grid for layers/stacking is ❤️
obviously you could play with things too* size/padding/margin different. 😄
🤔 looking at the op image though if I was to have content in it I would want the extra template rows
i had something like this but the issue i ran into was the overlap of content
https://codepen.io/b1mind/pen/xxvgvmK updated 😄
I'd probably use a combo of Jochems and this 🤔 I don't like just having blank divs for the bg.
https://codepen.io/b1mind/pen/jOgBNNv Yea this feels nice
Would be so nice if we could just color grid cells and tracks >.>;;
oops I had two open... xD ok proper update
cause right doing absolute will still overlap even though its assigned to be in the track 🤔 not in the same flow xD
I’ll often use pseudo elements for backgrounds in my grid and assign it a cell
oooo thats a great idea.. Though I had issues with grid/psuedos in the past, there is some jank around how they work in grid
yea this crazy mess...
https://codepen.io/b1mind/pen/JjpLKyO
maybe I need to revisit 🤪
Agh really ?? What kind of jank have you run into ?
PS I love that you use Pug!! It’s awesome
its so nice for pens too xD
I should be using stylus too but 🤷♂️
grid tracks mainly, or combo of track and place ... I didn't leave myself notes 🤣 (this was long ago though could be a skill issue)
Sigh… grid tracks and rules . So annoying to try and make
Why stylus over scss ?
This is kinda tricky I want it responsive too
interesting, never done that. You mean like so?
https://codepen.io/MarkBoots/pen/zYgZGzG
Yes , although I tend to use named grid lines but yes the concept is the same!