Menu
Example of the problem at: http://jsfiddle.net/xZmFg/4/
Surely there is a way to get the description to immediately follow the inputs (below, not to the right) and not end up below the menu...
I realise that with 'float' you are breaking out of the flow of the content, but isn't there a way to only apply to the space inside of the parent container?
737
To clear a float, add the clear property to the element that needs to clear the float. This is usually the element after the floated element. The clear property can take the values of left , right , and both . Usually you'll want to use both.
Adding a clear element after the floating element(s) is the most common way people use to clear floats in CSS and you might be implementing this thing in your markup already. In this technique, we basically use a clear element to clear floats of the siblings.
Note: Elements next to a floating element will flow around it. To avoid this, use the clear property or the clearfix hack (see example at the bottom of this page).
The short answer: clear: both. Floats work really well in small cases like when there's an element, such as a button, that you'd like to move to the right of a paragraph. But the real issue arises when you start using floats to lay out entire web pages. And the reason for that is: floats are not meant for layouts!
You can have your description's and form inputs' parent element contain all their floats using overflow: hidden:
.content-box {
overflow: hidden;
}
This way, they won't interfere with the floats on the sidebar elements.
jsFiddle preview
154
You can float the container around the inputs and your paragraph:
.content {
float: left;
}
And then drop the clear: left; on .description as it doesn't do anything (or leave it in).
http://jsfiddle.net/ambiguous/QdY44/
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
