i have a nested display table in a display table cell and i doesnt seem to apply the 100% height to IE 8 or 9 (even a extra containing div wont work), works fine in all other major browsers, here the jsfiddle it should explain everything.
http://jsfiddle.net/bDm4d/12/
try that in firefox/chrome/safari to see how it should look and check in ie8/9 youll understand the issue. Both columns should be equal height, since they are both with in a display table cell. The center (green in the right, pink in the left) have height to auto so it "should expand" like it does in webkit/ff.
A work around for ie would be great conditional or not.
Unfortunately, display: table-cell isn't supported by IE. Luckily, there are several workarounds to get divs with display: block to fill the height of their parents, creating the 'equal height' effect. I found this article to be very helpful when I was faced with a similar layout challenge. Good luck!
Related
So I have a post-view that I can't get to work properly, and flexbox seemed like the answer from heaven that I was looking for. Except, I can't seem to figure it out properly no matter what...
If you look at this code, there's two vertical divs that should both stretch as more content gets added to either. The div where more content appears grows accordingly, but I want the other div to match in length, and so the bottom edges to be aligned to the bottom of the flex box. The repeating images behind the two founder buttons and the "LOTS OF TEXT" should then fill up empty space down to the bottom where the bottom-edge images are.
I've been at this for a good week now and can't figure it out... I'm sorry if this is a really simple thing or I'm being dense about css, I'm still learning. Any help would be greatly appreciated.
In your .forumviewright class, add this property:
height: 100px;
That brings the baselines together.
Just tested it in Chrome Dev Tools. It works. It also works in FIDDLE. But it doesn't seem to work in the CSSDesk sample you provided.
Whether or not this is the permanent solution you're looking for, you can let me know in the comments below.
EDIT
Your question begins with:
Can't get CSS flexbox to expand properly.
Actually, the flexbox is working fine. Both columns are binded to each other and expand equally, as per the flexbox rules.
If you highlight the child divs (.forumviewleft and .forumviewright) in Chrome Dev Tools or Firefox Inspector, you'll see that both columns are equal height and track each other regardless of content size on either side.
To illustrate this, I've added a background color to each column div so you can see that the flex is working properly. No other changes to the code were made. In this example, no matter how much content is placed in either column, both color-coded columns remain equal height.
https://jsfiddle.net/eympj0yq/2/
Of course, the real problem is that the child container boxes inside these columns aren't tracking each other.
This will require some fundamental adjustments to your code. For a better understanding of this problem and how to fix it, see this post:
Height 100% on flexbox column child
Hope this helps. Good luck!
I have a really weird issue thats seen in Safari and Chrome. Somehow it works just fine in Firefox.
Look at this URL in one of the above browsers: https://musik.dk/therollingstones/videoer
If you scroll down, you'll notice a videothumb that floats very different than the rest. The "sinner" is the video starting with the name "Arrive in Japan" thats just a single pixel height than the rest.
I've looked into the inspector, but everything is exact as heigh and wide as all others (its the same template) and the image is 100% the same height and width. It could be a render issue, but its the same video all the time.
Can anyone figure that out?
Screenshot:
The floated article in question is "snagging" on the article to the left above it, which is slightly taller than the others. That's the problem with floating.
My advice would be to remove all of the float: left; declarations (there are two for desktop and various instances within media queries as well) and use display: inline-block instead, perhaps with a reduced right margin of, say, 0.5% (although these get a bit inaccurate).
Instead of right margins, you could apply text-align: justify to the container of all those articles. That will only mess up the last row if there aren't 4 articles, but that's fixable, too.
Or you could use flexbox, which is the modern way to do this, though not fully supported across the board yet.
The reason is due to that video having japanese characters in the name. For whatever reason, they render slightly larger, making the .ellipsis box 1px larger.
As mentioned by ralph.m I would make then display:inline-block; and remove the float, then set margin-right: 23.8%;
I know there are many questions about this and I have looked at all of them. I have a site where I need the left <td> to extend by 100%. I have all the containing blocks set to 100% and this works great in chrome and safari. However it does not extend to the base of the screen in IE or Firefox. I have a rough sketch of it here since the code is too long to paste. I have also included the css in the page to make it easier to view.
I used these two posts but neither has fixed my issue.
CSS 100% height in ie
Div 100% height works on Firefox but not in IE
Am I missing a container or is there a special way to make this happen in IE and Firefox? This is my first time messing with 100% height in css.
It's because of this line of css in td.left:
display:inline-block;
Remove it so it stays the default: display:table-cell. Then it works in IE.
I strongly encourage you not to use tables for this sort of layout though. Here's a good tutorial that will show you how to do this using divs+css: http://learnlayout.com/
The best way I can think of is wrapping both panels with a bigger absolute DIV and that way you can give the inner div a (working) style like this:
height: 100%;
I've made an example here:
Result - http://fiddle.jshell.net/E8SK6/1/show/
Code - http://jsfiddle.net/E8SK6/1/
Issue
I need to vertically center the order_form div (light gray) and keep it on the very right side of each of the product boxes on our website. The div's height is non-fixed, and can occasionally fill most of its allowed vertical space (which is 160px because of the product image). The picture div vertical-aligns perfectly. I made an example out of one product box and simplified it as much as possible while leaving its html intact.
Here's a jsfiddle displaying the problem (sorry for the lack of images!)
I realize there are a lot of posts on this topic; I've read many of them. I've tried everything I could think of, and everything I have found in all the articles, solved questions, even every little clue I've found over the past three+ hours. Nothing has worked.
I'm completely lost on how to solve this, and I'm sorely tempted to change the picture and order_form divs to a table just for the sake of aligning ._.
Help?
Several things I've tried:
display: table-cell; vertical-align:middle; on the order_form div, and adding display:table to its parent.
The above with display:table on an added wrapper div instead.
adding a wrapper div and using margin + negative margin.
display:table-cell; vertical-align:middle; and adding a wrapper div with left:160px; display:table. The wrapper div's width is never correct, breaking the order_form.
vertical-align:middle on the order_form and having height equal to line-height on its container
several other approaches i do not remember
saying please.
Asides
I need this to be functional on somewhat older browsers (ex: IE8), without using any javascript.
Background info: I've recently started working on our site and, among other things, I've since converted all the product boxes from tables to divs and cleaned up the css a bit. The problem is the tables, being tables, handled the aligning really well...
Also: The next step is to convert the buttons from images to prettyful css links so they scale nicely along with the text (and ditch the table there, too). Don't dock me points for what I haven't touched yet!
If I understand the question rightly, one option would be to set div.order_form to display: table; height: 160px; and then create a div inside that (wrapping around all its content) and give that inner div display: table-cell. That still requires the use of the absolute positioning, which isn't ideal, but it does work.
If you want this on old browsers too..
wanna use some jquery scripts?
The height will auto adjust depending on your order_form height.
See DEMO on jsfiddle http://jsfiddle.net/kdNnw/
JQUERY
$(document).ready(function() {
// get dynamic height of order_form and calsulate margin-top css
var ver_top = ( 160 - $('.order_form').height()) / 2;
$('.order_form').css( "margin-top", ver_top+'px' );
});
I've got three columns inside of a div that is the full page width. The two on either side are 25% width and the one in the center is 50% width. This layout is working fine except in IE6 where at certain page widths it bumps the right column to the next line. Is there a fix for this? Maybe an alternate way to layout a page like this?
Edit: I'm using a cross browser inline-block hack that works great in FF, IE, S, Chrome. I'm pretty sure this quirk has to do with the way IE calculates widths on fluid content, and happens due to miscalculation (rounding maybe?). I've put up an example here. Try slowly adjusting the window width in IE6 (maybe later versions too) and watch as the green DIV gets bumped down at certain widths.
Thanks,
Brendan
It's a rounding problem in IE6's box model. Generally, you can't have a combination equal 100%. Try making your values sum to 99% of total width, and it should work fine. This solution has always worked for me.
It sounds like a piece of content in that column might have a defined width which is more than what the 25% of page width it is given. Can you provide CSS examples?
EDIT: IE6 does not support inline-block which could also be the issue.
EDIT 2: I looked at it on a 1680x1050 screen in IE6 in a virtual machine. When I drag the width slowly over time from about 800px to 1600px, it randomly moves the right column around. I suspect it's an issue with the hack that you're trying to use. Your code is so simple that I think you should consider researching an alternate hack instead. I've also never seen the *<property>: <value> hack. What's the * do, all compliant browsers?