After days of hard work (i know it would've taken a pro only a few minutes), I have finally designed the exact layout I want. The only problem now is that it uses a lot of absolute positioning, which I hear is evil or at least undesirable. Here is the jsfiddle of how I have done this. Can someone guide on which of these <div>s can avoid absolute positioning and instead use more fluid constructs?
I am not sure where you can avoid using absolute positioning in that fiddle, becuase i didn't go through your css. but if older browser support in not a problem, you can create this layout without using absolute positioning at all..
check this Fiddle
It uses css3 calc() function so will only work in modern browsers.
There's a loss of 1% width due to the whitespace problem of display:inline-block elements
This is another Fiddle using display:flex property which avoids the whitespace problem.
Tested and working fine on Chrome 33.0 FF 28 & IE11 (This one was a surprise! :)
CSS Flexible boxes makes it easier to create layouts.
Read more about Flexible Boxes # MDN
Flexbox guide # css-tricks
Float left for the columns and use default relative positioning. Percentage widths and set heights to px if need be. That would the most consistent layout.
Related
So I did notice that zoom related layout problems are commonly being dealt with, but I couldn't find an answer to my case - I wrote a WEB calc, and the buttons just slide out of place when zooming in and out, in Chrome and Firefox but not in IE. What is the way to fix it?
Give width:220px to your #main div
If you closely look at your CSS you will see that the buttons together(5 in a line) actually have more width than the Main div while resizing. Increasing the width to 220px solves that problem. Another solution could be to give max-width and max-height to all elements, another can be to properly layout your elements and don't just rely on the browser's positioning. Doing the latter is an trivial task.
For the sake of searchers, my solutions was to use a table to make the calculator eventually. I know using tables for layout is considered a bad practice, but considering a calculator shape is not supposed to adjust to new contents or to the size of the end-user's screen (at least in my case) it seemed to be the best implementation. It was the only way to avoid losing the layout shape in zoom-in zoom-out, which is kind of what div's are all about.
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/
I tried to archive a simple sidebar | content visually with normal floats and then I used the classic technique for equal height columns with (margin-bottom: -99999px; padding-bottom: 99999px etc) but I didn't like it and I had some issues here and there with this, so I decided to use flex-box, I tried it some time ago with fixed size width and it worked fine but now I have percentage width so it seems that firefox didn't like it at all...
This example shows how I normally expected flex-box to work, and it did fine in safari and chrome, but firefox just ignore percentage width... I found that it is a known issue of firefox but it is an old one and I thought they solved it already...
Then I tried something different in order to trick firefox, but still it wasn't want I expected because sidebar had different size from page to page based on content...
So I end up by giving up on flex-box with fluid layout and use something more simple that fit my needs...
But I'm curious to know if anyone solve this issue with any workaround or if we are all in the queue for this to be fixed by mozila...
Thanks!
I highly advise against using the margin-bottom: -99999px; padding-bottom: 99999px work-around.
If you want a fluid layout(I assume this is what the question is about?) with 14%, 86% split, just use plain old CSS instead of Flex.
http://jsfiddle.net/97dtV/7/
Why re-invent the wheel. If you are looking for a better way of laying out your site, try the "grid" approach.
Semantic Grid (http://semantic.gs/)
Bootstrap - (http://twitter.github.com/bootstrap/index.html)
This assumes that you don't need flex for some specific reason, if you do then ignore this ;). Also, consider backward-compatibility when using CSS3 specific attributes!
I have a layout in which two divs appear stacked vertically inside a parent div which will be a specific height (due to containing a left hand menu). I wish the two divs to take up all the available vertical space. However, they must resize depending on their content. The easiest way to explain is with a diagram:
Reading the diagrams from top to bottom, this is the scenario:
both divs take up 50% of available height as this is sufficient to contain their content (this is the default).
there is a lot of content in top div and less content in bottom div. Top div expands to fit content and squashes bottom div.
reverse situation of (2).
both divs must expand to fit their content. Containing div must expand to accomadate.
I think I could figure out how to do this with a table, see the example here which is almost correct (in chrome anyway) except the outer div doesn't expand properly.
Is there a better CSS solution to this without using a table?
I cannot use JavaScript and solution must work in all browsers... including IE6 :(
.
This can be done using CSS, with a feature called the flexible box model. It's an extension to the box model that's been in use in CSS since the begining, and allows you to do stuff like vertical stacking, etc, which wasn't possible before.
You would start off with display: flexbox;, and then use other related styles to define the characteristics of the layout you want. It is very powerful. You can read the full W3C spec for it here: http://www.w3.org/TR/css3-flexbox/
Now the bad news: It's a very recent addition to CSS. It actually has reasonably good browser support (albeit with vendor prefixes), but the problem you'll always hit is that it isn't supported in IE, not even IE9 (though it is planned for IE10)
Other browsers require vendor prefixes, so even for supported browsers you'll need to write your styles in four or five versions.
In addition - and this is the real killer - there isn't a good fall-back solution for browsers that don't support it. If you design your page using flexbox layouts, and load it into a browser that doesn't support them, it will be a disaster.
For this reason, it is hasn't really seen much use in the real world yet. It's time will come, but as long as IE9 and earlier are in use, it won't become mainstream.
You can see a full browser compatibility chart for the feature here: http://caniuse.com/#search=Flexible%20Box%20Layout%20Module
In the meanwhile, you're going to have to use a Javascript solution.
My recommendation is the JQuery Masonry plugin. I think this will be your best solution for now.
You could fake it using a 100% height wrapping div and a white border like so:
http://jsfiddle.net/cBV88/2/
You can also remove the fixed height and it will still work.
SuperStretch might get you part of the way there.
What is the most elegant way to achieve something like that with divs for IE7 and above and the other browsers(chrome,firefox,...)?
Thank you
My personal favorite is the jQuery UI.Layout plugin. It mimics the very flexible Java 'border layout'. Though there are pure css methods, I find they take a lot of tweaking, and have side effects on other layout elements. Whereas with the javascript plugin I was able to get it working in minutes.
Example
Take a look at this, look at the source, it will show you what's involved in a fixed / fluid layout.
http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/
You're probably looking for a sticky footer. Similar to faux columns, it looks like your desired result, but "cheats" in some sense. Other than that and tables, you won't be able to achieve that with CSS due to how height works (it can't inherit relative values, i.e. elements can't be set to 100% height if the parent has its height set to auto or a percentage value).