Edit: I realize this might be a Safari issue? I don't see the same in Firefox
The following image is taken from the Bootstrap documentation, here. What I'm wondering is why there is a 2px margin to the right of the rightmost "Fluid 6" element. Shouldn't that element align all the way to the right? And what can I do to fix it?
Enhanced image:
It's not just span6, it's anything that isn't 100% of the width.
Notice how all but the last row have this problem. The problem is that Bootstrap specifies widths as percents.
For example, for span6,
.span6 {
width: 48.717948717948715%;
}
There is also a space between the two span elements,
margin-left: 2.564102564102564%;
Adding these up does not result in a nice even number, so we sometimes end up a pixel under. Other than setting fixed values for the widths and margins, not much can be done.
span12 has a 100% width:
.span12 {
width: 100%;
}
which is exactly that, so there's no problem with rounding.
Related
Setting max-width style value for images inside carousel breaks width of the container. This happens even though max-width value would not affect actual width of the images. I cannot figure out why this happens.
I created a JSFiddle about this because I'm unable to explain this issue otherwise: https://jsfiddle.net/atmp9ymr/1/
So I'm basically asking why this happens? Is there a way to fix this? Any help would be appreciated.
--
Edit. I try to explain the issue here:
So I have images inline within a container. Container forces items to be inline by using white-space: nowrap and images have inline-block and display style. This container does have position set to absolute if that matters. Everything is fine currently. Container which holds images has correct width (according to images inside). Now if I set max-width: 100% for images, container width is broken. Even if image size does not change, width is not anymore correct. I cannot find a logic for that.
Please check the jsfiddle for better explanation.
Max-Width of the images relates to the containing element.
So max-width: 100% on the image means "use 100% of ".item". .item is not further restricted and by using position:absolute on #inner, you have set this element to 100% (of viewport).
Try adding "border: 1px solid red" to #inner and #container to see, where the elements are drawn.
As long as there is not speciefied what has to happen, wenn sizes exeed the container, this will happen.
Firefox, Opera and Chrome have a workaround for this.
#inner {
position: absolute;
top: 0;
display: flex; /* add display flex */
}
.item {
display: block;
vertical-align: top;
width: -moz-max-content; /* this will stretch the items to maximum width */
width: -webkit-max-content; /* this will stretch the items to maximum width */
width: max-content; /* for future */
}
Have a look at this jsfiddle.
The challenge here is the mixing of percentage widths with inferred (auto) widths, and combining this with absolute positioning.
max-width:100% means the browser has to translate a percentage value into something absolute. This may yield unexpected results if ancestors have width:auto (which by the way is the default), and are absolutely positioned.
In such cases, percentage values make little sense, and 100% might just as well be interpreted as 100% of the element itself – not 100% of the parent/ancestor.
If you want to use percentage values here, you should make sure that the ancestors' widths are clearly set (to something other than auto). However, this might prevent the #inner wrapper from dynamically adjusting its width to wrap all its .item children.
In the end, the easy/ugly solution may be the best: Set the max-width to an absolute value. (For example the pixel width of #container.)
PS: I created a variation of your case. Maybe you'll find it useful.
Frustration
I am frustrated of having to search the internet time and again to find a way to get a simple webpage to fill the whole screen on any device. I don't care about resolution, text size, whether the text comes inside the screen or not or anything else. I don't care about anything. I have one word to display and it should come in the middle of the screen, vertically and horizontally.
CSS is driving me nuts. And I don't get why this ain't simpler. And bootstrap. Well, thanks a lot guys you helped me a lot! But why the hell don't you have a class that would simply take up all the visible space on the screen?
I have tried a lot of variations and none of them work. I just can't get that word to the freaking center of the screen.
Some variation
The simplest one: http://jsfiddle.net/IcyFlame/ngVSd/
<div style="height: 100%; width: 100%; text-align: center; vertical-align: middle;">Word</div>
I don't know why this does not work. And I want an answer as to why this does not work. And more importantly, I would really love it if you would just tell me how to make it work. All the time, everywhere.
This is a really useful question: Setting height: 100% on my label element doesn't work
The person who gave the answer says that it is 100% of what. Really cool. And how do I solve the overall problem? Oh no, I just answered the question.
All the questions after that have been marked as duplicates. One of which is:
Height: 100% doesn't work! Why?
Although the question is totally different, well, the moderators simply believed that this was a duplicate and it was marked as one.
Note: I am catering to a lot of screen sizes. I don't want to write any kind of absolute pixel heights and widths anywhere in my final code.
Please help me with this issue
Reference: I want the word to come in the middle as it does on this gorgeours website:
http://debarghyadas.com/
Note that this just a reference. I don't want to have the background image. The whole header part of the webpage takes up the whole screen, that is what I want to achieve.
Everything is centered and beautiful. That is where I wanna go.
To get vertical alignment you have to have a second div inside the first 100% sized one.
Approx centering (fine for small amounts of text) is easy: http://jsfiddle.net/ngVSd/4
If you want proper centering you have to set the height and width of the central div explicitly then give it negative margins of 1/2 the width and height. You also have to remove the padding and margin from body.
Note that to vertically center the text in the inner div you also need to set its line-height to be the same as its height: http://jsfiddle.net/ngVSd/6/
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#outerDiv {
height: 100%;
width: 100%;
background-color: red;
text-align: center;
}
#wordDiv {
position: absolute;
background-color: lightblue;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
line-height: 100px;
margin: -50px -50px;
}
<div id="outerDiv">
<div id="wordDiv">Word</div>
</div>
To be honest, I don't really understand what vertical-align is doing.
So I can't really explain where your example fails.
But if you don't care about compatibility with IE7 and smaller, you may use the 'display: table' options:
<div style="display: table; width: 100%; height: 100%; text-align: center">
<div style="display: table-cell; vertical-align: middle;">Word</div>
</div>
Hope that helps.
You need to set width and height of the html and body (any any other parents) to 100% as well, since 100% means 100% of parent width/height, rather than 100% of the screen.
div parent has no height specified to calculate % .
You need to set height to body, and for % body needs too to calculate from parent's height: html.
<html> will use window's browser as reference to calculate %.
See this on W3C site.
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block. Note: For absolutely positioned elements whose containing block is based on a block-level element, the percentage is calculated with respect to the height of the padding box of that element. This is a change from CSS1, where the percentage was always calculated with respect to the content box of the parent element.
Hello I have a div with the following CSS
{background: purple; max-width: 800px; min-width: 300px; height: 200px; float: left;}
Unfortunately it is being forced to min width (if I remove float it is fine).
Is this just what floats do, or have I made an error somewhere?
JSFiddle:
http://jsfiddle.net/bhY3H/
This is the expected behaviour.
A div is a block element and takes 100% width (if no css rule is applied).
BUT if you float the div, you are modifing its original flow, it stops behaving like a block, it takes as much width as is needed based on its content (or as much as is specified by min-width/max-width).
So, no, you are not doing anything wrong.
Edit:
If I correctly understand what you are trying to achieve, what happens if you add width:100% to your div style?
http://jsfiddle.net/gPTrT/1/
I need some help with positioning divs. The HTML structure is as follows:
<div class="container">
<div class="item">
<div class="left">
lorem lorem
</div>
<div class="right">
<p>right</p>
<p class="bottom">bottom</p>
</div>
</div>
</div>
And I have the following CSS:
.container {
float: left;
padding: 15px;
width: 600px;
}
.item {
float: left;
padding: 15px;
width: 570px;
}
.left {
float: left;
padding: 40px 20px;
margin-right: 10px;
}
.right {
position: relative;
float: left;
}
.bottom {
position: absolute;
bottom: 0;
}
The width and height of the left div is dynamic.
What I want to achieve is:
Make the height of the right div equal to height of the left div.
Make the width of the right div fill the rest of the div with class item.
The paragraph with class bottom should be at the bottom of the right div.
Here is a simple image that represents my goal:
And a link to a JSFiddle demo.
Getting the correct position and width of .bottom appears to be the biggest hurdle for a cross-browser, CSS solution.
Options
1. Floats
As #joeellis demonstrated, the flexible widths can be achieved by floating only the left column, and applying overflow:hidden to the right column.
The position of .bottom cannot be achieved in any browser. There's no CSS solution for floated columns with equal, variable height. An absolutely positioned .bottom element must be inside the right column div, so that 100% width would give it the correct size. But since the right column won't necessarily be as tall as the left column, positioning .bottom with bottom:0 won't necessarily place it at the bottom of the container.
2. HTML tables and CSS tables
The flexible widths can be achieved by giving the left cell a width of 1px and not specifying a width for the right cell. Both cells will grow to fit the content. Any extra space will be added to the right cell alone.
If .bottom is inside the right table cell, the position can't be achieved in Firefox. Relative position has no effect in a table cell in Firefox; absolute position and 100% width would not be relative to the right table cell.
If .bottom is treated as a separate table cell in the right column, the correct heights of the right and bottom table cells cannot be achieved in any browser other than Firefox. Table cells aren't flexible in height the same way they are in width (except in Firefox).
3. CSS3 flexbox and CSS3 grids
Flexbox and grids are the promising layout tools of the near future. But flexbox isn't supported by IE9 or earlier, and grids aren't supported by any browser other than IE10. Haven't tested if either can achieve this layout, but browser support may prevent them from being an option at present.
Summary
Floats don't offer a solution for any browser.
HTML tables and CSS tables don't offer a cross-browser solution.
Flexbox doesn't offer a potential solution for IE9 or earlier (and may or may not offer a solution to other browsers).
Grids only offer a potential solution to IE10 (and may or may not offer a solution there).
Conclusion
There doesn't appear to be an adequate CSS solution at present, one that would work in enough relevant browsers, with the possible exception of flexbox (if support for IE9 and earlier isn't required).
jQuery
Here's a couple modified demos that use jQuery to force the columns to have the same height. The CSS and jQuery for both demos is the same. The HTML only differs by how much content is in the left and right column. Both demos tested fine in all browsers. The same basic approach could be used for plain JavaScript.
Taller content on the left
Taller content on the right
To keep things simple, I moved the internal padding for the left and right div to a child element (.content).
Sibling elements of same height and staying on the same row can be achieved by displaying them as table-cell and parent as display: table.
Working fiddle: http://jsfiddle.net/SgubR/2/ (which also display the overflow: hidden along a floating element technique for creating a column. The latter needs a clearfix)
Table-cell in CSS uses any HTML element you want (section, div, span, li, whatever), its semantics is unrelated to table, tr and td elements used for table layout (except that the visual result is the same, that's what we want).
display: table is set on a parent
display: table-row may be used on an element in-between but if it works without it, fine
display: table-cell is set on each child
a width is set on none, some or all these "cells". Browser will adapt both to content and widths set in order to calculate their widths (and total width of parent, obviously)
table-layout: fixed will tell browsers to switch to the other table layout algorithm where they don't care about the quantity of content, only to widths set by CSS
vertical-align: top will be needed in most cases (but you may set other values, great for complex layouts)
margins aren't applied on "cells", only padding. Margins only apply on table itself. Though you still can separate "cells" with border-collapse: separate and/or border-spacing: 4px 6px
Compatibility: IE8+
Fallback for IE6/7 if needed is exactly the same as for inline-block
Longer explanations in previous answers: here and there with also the good old method of faux-columns (your design must be thought with this technique in mind)
Just add an oveflow to the right column and don't float it.
.right {
position: relative;
overflow: hidden;
}
This will make right to fill the rest of the width.
Something like this might work:
http://jsfiddle.net/PCvy9/2/
The main key of what you're looking for lines in the:
.right {
overflow: hidden;
background-color: #C82927;
}
This is due to something called the "block formatting context." Great reasoning and tutorial as to why here: http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats
However, their heights are not completely linked; in this example, your left side block's height would still need to be manually set (as it's a floated container)
I have a div element with style attached:
.mypost {
border: 1px solid Peru;
font-family: arial;
margin: auto;
min-width: 700px;
width: 700px;
}
I am diplaying WordPress post contents inside the DIV block but for simplicity let assume that there is only one <img> inside the DIV. I want my div to be minimum 700 px wide and adjust the width if image is wider than 700 px.
What are my options to achieve that? Please advice.
UPDATE
See my Fiddle
http://jsfiddle.net/cpt_comic/4qjXv/
One way you can achieve this is setting display: inline-block; on the div. It is by default a block element, which will always fill the width it can fill (unless specifying width of course).
inline-block's only downside is that IE only supports it correctly from version 8. IE 6-7 only allows setting it on naturally inline elements, but there are hacks to solve this problem.
There are other options you have, you can either float it, or set position: absolute on it, but these also have other effects on layout, you need to decide which one fits your situation better.
inline-block jsFiddle Demo
I'd like to add to the other answers this pretty new solution:
If you don't want the element to become inline-block, you can do this:
.parent{
width: min-content;
}
The support is increasing fast, so when edge decides to implement it, it will be really great: http://caniuse.com/#search=intrinsic
You could try using float:left; or display:inline-block;.
Both of these will change the element's behaviour from defaulting to 100% width to defaulting to the natural width of its contents.
However, note that they'll also both have an impact on the layout of the surrounding elements as well. I would suggest that inline-block will have less of an impact though, so probably best to try that first.
EDIT2- Yea auto fills the DOM SOZ!
#img_box{
width:90%;
height:90%;
min-width: 400px;
min-height: 400px;
}
check out this fiddle
http://jsfiddle.net/ppumkin/4qjXv/2/
http://jsfiddle.net/ppumkin/4qjXv/3/
and this page
http://www.webmasterworld.com/css/3828593.htm
Removed original answer because it was wrong.
The width is ok- but the height resets to 0
so
min-height: 400px;