Menu
I have the following code:
<div style="float: left; width: 100%;"> <label style="float: left;">ABC</label> <input style="float: left; font-size: 0.5em;" type="button" onclick="addTiny(0,'Question_Text'); return false;" value="▼" title="Editor" /> <input style="float: left; font-size: 0.5em;" type="button" onclick="remTiny(0,'Question_Text'); return false;" value="▲" title="Hide" /> <div class="adm"> <textarea rows="2;" style="width: 100%" class="text-box multi-line mceEditor"> abc </textarea> </div> </div> My problem is that the div with class adm floats to the left and so goes on the same line as the label and two input buttons. Is there a way that I can make this shift away from floating?
594
We can use CSS clear property to specify the side of the floated element which is to be cleared of flowing content.
To fix this problem, the footer can be cleared to ensure it stays beneath both floated columns. Clear has four valid values as well. Both is most commonly used, which clears floats coming from either direction. Left and Right can be used to only clear the float from one direction respectively.
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).
If you'd like to position an element to the right, you have it float right, and the same thing goes for the left. It sounds simple enough. For those that have suffered from trying to lay out an image within a text document on Microsoft Word, the float property might remind you of the text-wrap feature.
A standard approach is to add a clearing div between the two floating block level elements:
<div style="clear:both;"></div> Sometimes clear will not work. Use float: none as an override
20
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
