layout
Download the slides for my presentation on CSS3 Layout for the In Control 2013 Orlando conference, as well as get links to related resources on flexible box layout, grid layout, and other new CSS3 layout-related modules that can be used as alternatives to float layout. Today I spoke at In Control in Orlando on CSS3 Layout. For a decade we’ve been using floats for creating CSS layouts, and while they’re still the best choice for creating most multi-column designs, we’ve all been frustrated by their quirks and limitations. So in this presentation, I talked about some of the new and exciting CSS layout techniques that are either working right now, right around the corner, or a little ways down the road. I focused on how Grid Layout and Flexible Box Layout (aka Flexbox) will be able to be used in the future to create layouts, but also how to use Flexbox in practical ways as a progressive enhancement technique for the layouts you’re crafting today.
CSS3 Layout presentation at In Control Orlando
flex-box
grid-layout
display: inline-block et les espaces indésirables
La valeur inline-block de la propriété display est à la mode, même si elle demeure encore trop peu connue et mal utilisée . Elle offre de multiples avantages dont le principal est de pouvoir disposer des éléments les uns à côté des autres, tout en étant dimensionnés et sans les retirer du flux.
Usually when you want a horizontal list, you need to use float in the CSS code to make it work, with all its drawbacks. However, there is an alternative with display: inline-block . Problems with f loat
CSS display: inline-block: why it rocks, and why it sucks
Download this layout (25kb zip file). Percentage dimensions of the holy grail layout
The Perfect 3 Column Liquid Layout: No CSS hacks. SEO friendly. iPhone compatible.