Menu
I have a div containing several other divs with setting float:left. Now I want a frame around all of them, so i put a border on the parent div, but the floating ones "flow" out of the frame...
CSS:
.rendering { padding-left:10pt; border-width: 1px; border-style: solid; } .column { float:left; padding-left:10pt; } Html:
<div class="rendering"> <div class="column"> <img class="ImagePlugin" src="some-image"> </div> <div class="column"> <span class="phone">999</span> <span class="name">Assange</span> </div> </div> What can I do (in CSS) to keep them inside the parent frame?
370
Just add overflow: auto; to the <ul> . That will make it so that the text doesn't leak outside of the UL. However, depending on what you're doing, it might be easier to just make the <li> display: inline; . It totally depends on what you're doing!
For width it's easy, simply remove the width: 100% rule. By default, the div will stretch to fit the parent container. Height is not quite so simple. You could do something like the equal height column trick.
No, you cannot insert a div directly inside of a table.
add overflow: hidden to your parent <div> - http://jsfiddle.net/5AVA8/
.rendering { padding-left:10pt; border-width: 1px; border-style: solid; overflow: hidden; } You're not clearing the floats. If you change your code to this it will solve your problem.
.rendering { padding-left:10pt; border-width: 1px; border-style: solid; } .column { float:left; padding-left:10pt; } .clear { clear: both; } <div class="rendering"> <div class="column"> <img class="ImagePlugin" src="some-image"> </div> <div class="column"> <span class="phone">999</span> <span class="name">Assange</span> </div> <div class="clear"></div> </div> See the example I've set up here - http://jsfiddle.net/spacebeers/RQNDr/
For more information on the clear property - http://css.maxdesign.com.au/floatutorial/
44
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
