How can I have multi-column text flow in div for XHTML please? (if possible)
I'm looking for a cross-browser specification.
Thank you.
There is currently no cross-browser compatible HTML/CSS based way. People are working on it, see: http://www.w3.org/TR/css3-multicol/ but support is experimental.
You can try one of the many techniques documented pretty much all over the internet. Some quick suggestions:
The Perfect Multi-Column Stacked Liquid Layout
TUTORIAL: Multi-Column Layout Using CSS Float
EASY MULTI-COLUMN DESIGNS USING CSS 2.1 DISPLAY PROPERTIES
Related
I'm learning MUI, and I want to know experienced developers's opinions about choosing the best positioning option between the <Grid/> component from MUI or just use CSS3 Styling (Flexbox and Grid)
I used to work with CSS3 positioning, and it is fine and precise especially in responsiveness. I wanna know if <Grid/> has no problems with that.
Grid internally uses flexbox as mentioned in the official docs
here
So I learned about CSS grids today, and I had a question that I could not find an answer for. In my site I am creating, I used HTML tables as I did not yet know about css grids. Now that I have learned about them, I can see that grids are more useful and flexible in layout and style.
With the HTML tables, I can make it look perfect in a browser such as Google Chrome, but then I test it in FireFox and it slightly moves the divs around that I made.
If I used a grid system for a layout, and put all the content into that instead of using HTML tables, and then use the fr in css, would it keep the layout the same across web browsers? It would seem that way to me, since no matter what size of browser window or type of browser you are using, the fr keeps the grid to using 100% of the page size.
I apologize if what I am asking doesn't make too much sense. I tried to word it as best I could.
Yes. It will look the same if the browser supports grid layout.
https://caniuse.com/#search=css%20grid
Now in the days of flexbox and grid, floats seem to be very unintuitive way of thinking about styling page layout (at least for me). My question is - what is the crazy logic behind floats?
If you find floats non-intuitive, it's because you're trying to use them for the wrong thing. See this diagram from the CSS 2.2 spec.
Try replicating that with flexbox or grid layouts.
First I want to reference this other question, which doesn't quite answer my question. I'm working on a web project which only intends to support evergreen browsers. We're used to using bootstrap, but it seems like we're pulling in a lot of unnecessary CSS Rules given our support matrix.
Are there good/any reasons to use the CSS float property instead of flexbox properties? Is using the float property considered deprecated, for lack of a better word?
To answer your question, float is still useful for its intended purpose: allowing content to wrap around an image or other element.
Some points to consider:
Jake Archibald claims that flexbox should not be used for page layout, due to the fact that content will be rearranged on the page during load on slow connections.
Chris Coyier points to some potential performance problems with too many elements with flexbox (though he is unable to replicate said problems)
Google Developers suggests using flexbox over older layout models
Please someone explain me css positioning properties in easy to understand plain english?
With examples.
I have been struggling to understand how css positioning work in creating a layout and alignment.
A quick search on Google has lead me to this: http://www.barelyfitz.com/screencast/html-training/css/positioning/
While there are many tutorials on CSS positioning such as
http://www.brainjar.com/css/positioning/
http://www.alistapart.com/articles/css-positioning-101/
http://www.tizag.com/cssT/position.php
http://www.mako4css.com/Tutorial.htm
The problem is that there are a number of ways to position elements on a page, you can use float, position relative divs with absolute nested divs, then you have margins and padding, as well as negative margins. Heights and widths in pixels percentages etc. It's not something to learn from a single tutorial but rather experience.
My suggestion to you is install Chrome and use the developer tool on a basic CSS layout, or FireBug in firefox to learn how CSS works on simple layouts, here you can find many styles of CSS layouts to play with http://www.maxdesign.com.au/articles/css-layouts/