At the moment I've got a div which is 1024px wide.
In that box are two CSS3 columns with text flowing automatically from one to the next.
However, I want to restrict the height of these two columns to 700px - once they are full I want 2 more columns with the same height to appear underneath them.
Is this possible?
OK. It is totally possible to achieve what I think you are about to build. However, if you want to do it by yourself, you will need a bit more then just CSS3 styles in place. You will need a fair amount of JavaScript as well.
Take a look at this Columnizer jQuery plugin (it can do the job)
Here's a sample site showing results of it's work: http://welcome.totheinter.net/autocolumn/sample10.html
Update on this:
The Adobe CSS Regions proposal mentioned by gimme5 looks excellent. Unfortunately, according to caniuse.com, there now seems to have very little browser support - it's been removed from current versions of Webkit.
There is a simpler proposal which may do the required job: CSS Multi-column layout (http://www.w3.org/TR/css3-multicol/) which appears to have broader browser support. I haven't tried it yet, but it might work for you without having to pile in a ton of Javascript.
Related
When learning CSS and making responsive column layouts, I was taught the flexbox method (but also the fact that you should avoid using it too much). Recently, I watched a newer video from teamtreehouse that uses columns, column-counts and so on, to make a responsive column design. Which one is better to use, or is there a third option that is the best?
Edit: Sorry, apparently it's an older video. The reason I'm asking is because it wasn't on my web design track so I wasn't sure whether it was relevant anymore.
Most modern page layouts are moving away from floated columns and migrating to flexboxes. You'll find that even bootstrap 4 are going to be basing their layouts on flexbox.
The main advantage of using flexbox I find is vertical alignment, which is revolutionary. Because before that was one of the biggest pains developers had to face. You can also re-order dom elements which is pretty cool. There's also flex basis, which allows you to have a div with a fixed dimension, and allow other divs to occupy the remainder of the width/height. The possibilities are endless!
TL;DR Flexbox makes your life hella easier. Only if supporting older browsers isn't an issue.
I came across the column-count in our codebase, and was surprised by it, after 6 years of being a frontend dev, I hadn't heard of it. So I dove into it a little bit and also found this thread. To answer the original question above:
When to use column-count
When you are using a lot of text or for instance checkboxes, and you want to order them into columns, column-count is a good option. It basically creates the columned layout of a news paper article for you. So you give the number of columns and the browser will calculate the height. The drawback here is that you often times don't want multiple columns on smaller devices, so you would have to put it within a media query. If you want to know more about it, read this article: https://www.smashingmagazine.com/2019/01/css-multiple-column-layout-multicol/
When better not to use column-count
If you want to have more control over your columns and rows, for instance where certain content should go within the column, use flexbox or grid. Also when you don't want columns to have the same width, you are better of with flexbox or grid.
Note that CSS grid is not the same as the old floated columns. It sounds like teamtreehouse used CSS grids.
The CSS grid is a 2d system (rows and columns) while flexbox is 1d (either rows or columns). So they can be used in conjunction, css grids for the page layout and flexbox for the internal detail layout. See :
https://tutorialzine.com/2017/03/css-grid-vs-flexbox
You might want to take a look at Boostrap if you are already comfortable with CSS and want a responsive design. It's easy to pickup. I find it saves me alot of time and effort rather than coding your own CSS for every project.
When working with css you need to constantly think what browsers you want to support, and then choose which features to use. For that there's a handy website http://caniuse.com/
For example in your case you can see that ie8 doesn't support columns http://caniuse.com/#search=columns and neither it supports flexbox http://caniuse.com/#search=flexbox so if you want to support ie 8 I suggest you would use the tipical floated column approach. There's many grid systems out there but I'd go with as suggested above. http://getbootstrap.com/
I'm trying to solve the classic box packing/knapsack problem with a CSS layout.
I would like to arrange many boxes in a way that minimizes whitespace between elements, like this;
(source: tydus.net)
CSS3 columns work VERY well here - boxes are arranged sequentially, but all white space is consumed efficiently. There is a teeny weeny problem - boxes are "sheared", or span across multiple columns. Can't do that.
I used the classic div.clearer after some boxes, but that had no effect - the boxes still spanned over those CSS3 columns. There is a column-span CSS property, but it's not supported in any browser yet ;(
Optionally, I could define the columns myself and arrange the boxes by hand, but realistically the boxes change height very frequently.
Final question: Is there a way to arrange boxes in a way that minimises whitespace between boxes using pure CSS?
Thanks!
Although I haven't tried it myself yet, one possible answer may be to use the jQuery Masonry plugin. This seems to fit the requirements you state.
Doing this in pure CSS and HTML willl be very hard, you'll have to probably let go of some wishes/requirements...
I often find myself in the need for matching up my webdesign to some reference-image. I used to use the PixelPerfect plugin for FireBug, to overlay an image on top of my design - however these days I mostly develop in Chrome, and there isn't a comparable tool to PixelPerfect.
My perfect tool would be some kind of HUD display that would overlay the entire screen, so I could use it disregarding whatever browser I'm currently working in.
How do you match up your webdesign to make it pixel perfect? Any tools and tips is highly appreciated.
How do you match up your webdesign to make it pixel perfect?
Don't, seriously.
There are so many devices and browsers and other factors that mean that, today more than ever, designs cannot be pixel perfect. To even try and make them so is going to cost a lot of time.
People don't compare websites between browsers so save yourself some valuable time and sanity!
A great way that I've seen done involves work on both ends, but it works nicely.
First, make sure that your designs fit a grid: repeating, same-sized columns with fixed width gutters. You can take that grid layer and turn it into a background image that you apply to your containers during development. That way, if anything doesn't line up with the grid, you'll see it immediately.
try online service like makiapp.com it just like pixelperfect for firebug.
I've had immense trouble googling this, I guess I don't quite know the name for the concept. I have a section of the page where a series of text boxes will appear, the number might vary. I'd like to have them fill a div in a top-to-bottom then left-to-right manner. That is, the text boxes will stack (normal) until they reach the bottom then wrap around to the top again in a new column.
Like:
Textbox1 Textbox4 Textbox7
Textbox2 Textbox5 Textbox8
Textbox3 Textbox6
Is that possible in CSS, or will I need to actually code something to do this correctly?
You can use CSS columns, which is described on A List Apart.
Note that this only works in modern browsers. Otherwise you need JavaScript or extra HTML.
You want to Google "multi-column lists" using CSS.
I personally call this newspaper columns, and there is support for this in CSS 3
As mentioned, CSS3 allows for this, though browser support is going to likely be mixed.
It wouldn't be too hard to do via JavaScript, though.
I'm trying to present my notecards in a web app style.
I'm not worried about caching, or making it work offline.
I just want it render well in the iOS browser.
Here's the link: http://kaninepete.com/flashcard/review.php?Sec=3
I want it to look the same as if you re-size your browser window to 320x480.
The problem is, it always renders a huge amount of blank space off to the side.
I want to lock the scrolling to only the vertical axis (like flipping through notecards),
but also have the text at a readable size.
You can use CSS media queries to set your template on a certain width/height model. This works well and can adjust specifically for iPhone screens.
As for the font size issue you'll probably need to just spend time testing. With that it's going to require some type of virtual simulator or a real iPhone where you can test the site. I just loaded it up onto my iPhone 4 and I see what you mean about additional space - this is just because of your page size. Try messing with CSS media queries I think you'll find the answer in there.
Here is a very handy Google search to hopefully get you started on the right track. CSS3 has a lot of new features. Many of them geared towards mobile :)
Reading your question again, here's some suggestions based on what I think you're looking for.
Make sure your document is valid HTML before you continue. Safari on iOS supports HTML 5, so I'd suggest targeting that, unless your platform targets something different already.
If you just want it to run well in iOS Safari, then code for that. If you want it to look similarly in other browsers, however, then it may be necessary to look at styles targeting the iOS device (via width/height). See http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript (It seems hacky, but based on some research a week ago, this still seems to be the suggested route.)
You've got CSS that shouldn't be in there if you want to target multiple browsers. overflow:hidden and set pixel widths.
Generally, I'd say you'll want to tweak your markup as well. List items or headers would be much better than just simple breaks.
Maybe I'm just oversimplifying the question, but it looks to me like all you really need to do is wrap each notecard in a div, perhaps giving each div a <div class="notecard_wrapper">. then just attach a stylesheet that specifies the width and height you want for each card.
This page explains Safari's viewport and how to change it. It will probably fix the font size problem and maybe help with the page size.
Basically, Safari by default simulates a screen that's about 900px wide, when it's actually about 300px (so the page appears zoomed out). This makes pages designed for real computers render properly, but for a web app you usually don't want it to zoom the page at all. The viewport tag should let you control that.