Normal div between floating divs without break

[Corneliatt]

Hi!

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?

[Paulie_D]

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.

[Corneliatt]

Hi!

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?? :S

[Paulie_D]

Perhaps a Codepen Demo would be better.

[Corneliatt]

Hi!

Yes, probably better ;)

Have a look here:
Codepen Demo

[Paulie_D]

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.

[Corneliatt]

Hi!

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!

Codepen Demo

[Paulie_D]

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?

[Paulie_D]

On thinking about it…are you trying to do something like this

http://codepen.io/Paulie-D/pen/mJeoaG/

[Corneliatt]

Hi,
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.

[Author]

Posts