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/
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.
I have 2 section in my HTML document see Here, now when i reduce the window size to about 820px the 2ns section shrinks , Why does that happen?
see screenshot below:
now the second section has overflow:auto, if I remove that, everything works fine, Link HERE
But what is really causing the issue, the section element is definitely a block element, so why is it not taking 100% width? Can anybody explain?
You should delete section element's margin-top: -1px; style or set .intro-lpoo element's style: overflow: auto. The reason what I thought is here: BFC
Your floating elements on the top section cause the issue. If you use clearfixes , you will not have any problems!Also use the following property for responsive images.
img{
max-width:100%;
height:auto;
}
Ok, let's think about it.
You have intro-lpoo section with height: 100% and 2 divs into it with float. And 1 of this divs have height: 0 because in that you place absolute positioned img. The reason why your why-coworking not shrinks from the very beginning is height: 100% of intro-lpoo. But when you make your browser resolution smaller - height: 100% of intro-lpoo getting smaller, and because your right div (which contain absolute positioned img) have height: 0 and your left div ( intro-wrpr ) have float: left thats why why-coworking shrinks and fills available space next to intro-wrpr.
I hope to able to explain
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.
I feel really stupid for not seeing whats wrong here.
Basically three divs in a row with a container - want all of them to be as high as the container.
Here's a reduced test case:
http://codepen.io/jgclifton/full/mDdpv
Any ideas?
Give div.container an explicit height, and your divs will line up perfectly. Currently, it has a height of auto, meaning that using height: 100% on the child elements has no effect. Setting a height of, say, 200px on the container gives the percentage-based height something to use as a reference.
Container has height: auto;
If you change it to height: 100px; for exemple, every divs have same height to me.
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;