DIV into another?
Permalink
Ok, this is what I've done:
And it works :)
Now. I'm trying to put ALL of that into a border like this:
And it doesn't work :(
Is there any restriction to put a <div> into another one like this?
Apparently it is. How do I fix that??
Thanks for any help
<div style="float: left; width: 33%;">---Text column1---</div> <div style="float: left; width: 33%;">---Text column2---</div> <div style="float: left; width: 33%;">---Text column3---</div>
And it works :)
Now. I'm trying to put ALL of that into a border like this:
<div style="border-color: #f1c232; border-radius: 5px; border-style: solid; border-width: 1px; padding: 5px;">ALL PREVIOUS CODE</div>
And it doesn't work :(
Is there any restriction to put a <div> into another one like this?
<div> <div> </div> </div>
Apparently it is. How do I fix that??
Thanks for any help
Try adding width: 100% to the container div
Thank you for your answer. Still doesn't work though... :(
Try this:
You have to add a 'clearing' div after the floated divs to make sure the surrounding div grows to encompass all the internal divs
Demo:http://jsfiddle.net/yKD9e/1/
Further reading:http://css-tricks.com/fluid-width-equal-height-columns/...
<div style="border-color: #f1c232; border-radius: 5px; border-style: solid; border-width: 1px; padding: 5px;" id="container"> <div style="float: left; width: 33%;">---Text column1---</div> <div style="float: left; width: 33%;">---Text column2---</div> <div style="float: left; width: 33%;">---Text column3---</div> <div style="clear:both"></div> </div>
You have to add a 'clearing' div after the floated divs to make sure the surrounding div grows to encompass all the internal divs
Demo:http://jsfiddle.net/yKD9e/1/
Further reading:http://css-tricks.com/fluid-width-equal-height-columns/...
Another thing for you to try is to add float:left; to the CSS of your containing DIV, like so:
<div style="float: left; border-color: #f1c232; border-radius: 5px; border-style: solid; border-width: 1px; padding: 5px;"> <div style="float: left; width: 33%;">---Text column1---</div> <div style="float: left; width: 33%;">---Text column2---</div> <div style="float: left; width: 33%;">---Text column3---</div> </div>
That works but you might not want to container div to float left.
I've also had luck adding 'overflow:auto' to the container div
I've also had luck adding 'overflow:auto' to the container div
It works!!!!!!
Wow guys, you're my heroes!
Thank you very very much
Wow guys, you're my heroes!
Thank you very very much
