As I understand it in modern web-development horizontally aligning elements side by side is by using float (for example three column layout is achieved by floating two to one direction and one the other). However this does bring out various problems and at the moment I am working on a website that require seperate columns in both header and content thus I need to float pretty much everything and set up various margins and widths to keep them from jumping all over the place.
With HTML5 and CSS3 on the rise I am wondering whether there is something to replace floating with easier solution? As it is HTML5 and CSS3 introduce easier ways to make certain things happen (like rounding corners with border-radius) so one would think with multiple columns in a website being almost non-avoidable something to ease that hassle would be invented.
Yes, it's flexbox, or CSS Flexible Box Layout Module.
The spec seems to be reasonably stable as it has reached Candidate Recommendation status. I don't know how good browser support is for this latest version.
Here's a recent article.
Have you looked at any of the responsive frameworks like Twitter Bootstrap? With a responsive framework, it's very easy to setup columns dependent on the screen size.
To my knowledge, there is no built in CSS property of columns beside creating your own with floats and dynamic widths.
Related
I am trying to make a good website and I have a big problem: overlapping.
When I make the window smaller, all of my elements are spread.
On mobile is worse. What can I do?
https://bucovina-tour.000webhostapp.com
I took a look at your .css definitions, and it looks like the way you're positioning your html elements isn't ideal when trying to build a responsive/adaptative website.
When you define margin-top: 500px for your .button_center class, for example, please note that those margins will start stacking on top of each other at some point.
With standard resolution (1366x768, for example) there's enough space for all of your buttons to be inline with each other, so their margins will overlap and work as if they were one. When shrinking screen resolution, though, there won't be space for all of your buttons to stay in the same line, so they will start stacking on top of each other. But since, by css definition, there should be a margin of 500px on top of each button, they'll begin to spread vertically on the screen.
That's one of the reasons your website is overlapping, but there are a lot more. I highly recommend taking a look at Responsive Webdesign Principles and playing with responsivity on smaller scale before editing a template. When you stack multiple inexpected behaviors on CSS, it becomes exponentially difficult to understand why each element broke.
Also, explore the inspect tool that most browsers have. With this tool you might be able to visualize margins, borders, widths and various other characteristics of your html components simply by hovering over them! It's really useful for web debugging.
some of your code is very hard-coded. try to think about mobile sizes (and check it by console) before you give size to elements
Like said above, for every step, use a #media query
I strongly recommend learning how to work with flex in your CSS. It might seem a bit complicated at first, but it's really not. It does most of the responsive work for you. This is the real beauty of it!
Good luck :)
Complex Grid Layout, Help!
I'm making a responsive website using bootstrap 3.0.2 and can't figure out the layout that is stated in the requirements document for the project. I made an image of what I need, and will give more detail, or update my question, if needed. I am open to any suggestion on how to accomplish this.
The Issue
This image describes what I need the design to look like at three different widths.
I should add, each box will be basically a div with an image, article title and summary within it.
Like to say ... in advanced
Id like to say thanks and apologize in advanced if the question is dumb or the answer is obvious. I have been a dev for a long time, but I'm new to responsive design and I've been banging my head on the wall trying to get this to work
The problematic part of your project is to make two smaller blocks side with a bigger one and make these two 50%. As far as I know, there are no mature cross-browser solutions that would accomplish that without javascript.
You may want to take a look at: Flexbox and for Comrade IE Flexie.
Another approach to accomplish the same could be using viewport dimensions. Just be aware of the browsers support.
All in all, if you can do that, I would suggest just using JS, with a fallback to css that will not break the site's look too much. Having just finished a project with similar requirements, I would just like to say good luck.
So this is my first time trying to use a responsive framework...also fairly new to building responsive sites in general - but had a lot more luck with just building them from scratch and sizing each element...though Foundation seems like a much better solution if I could just get my head around it!
Work in progress is here: http://client.analog.la/360/
It's behaving 'alright' in my desktop browsers (resizing down to 400) except for a problem with the menu - the issue I'm having is trying to get the menu to drop down below the logo and be properly centered.
On actual mobile and tablet having way more issues...the menu is sitting above and the whole layout or to one side and not dropping down at all. On ipad the whole layout seems to be only about 95% page width with a random margin down the right hand side...on iPhone the whole layout only seems to be about 50% width...which just looks...awful. There's so much discrepancy between how the layout looks on devices vs. how it looks on desktop at the same resolution that I'm a bit baffled...Also, really not sure where I went wrong with the sizing to make it look so wrong on devices!
Any help would be massively appreciated!
Thanks,
Not sure if you're still looking for help on this, but there are a number of issues in your codebase, and it's hard to say which ones are causing the behavior you're trying to address. Your very first div uses the columns class, but it's not nested in a row. Elsewhere, you have rows immediately nested in other rows with no apparent benefit, more columns nested in other columns without an interposing row, and nested rows that aren't set to collapse. You're also using spacer.png in a few places, which almost reduced me to tears.
And your top level headers are in spans instead of h1. My only guess here is that you were attempting to sidestep Foundation's default styles? Use a class. You need those h1s for SEO, semantics, etc.
No insult intended, but you might do well to check out Treehouse and sharpen your coding skills - could save you a lot of time and frustration in future work.
I have a website that is header, content, footer. The content section is broken up into two columns. (for now) In these columns are modules. The modules can be varying heights and varying widths. The client would like the modules to be different heights and widths as they see fit and then mixed and matched to look best. What would be an ideal way to go about coding this? Make a bunch of different width containers and float them left? Then the client can choose the appropriate container?
Must work in all browsers including IE7+
Whether you use a content management system or not, I would recommend to pick a Grid System for you CSS. There are a few different options and all are aimed at precisely defining blocks (modules) and tend to be cross-browser compatible.
You can find some examples at http://www.gridsystemgenerator.com/
I've been working on a layout for a site recently and have gotten stuck with the CSS. I like to think that I could follow the simple tutorials for a 2 column footer layout, but I keep getting stuck with the content of one of the columns.
The two column design would be left-side fluid Google Map and right side fixed width sidebar. I have tried following many examples of this sort of layout, but I always come to the problem with maintain the fluid side with the Google Map. Mainly the Google Map doesn't like to remain fluid. I have tried every CSS solution I could find with negative margins, floats, abosulte positioning (GMaps really hates this), and even tried tables (shudder).
Does anyone have any idea to handle this problem?
Take a look at Yahoo YUI grids.
Yahoo YUI grids
The YUI CSS framework provides a very customizable number of grid layouts. Page widths vary from 750px, 950px, 974px and 100% & there are templates that provide both fixed left & right column widths - all guaranteed to work correctly across multiple browsers. Their choice of sizes is also related to common advertising dimensions, making it easier to fit ads if you so desire. All pages on Yahoo use these layouts..
You also have the option to incorporate 'reset' capabilities so that all browsers are set to a common layout with regard to fonts, padding, margin, etc.
It has made foundational web page development a much easier, less finicky process for me!