Forums

DIV into another?

Permalink
Ok, this is what I've done:
<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
 
ConcreteOwl replied on at Permalink Reply
ConcreteOwl
Try adding width: 100% to the container div
ednella replied on at Permalink Reply
Thank you for your answer. Still doesn't work though... :(
mhawke replied on at Permalink Best Answer Reply
mhawke
Try this:

<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/...
juliandale replied on at Permalink Reply
juliandale
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>
mhawke replied on at Permalink Reply
mhawke
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
ednella replied on at Permalink Reply
It works!!!!!!

Wow guys, you're my heroes!

Thank you very very much

This website stores cookies on your computer. These cookies are used to improve your website experience and provide more personalized services to you, both on this website and through other media. To find out more about the cookies we use, see our Privacy Policy.