I have a problem with my layout and can’t find a solution.
The following code works fine but due to constraints of the j2ee platform I’m using I need the ‘field’ <span> to be enclosed in a <div>. As you’ll see if you surround these <span>s with the field class in a <div>, this breaks the layout resulting in the field span’s padding overlapping the parent ‘wfVarContainer’. I’m hoping someone most knowledgeable than I can fix this and explain what’s happening…
It’s not really clear what your question is, or what you are hoping to see. Padding is not an issue here. Have you tried setting the span to display: inline-block?
All this seems a bit weird, though, as presumably you want form elements here, rather than spans?
Well it’s on the same line because the parent div is now a floated element thanks to the .wfVarContainer > *{} rule that floats every direct child. Not sure why you have that. You shouldn’t have a rule like that affect every child like that, especially since it’s float. That’s a big change. The div can’t be floated.
Now the span is not accepting hte height and width requirements because your .wfVarContainer rule only selects the direct children. The > makes it target only direct children. In your working example, span is a direct child. Now that the div is in the way, it’s not working. So since the span is no longer floated, it is now an inline element adn inline elements don’t accept width/heights. So it all stems from that one rule messing everything up.
I’m hoping to see that which appears in the first link. Yes, this is the ‘view’ mode. In ‘edit’ mode the <span>s would indeed be replaced by <input>s…
I use floats because I need some of these fields to be on the next line which I can achieve with a simple ‘clear: float’. I tried using display: inline-blocks instead which display:block as a ‘carriage return’ but for reasons I don’t understand, elements after the block stayed on the first line.