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).
Related
I've built out a standard drop down menu (nothing fancy), however, in order to expand it I have to set a fixed width. Can I just leave out the width and have it expand based on the amount of content I add?
Short answer: yes.
Long answer: it depends quite a bit on how you've constructed the markup, what your CSS looks like, and whether you use something like jQuery for animating the dropdown. The CSS I used to use for dropdowns was a variation of Suckerfish and didn't need a fixed width, so it is possible. If you can post a simple example of what you're doing someone can likely make suggestions on how to eliminate the need for fixed widths.
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.
I have a #main div nested within a container div that I want to fill the page down to the sticky footer. I've tried several angles, but can't seem to get it to work. If you don't use firebug, just ask and I'll provide CSS, etc.
Thanks.
site: http://www.dentistrywithsmiles.com
I've tried to do sticky footer many times and I never seem to learn that they are really hard to do. Your situation seems complicated and what you have now doesnt seem half bad.
I think I would use JavaScript to detect page resize and adjust the heights appropriately. Either that, or do something tricky with background images spanning both the footer and #main.
That's probably not what you want to hear but this is a tough problem for only using CSS - tougher than I would care to invest in.
With Jquery
http://css-tricks.com/snippets/jquery/jquery-sticky-footer/
or css only:
http://www.cssstickyfooter.com/using-sticky-footer-code.html
or
http://www.pmob.co.uk/temp/sticky-footer-ie8new.htm
In the image above, most of the html is semantic, using css to manage the look of it all. Despite my best efforts, though, I had to resort to using a table to get the segment on the right to stay where it is and allow its inner elements to wrap fluidly when it gets too big for the screen, like this:
I know that it's preferable if tables are only used for "tabular data," but I have never found a good way to force elements to do this without using tables. Has anybody solved this problem?
have you tried using list-items? Generally when creating menu elements, it's better to use UL->LI instead of span or div
You should be able to set the width of it. This is difficult to do without seeing the exact way you are doing this, because CSS is dependent on parent sizes, etc.
I would look into the CSS property min-width, too.
I understand this question is redundant but I was unable to locate an answer from my searches on here and other online forums. Here is my situation.
http://www.ci.fayetteville.nc.us/CityCommon/port/contact.html
On that page I have a 'separator' line that is to extend to the bottom of the page. Now, I have thrown in plenty of break tags to stretch the page. This shows that the background image (used as a footer images in a way) stretches to the bottom of the page fine. (That image is contained within div#content.
My question is how can I additionally get my div#rightContent to stretch just the same way?
I have my html, body and container heights all specific at 100% as well as another container div called #content. I am pretty stumped.
At the link you can view my source and hopefully point me in a good direction to achieve this. Any help would be greatly appreciated. Thanks.
Make one background image that contains both the outer borders and the right-column divider. This technique is called "faux columns".
See: http://www.alistapart.com/articles/fauxcolumns/ and
http://en.wikipedia.org/wiki/Faux_columns
There are various CSS hacks to get equal column heights. The only one (IMHO) that feels 'standard' is to use display: table, but that doesn't work in IE (of course) so makes it less ideal.
As such, I find the solution that works best is a bit of JavaScript. You are already using jQuery so that'll make it even easier. Here's one example solution:
http://www.cssnewbie.com/equal-height-columns-with-jquery/