- This topic is empty.
May 6, 2015 at 4:11 am #201728
I have a question on putting a div between floating elements in the code without the float to break. See image that illustrates what I would like to do here!
Is that possible?
Well, I know it’s possible if the div is absolute placed, but as I have more content underneath the divs, I would like the none floating div to push the content down instead of being placed on top of it (I hope you understand, hard to explain).
Does anyone have a suggestion on how to do this?May 6, 2015 at 4:20 am #201729
I’m not at all clear on what it is you are trying to do.
What would the HTML for this be? Just 4 divs in a wrapper?
Trying to figure out a use case for this that can’t be solved by changing the structure.May 6, 2015 at 6:47 am #201742
Ok, so the html for this is just four normal divs,
nr 1,3 & 4 with float and nr 2 without.. like this:
<div style=”float: left”>Content <a>toggle button</a></div> <div style=”float: none”>Toggle content</div> <div style=”float: left”>Content</div> <div style=”float: left”>Content</div>
The thing is, I have a jquery toggle in div 1, with a button to toggle show/hide on div 2. And I don’t want the whole float to break when hitting the button, I just want the div 2 to appear below. (and they are in a foreach loop, so I can’t really place div 2 after the whole loop, then it looses its content).
Hmm.. don’t know if this made it any clearer?? :SMay 6, 2015 at 6:50 am #201743
Perhaps a Codepen Demo would be better.May 6, 2015 at 7:06 am #201747May 6, 2015 at 7:40 am #201751
Yeah…hmmm. I’m still not clear one what you are trying to do but I’m pretty sure you’re not gonna do it with that structure and floats.
I guess I need to see what this is supposed to look like at each stage. Do you have design images.
It feels like an accordion type thing but it’s hard to tell.May 7, 2015 at 1:18 am #201794
I’ve updated the pen now. The first div line is how it’s behaving right now, and the second is how I want it to behave (but can’t use position absolute like this, because I want the content underneath to be pushed down).. hmm.. I’d be soo thankful if someone could help me out here!May 7, 2015 at 4:39 am #201797
There’s more than a few issues with your Codepen.
Firstly, classes can’t be or start with a number so you’ll have to fix that.
Secondly, please abstract the inline styles to your CSS section as classes or something…it makes it very hard to read your code as it currently is.
As I said, it’s very hard to figure out what you are trying to do especially with everything labelled as “Content”…do you have design images or not?May 7, 2015 at 5:33 am #201800
On thinking about it…are you trying to do something like thisMay 7, 2015 at 6:03 am #201801
well I just made the code for you to understand it better, that’s why the divs have their names like that. They are named dynamically from the database, so didn’t really know what to call them when doing this code. The same on the css.
What I want to do is something like you posted. BUT; the the white boxes needs to be directly after its “parent section” as the content is taken from the same loop. I’ve updated the Codepen demo again, maybe it makes you understand better what I want. The main thing is that I want the “main content” to be pushed down whenever the div-2 is visible.
- The forum ‘CSS’ is closed to new topics and replies.