In this session we show how to fix a display problem using a clearing div inside of a collapsing container in a 2 column Contact 7 Form. The problem happens because there is div collapse with the floating columns. Any time you’ve got floating columns, you need to make sure that those columns are inside of a container that is self clearing.
BYOB Member: I’m working on a contact form right now and I’m using contact form 7 and I’ve put it into two columns but it’s not formatted correctly…
Rick: Can you show me the URL?
BYOB Member: Yeah, let me give that to you really quick. Okay I sent it to you.
Rick: Okay. So you’ve got a form that you want to be in two columns… oh, is it this here?
BYOB Member: Yeah, so the problem is that there’s one spot where the email is that’s not two columns because I don’t have another thing for that space but dancer name and dancer last name is also two columns and it’s just messing things up. If I had another thing to put with email then it would be fine but I don’t, so…
Rick: Okay, so you’ve created two columns. Then you’ve got this other, the second column, column left. And then you’ve got the third one and that’s the email? We’ve also got the fourth one. Okay I see.
So you’ve got a column left, if you could clear both that one right there… that might do it. Hmmm, that doesn’t do it does it?
Using a Clearing Div
How about if you add a clearing div under this? Let’s edit as HTML, email, span, etc. Okay, now let’s edit as HTML and then down here we add a clearing div:
What happens if we do that? Okay, so you see how that works?
Member: Oh… where do I put that?
Rick: I would put that directly below your email box so it’s just it’s this right here. So you’re going to put a clearing div…although let me just fix this like that. So this is the standard old style clearing div. Essentially what you do is you put an empty div inside the box or inside the div that you want to be self-clearing. And it’s just
Just like that so you’re using the HTML type CSS with the closing div. I’m going to put that in the chat window for you.
Where to Add Clearing Div to the Form
Now I’m going to let you show me your screen and we’ll look at your form and I’ll show you where to place that.
I’ll make you the presenter. Okay, so there you are inside your form so…Actually I would put it one down. Well actually no, you’re missing a closing div here. So you’ve got div id=”contact-columns”.
Then what I would do is take this clearing div and I would put that in between those two divs, between the two closing div. So that’s making contact columns self clearing.
BYOB Member: Okay.
Using Page ID and Class Names
Rick: Now the other thing is though that you should not be repeating your ID. So you shouldn’t have an div id=”contact-columns” and another div id=”contact-columns”. Those should all be class names. You can repeat a class name over and over and over again on a page but IDs should only exist once per page. So you should change all those IDs there to class.
BYOB Member: And leave it as the same class of contact-column?
Rick: Yeah, we should all say div class=”contact-columns” rather than div id=”contact-columns” because you should only use IDs once on a page.
BYOB Member: Okay and then can I have this other class of column-left right beneath another class of content…?
Rick: Of course. Yeah.
BYOB Member: Okay. Let me see if this works the way…
Review the Customized Form
Rick: You’re going to need to reload it and go back down there and fix it again… because it didn’t save that. Okay so now let’s view it.
Member: Oh my gosh! Awesome, thank you!
Floating Columns and Self Clearing Containers
Rick: So the issue you’re having here is div collapse which happens when you float and so you’ve got one column that’s floating left and it’s inside of a container. That container is not self clearing, so that container collapses which allows the other container below it to jump up.
Rick: And so any time you’ve got floating columns, you need to make sure that those columns are inside of a container that is self clearing. And you can do that the way I just showed you which is to put a clearing div inside of the container or you can do it with CSS using the after pseudo-class and then that little content system that I taught in the class you took.
Member: Okay, thank you very much.
Rick: You’re welcome.