One of the best and upcoming alternatives to float style layouts in CSS in the flexbox module that is new in CSS3. This allows you to create dynamic or set width layouts very easily. The flexbox module is called by setting the display attribute to box. From there you set the box-flex attributes of the containing elements equal to what amount of their parent you want them taking up. This sounds a little confusing so lets look at some code.<\/p>\n
\n#contain {\ndisplay: box;\ndisplay: -webkit-box;\ndisplay: -moz-box;\n}\n\n.box1, .box3 {\n\tbox-flex: 1;\n\tbackground: yellow;\n}\n\n.box2 {\n\tbox-flex: 2;\n\tbackground: red;\n}\n<\/pre>\n\n<div id=\"contain\">\n\t<div class=\"box1\">\n\t\tTakes up 25%\n\t<\/div>\n\n\t<div class=\"box2\">\n\t\tTakes up 50%\n\t<\/div>\n\n\t<div class=\"box3\">\n\t\tTakes up 25%\n\t<\/div>\n<\/div>\n<\/pre>\nAs you can see, setting the box-flex value to how many \u201ccolumns\u201d you want each div to take up. While it does not actually use columns, it more like what percentage you want it to take up. This will be fluid unless you set a specific width for the container. <\/p>\n