I'm trying to create a fluid CSS grid, it works in Firefox and IE8+ but NOT in Safari/Chrome/Opera where the sub-pixel rounding issue becomes visible:
http://jsfiddle.net/bJKQ6/2/
.column {
float: left;
width: 25%;
}
The main container has a width of 100%, and if you change the browser size in Safari/Chrome/Opera you can see how the rounded widths are inconsistent.
After extensive reads about the problem I understood that "there is no right or wrong solution" for the sub-pixel rounding, but the Firefox way seems the best compromise to me.
(For example, if I set 4 divs at a width of 25% I expect the covered area to be 100%.)
I would like to know if there is a CSS only solution that I missed, or alternatively some JavaScript to solve the problem.
Thanks!
UPDATE: As of May 2014, Chrome 33 and Safari 7 seem to have picked up the "Firefox way".
Stubbornella's OOCSS framework (links below) grids module deals with this by giving the last column the following overrides:
float: none;
overflow: hidden;
width: auto;
This allows it to occupy whatever width remains within the container.
A bit of browser-forking (IE, ptzsch…) is necessary to get the same behaviour:
https://github.com/stubbornella/oocss/blob/master/core/grid/grids.css
https://github.com/stubbornella/oocss/wiki/grids
It sucks there isn't a nice option for this that will round pixels up and down for each browser, but in lieu of that, I usually do:
.nested:last-child {
float: right;
}
.nested:first-child {
float: left;
}
This will float the last child to the right so the px unalignment isn't obvious, but if it's the only element (say a div that is 33% width), then it will continue to float left.
Related
I have built this menu:
JSBIN EDIT ; JSBIN DEMO
As you see, the menu isn't centered at the middle of the bar, he's centered up. However, I want to make it go lower, exactly at the middle.
So, I had an idea to do margin-top: 26px because the bar's height is 53 pixels, but it doesn't change anything. I also did margin: 0 auto and text-align:center.
I read this STACKOVERFLOW and realized that it is related in float, but I don't want to float it - I want to make it go down.
Thank you!
You need to give the line height by using line-height. Okay, updated, the line-height trick doesn't work!!! And also, giving this to the <a> tag does the trick:
width: auto;
display: inline-block;
Fiddle: http://jsbin.com/cayob/2
Try setting the line-height of the links to the height of the bar, in this example 53 pixels.
I have problems to place N divs side by side with full browser width
I want like this. when you resize browser space between divs must stay same and divs must resize in width.
|div| |div| |div|
| div | | div | | div |
One solution would be to use percentages:
div.mydiv {
width: 33%;
display: inline-block;
}
If you do this, be careful with padding: that adds to a div's width, possibly causing overflow. This can be fixed if you support only IE >=8, by doing
div.mydiv {
width: 33%;
display: inline-block;
-moz-box-sizing: border-box; /* OMG why doesn't Firefox support this yet */
-webkit-box-sizing: border-box; /* Safari below 5.1, including 5 */
box-sizing: border-box;
}
And if you do that, there's even one more possible problem: space between the divs. This occurs because you have empty text nodes in between them, and display: inline-block thinks that's OK: elements laid out in an inline-type fashion can be interspersed with blank text nodes. To fix this, there's a pretty bad hack:
div.containerOfAllTheDivs {
font-size: 0;
}
div.mydiv {
font-size: 12px; /* or whatever */
/* plus the above stuff */
}
This makes it so that any text (e.g. whitespace) that appears inside the container is zero-sized, unless it appears inside the divs you are stacking next to each other, in which case it reverts back to 12px. As I said, a pretty bad hack. But it works.
The more general solution is the new flexbox proposal, but that is still under heavy revision: there are two outdated versions implemented in various browsers, with the latest one not being implemented in any as of today (2012-05-15). If you know your exact environment, though, this might be a good solution.
For two divs, just do (Demo):
div
{
width: 49%;
float: left;
}
For three, do (Demo):
div
{
width: 33%;
float: left;
}
If you need an arbitrary number of divs, you have two options:
If the number is determined by the server (value is coming from a database or a session or whatever), you can generate appropriate CSS on the server side. This solution is preferable.
If not, you need JavaScript to calculate the viewport's width, and assign width values accordingly to your divs.
The same thing could be achieved using CSS3 Flexible Box Style Layout with very less coding. Well it depends upon the browser you are planning to support.
Now Flexible box layout is supported only in webkit engines & mozilla
Putting this as an answer because I guess it's valid and may serve you well. 960.gs and bootstrap both provide scaffolding for layouts identical to what you want. 960.gs is just layout but if bootstrap suits you, you can customize it on their site to just get the bits that deal with layout. One caveat for bootstrap, I haven't found a way to remove the left margin on the div columns. 960.gs includes alpha and omega classes that set margin-left and margin-right to 0 respectivley. I had to add these to bootstrap when I used it.
Using one of those scaffoldings will save you a lot of time and effort. If you have to hand your code off to somebody else later or even just have somebody else working on it with you, using a scaffolding will help them work with your code too.
I have a div showing "Please wait". The markup for the div is
<div id="pleaseWait" class="divOuterPleaseWait" style="left:expression((documentElement.clientWidth-this.offsetWidth)/2);top:expression(documentElement.scrollTop+((documentElement.clientHeight-this.clientHeight)/2 ));">Please Wait...</div>
This is working fine with IE7. In IE7 the div is show at the center of the page. But excepted behariour is not optained in other browsers (ie. IE8,IE9,FireFox,Google Chrome etc). What should i give to get this working in all browsers? Also can I move the inline style to the my CSS?
A good way to center a div is to use fixed positioning, top and left set to 50% and left and top margin to the negative of half of the width/height:
http://jsfiddle.net/fLa4S/
See this SO answer, or this jsfiddle (press the 'confirm' button). The css you showed in your question is browser specific (especially: IE). In javascript you can center an element by determining the 'viewport' dimensions (height/width of the available screen) and position your element relative to those dimension. The links here demonstrate a way to do that.
It doesn't work in "other browsers" because you are using expressions in your CSS which are 1) incredibly bad for a variety of reasons (slow, deprecated, non-standard) and 2) unnecessary.
You can use pure CSS positioning (percentages and negative margins) or a little JavaScript (jQuery makes this very easy) to accomplish the same thing in all browsers.
Another approach:
<div style="text-align:center;width=200px;margin-left:auto;margin-right:auto">Please wait...</div>
CSS expressions are only working in IE. However, it´s generally not a good idea to use them because they are not W3C conform and in addition they can be very slow when you make heavy use of them.
The CSS attribute position: fixed could help you here:
#pleaseWait {
width: 400px;
height: 200px;
position: fixed; /* IE8+ */
left: 50%;
top: 50%;
margin-left: -200px; /* half of width*/
margin-top: -100px; /* half of height*/
}
If you have to still support <=IE7 you have to use JavaScript (but not within the CSS definition!)
Using auto as margins and defining a width and hight should be enough
<div style="width:200px;height:50px;margin:auto;text-align:center">Please wait ...</div>
If you only want to center verticaly, use margin: 0 auto;
PS: if you want to be more XHTML-correct, put your CSS in a CSS-file and use a class or a id to define the css-styling
I've answered this before: How to set the div in center of the page
I'm using a fixed width body and auto margins to center my content in the middle of the page. When the content exceeds the page's height and the browser adds a scrollbar, the auto margins force the content to jump half the width of the scrollbar left.
Is comparing outerHeight with window.innerHeight an appropriate way of solving this? Is there another way to solve this?
I think this should be enough info for the problem, but let me know if I can answer anything else.
Edit for clarification: I don't want to force the scrollbar to appear.
I'll just leave this link here because it seems an elegant solution to me:
https://aykevl.nl/2014/09/fix-jumping-scrollbar
What he does is add this css:
#media screen and (min-width: 960px) {
html {
margin-left: calc(100vw - 100%);
margin-right: 0;
}
}
This will move the content to the left just the size of the scrollbar, so when it appears the content is already moved. This works for centered content with overflow: auto; applied to the html tag. The media query disables this for mobile phones, as its very obvious the difference in margin widths.
You can see an example here:
http://codepen.io/anon/pen/NPgbKP
I've run into this problem myself and I've found two ways to solve it:
Always force the scrollbar to be present:
body { overflow-y: scroll; } Setting it on the html doesn't work in all browsers or might give double scroll bars if the scrollbar does appear.
Add a class that adds ~30 pixels to the right margin of your page if there is no scrollbar.
I've chosen option 1 but I'm not sure if it works in all browsers (especially the older ones).
Facebook uses option 2.
Use this CSS:
body { overflow-y: scroll; }
You can force the scrollbar to always appear:
http://www.mediacollege.com/internet/css/scroll-always.html
The process is :
html {
overflow-y: scroll !important;
}
This will show the scrollbar even there no need any scroll bar.
Best possible way through CSS, It will show/hide Scrollbar accordingly, will
solve jump problem, works on every browser
html {
overflow: hidden;
}
body {
overflow-y: auto;
-webkit-overflow-scrolling:touch;
}
For me, the solution was to add this rule to the body:
body {
overflow-anchor: none;
}
This rule was added recently, and aims to reduce the variability of browsers having different default assumptions about how they should react to overflowing. Chrome, for example, has overflow anchoring enabled by default, whereas Firefox does not. Setting this property will force both browsers to behave the same way.
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor
I have two layout elements lets say one is 33%, the other 66%. They both use 100% of my screen size (So it is dependent on browser window). The smaller element also has a min-size property, so it cant fall below 250px;
Now if the layout is at least 757px large (so the size where the min property doesn't apply) everything looks fine. If the layout falls below the 757px the second element starts to overflow since it still takes the 66%, so the sum of both layouts exceeds the 100%.
I made some graphics to show the behavior:
Layout 1000px not overflowing:
Layout 500px overflowing
Is there a solution to prevent the overflow (not overflow: hidden) so the second element takes only the remaining space when the first element reaches it's min width.
Also JavaScript shouldn't be used excessive!
Regards, Stefan
Sure, this is actually pretty easy and requires a very minimal amount of code:
HTML:
<div class="sidebar">
...
</div>
<div class="content">
...
</div>
CSS:
.sidebar{
float: left;
width: 33%;
}
.content {
overflow: hidden; /* Ensures that your content will not overlap the sidebar */
}
You can view the live demo here: http://jsfiddle.net/7A4Tj/
Edit:
If you're trying to achieve a site layout that has equal-height background images for the sidebar and content, all you need to do is wrap both those elements in a containing div and use the Faux Columns technique.
Try using the following for the second widget:
position: fixed;
right: 0;
Here´s my five cents
min-width on both divs
and a wrapper that also has min-width, plus both of the divs having percentage width
JS fiddle code
PS seems to be working fine in IE8
PPS Also do check out #media queries if you want to have conditional CSS rules on different window sizes, might be helpful. Will run on browsers supporting CSS3: CSS Media queries at CSS Tricks