I have two DIVs on my site, both set to display: inline-block. Setting width: auto on the parent should cause it to use only the space occupied by the child.
However, when I use a large width on the child but override it with max-width and min(...) the parent size ignores the width (large whitespace on the right). In the following example you can clearly see that the max-width gets applied, but the auto keyword ignores it and stretches the parent anyway.
I want the parent element to only use the horizontal space necessary. Any idea on how to fix it? Thanks!
.wrapper-1{
display: inline-block;
width: auto;
background-color: blue;
}
.hello-world{
display: inline-block;
width: 5000px;
max-width: min(100px, 100%);
background-color: yellow;
}
<div class="wrapper-1">
<div class="wrapper-2">
<div class="hello-world">Hello, world!</div>
</div>
</div>
Related
I have a floated div (class='outer') of fixed height with dynamic content (class='inner'). The dimensions of the content are not known in advance. The width of the floated div must be flexible, but still have some maximal value:
<style>
.outer {
border: 1px solid;
height: 200px;
max-width: 400px;
overflow: auto;
float: left
}
.inner {
height: 300px;
width: 300px;
background-color: red
}
</style>
<body>
<div class='outer'>
<div class='inner'></div>
</div>
<span>Text here</span>
</body>
This generally works; however, in case of excessive content height the following happens:
.outer assumes the width of the content, as it is below its max-width.
.inner is forced into height of the .outer and as a result the vertical scroll bar appears.
.inner is forced into a new constrained width, as the .outer will not resize once more to accommodate the scroll bar.
The completely unnecessary horizontal scroll bar appears as a result.
The fiddle: https://jsfiddle.net/w053kLkw/
Is there a way to prevent this mechanism of overflow and have both scroll bars appearing only when needed?
Not possible in CSS AFAIK (you need JS or you should not use floats!).
When you float an item, it is removed from the normal block formatting context. Floated items won't respect max-width as it will shrink to its content- so specifying a width to outer would be needed.
See what happens below when I set width: 400px also.
*{
box-sizing: border-box;
}
.outer {
border: 1px solid;
height: 200px;
max-width: 400px;
width: 400px;
overflow: auto;
float: left;
}
.inner {
height: 300px;
width: 300px;
background-color: red;
}
<body>
<div class='outer'>
<div class='inner'></div>
</div>
<div style="clear: both;"></div>
<span>Text here</span>
</body>
Explanation:
According to W3C specs, a width should always be specified to floated elements (other than replaced elements like image which has an implicit width). Otherwise we will see unpredictable behaviour.
See the section: Do floated items need a width? in this link.
If no width is set, the results can be unpredictable. Theoretically, a
floated element with an undefined width should shrink to the widest
element within it. This could be a word, a sentence or even a single
character - and results can vary from browser to browser.
This means outer will take the width of the inner- and as overflow is not visible the browser behaves as it sees fit.
Let's say I have a div with a fluid width (for example, min-width 200px and max-width 1000px). We'll call this div Div1. I want to wrap this div in a parent div and I want this parent div to shrink to fit Div1 without affecting Div1's width at all.
From what I've read, the way to get a parent to fit its contents is to set the parent's display to inline-block. However, whenever I do this it seems to force the contents to shrink to their min-width. Here's an example on codepen - I have two divs with the exact same properties but one of them is forced to its min width because it is has a parent container with display: inline-block.
http://codepen.io/ahung89/pen/LGqrwz
Code below (HTML on top CSS on bottom)
<div class="container">
<div class="div-with-min-width">
This div is forced to its minimum width.
</div>
</div>
<div class="div-with-min-width">
This div is not forced to its minimum width.
</div>
.div-with-min-width {
border: 1px red solid;
background: red;
color: yellow;
min-height: 100px;
min-width: 200px;
max-width: 1000px;
}
.container {
border: 4px green solid;
display: inline-block;
}
How do I make the parent wrap to the child's width without actually changing the child's width?
Add float: left; or float: right; or overflow: hidden; to collapse the parent element.
When having two divs next to each other, with both a width set in percentages, 100% is just a bit too much, and causes the two divs to not be next to each other anymore.
99% then leaves a rather big gap between the two divs.
Is there a certain percentage at which the two divs do nicely fit on the page?
And what could be the cause of this problem?
And what could be the cause of this problem?
Most likely this is padding/border which adds up to element width according to default box model. To overcome it change box-sizing property of the respective elements you want to fill 100% width:
.inline-blocks {
box-sizing: border-box;
}
If you're using inline displaying, the new line between two separate nodes is included as whitespace. This results in the two elements wrapping despite their widths summing up to 100%.
.container {
width: 200px;
border: 1px solid blue;
}
.inl {
display: inline-block;
width: 50%;
height: 20px;
background: green;
}
<div class="container">
<div class="inl"></div>
<div class="inl"></div>
</div>
<div class="container">
<div class="inl"></div><div class="inl"></div>
</div>
Look at this jsfiddle:
http://jsfiddle.net/w9k2sz52/
#content {
background: #ff0000;
min-height: 200px;
}
.container-fluid {
min-width: 2000px;
}
<div id="content">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<h1>Some title here</h1>
</div>
</div>
</div>
</div>
Why is the width of #content not stretching to be 2000px instead of being the width of the viewport? What do I need to do to make content stretch so that no matter what min-width is set on container-fluid #content will always stretch to fit it
Set #content to inline-block, and then set min-width to 100%. Note that setting width to 100% won't have the desired affect.
#content {
background: #ff0000;
min-height: 200px;
min-width: 100%;
display:inline-block;
}
Adding a float will make the parent element the same width as the child:
#content {
background: #ff0000;
min-height: 200px;
float: left;
}
#content {
background: #ff0000;
min-height: 200px;
display: inline-block;
}
You could use
width:auto;
This should mean it stretches to the width of its contents.
EDIT:
The min-width property in CSS is used to set the minimum width of a specified element. The min-width property always overrides the width property whether followed before or after width in your declaration. Authors may use any of the length values as long as they are a positive value.
You need to set a max-width or width with it. Say you had a width of 80% and a min width of 400px, it will be no smaller then 400px even if 80% of the page is 200px.
You could give the content a min width forcing the div to be auto and be no smaller then the content.
Could #content determine the width, while .container-fluid expands to fill it? Instead of the other way around.
#content {
background: #ff0000;
min-height: 200px;
width:2000px;
}
.container-fluid {
width: 100%;
}
By adding
position:absolute
to your CSS declaration for #content, you force the CSS interpreter to check what elements are inside #content, therefore achieving desired effect.
The problem with absolute positionning is that it remove the element from the natural workflow of the document. Therefore, you are better wrapping the element unto which you want to apply absolute positionning inside another element. This one will stay in the natural workflow of the DOM.
See this jsfiddle: https://jsfiddle.net/7Ls47d83/4/
Google "CSS box model" for more interesting articles and post about this, or this article.
I have next html:
<div class="left">
<div style="margin: 32px 0;">
<div class="border"></div>
</div>
</div>
and css:
.left {
position:absolute;
background: red;
height: 50%;
width: 32px;
}
.border {
background: green;
height: 100%;
}
but I don't see green box :(
UPD: I want to see red squares over and under green box.
UPD2: height of green box should be red.height - 32px*2
Your problem is that you have 3 empty div's here and not one of them has a set height. So even if you do min-height: 100% its not going to work unless some outer container has a height that your not showing. You will need to put some content in there or give one of the 3 div's (assuming they are the only containers on the page) an actual height. Like .left{ height: #px; } (# = the height you want it to have). Otherwise the browser does not know how to render percentages because it has nothing to relate them too.
Div's are block level elements which means they will assume the size of content put in them but if there is no content in them they will assume a height of 0px by 0px.
http://jsfiddle.net/X6qkL/5/ updated
The second div is not assigned a height, so the innermost div cannot be assigned a relative height. Try adding the following CSS rule:
.left div {
height: 100%;
}
Or, assign explicit heights to the inner divs.
http://jsfiddle.net/B9z92/1/
Use min-height: 100%; in .border{...}. and add a class
.middle {
height: 100%;
} and assign it to the parent div of .border{...} div.