I would like my div to fit the size of it's content if the size of parent div is smaller than content,
and be the size of parent otherwise.
I can do the 1st by width: fit-content,
and the 2nd by width: 100%,
and I wanted to join this together by width: max(100%, fit-content),
but seems like this is not working.
Any idea how to do this properly?
Instead of trying to set the max between 100% and fitting the content, you should instead set the minumum width of the your <div> to the size of its parent. I was able to reporoduce what you were asking for by setting the container in question (blue box in the example below) to be an inline-block with min width of 100% under its parent (red box in the example below).
This way, the container always takes 100% of its parent until you resize the parent to be smaller than the inner content, in that case, the container doesn't shrink past the content and so the parent (red box) has to scroll.
This works with the display property as flex and inline-block, but not with block, maybe someone here can explain why.
Here is the example, I made the parent (red box) resizable so you can see the solution in action:
.outer {
width: 500px;
resize: horizontal;
overflow: auto;
border: 5px solid red;
}
.inner {
display: inline-block; /* or flex */
min-width: 100%;
border: 5px solid blue;
box-sizing: border-box;
}
.content {
white-space: nowrap;
background-color: lightGrey;
}
<div class="outer">
<div class="inner">
<div class="content">For blue box, max is at red box and min is at content</div>
</div>
</div>
You can set the maximum width of an element with max-width
.container{
width:100px;
border:1px solid black;
}
.content{
width:200px;
max-width:100%;
height:20px;
background-color:orange;
}
<div class="container">
<div class="content"></div>
</div>
<br>
<div class="content"></div>
width: max(100%, fit-content);
is equivalent to
width: fit-content;
min-width: 100%;
Related
I have a div "container", say 400px width, with a left-floated divs inside — "box" 100px width. There are six of "box" divs so their summary width is larger than 400px which causes that line of divs to get wrapped and I get two lines, with 4 and 2 elements each. How can I make these 6 divs go in one row, one line instead of two?
You simply need white-space: nowrap on the parent element with display: inline-block on the children. Live demo here (click).
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
css:
.container {
width: 400px;
background: black;
white-space: nowrap;
overflow: scroll;
}
.container > div {
height: 50px;
width: 100px;
background: #555;
display: inline-block;
margin: 10px;
}
Assuming you continue using float: left;... If your container has a set width of 400px, then your total sum of children divs can't surprass 400px wide either. This includes any padding, margin, or border space as well.
To answer your question simply, there are several ways...
Make the container 600px wide instead of 400px...
Make the child elements 66px wide instead of 100px...
A better option is to use percentages...
Make the child elements 16.666667% wide.
You need to give display: inline-block to the children of container and also give white-space: nowrap to make them flow horizontally. Here is the CSS
#Container {
width: 400px;
border: 1px solid black;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.inside {
width: 100px;
height: 300px;
border: 1px solid black;
display: inline-block;
}
and HTML
<div id="Container">
<div class="inside"></div>
<div class="inside"></div>
<div class="inside"></div>
<div class="inside"></div>
<div class="inside"></div>
<div class="inside"></div>
</div>
Here is the fiddle for your problem http://jsfiddle.net/sgaurav/vZLWQ/
hope it will help you
display:inline-block;
I'm stuck with this problem:
I have a div (#container) which contains two divs. The height of the container should be exact 100%, regardless of the content of this div - not less not more.
Inside this div I want two full-width divs on top of each other:
The (#upper) div's content automatically determines its height.
The (#lower) div's content should be scrollable, but only vertically. Its height is dependent on the height of (#upper): 100% - (#upper)height = (#lower)height
Currently I have the following css ...
body {
margin:0;
padding:0;
}
#container
{
position: relative;
width: 500px;
height: 100%;
max-height: 100%;
background-color: #f00;
}
#upper {
width: 100%;
background-color: #0f0;
}
#lower {
width: 100%;
background-color: #00f;
overflow: auto;
}
... as well as this code:
<div id="container">
<div id="upper"></div>
<div id="lower"></div>
</div>
How can the (#container)'s height be exactly 100% - independent of its content? Now the height becomes larger because of the combined content of (#upper) and (#lower)?
How can (#lower) be scrollable (only up and down, not left to right!)?
Thank you very much for your feedback, I hope we can all learn from this.
You should set your html and body elements to have a height of 100%, so your children divs know what to base the percentage off of. Like so:
html, body {
height:100%;
width:100%;
}
Change your container to this:
#container
{
width: 500px;
height: 100%;
background-color: #f00;
}
As for your scrolling issue, you're almost there. Change the code to the following:
#lower {
width: 100%;
height:100px;
background-color: #00f;
overflow-y: auto;
}
For it to work best, have a fixed height set on your lower div and that'll make it easy for the scrollable action to work best.
EDIT:
I realized I mis-read your question. You'd like to have your lower div fill the remaining height of the window. Here's how to do that in jquery:
var top = $('#upper').height();
var remaining_height = parseInt($(window).height() - top);
$('#lower').height(remaining_height);
I still haven't found a way to do that with only CSS... Sadly.
I think this may help you:
<head>
<title></title>
<style>
.upper{
height:50px;
border: 1px solid groove;
}
.lower{
height:calc(100% - 50px);
border: 1px solid blue;
}
</style>
</head>
<body>
<div style="height:500px; border:1px solid red; position:relative;">
<div class="upper"></div>
<div class="lower"></div>
</div>
</body>
This will take 50px out the lower div
For a pure CSS solution, use display: table-row.
<style>
*{
box-sizing: border-box;
margin:0;padding:0;
}
html, body, #container{
height: 100%;
}
#container{
display: table;
height: 100%;
}
#upper, #lower{
display: table-row;
}
#upper{
height: 100px;
}
</style>
<div id="container">
<div id="upper">bla</div>
<div id="lower">bla</div>
</div>
This solution only works if the height of the content is not more than 100%, see here: https://stackoverflow.com/a/13668087/603569
Here a 100% css alternative:
<div style="height:100%;">
main div
<div style="height:100%;padding-bottom:200px;">
header div
</div>
<div style="position:relative;height:200px;top:-200px;">
footer div
</div>
</div>
Remember that all parent elements, including body and html, must have their height set too.
i would like to create a responsive div(box1) which should fit to its content size automatically and also i have a restriction for that content which should not exceed certain value(width and height) of box1 here i give 600x300.
Here is the code and example
.box1
{
width:auto;
height:auto;
background-color:chocolate;
margin-left:auto;
margin-right:auto;
max-width: 600px;
max-height:300px;
padding:5px;
}
I used max-width :600px; and max-height:300px; so the content inside it won't exceed above box1 according to my belief.
.box1 img
{
max-width: 100%;
max-height: 100%;
}
Here image inside box1 won't exceed box1 width and height.
Now
1) if the image is higher than box1 width and height of 600x300px let say 750x750px in this case image should fit in box1 with 600x300px
2) if the image is lesser than 600x300px let say 200x150px then the box1 should adjust automatically to the image size.
How this can be achieved? what wrong in my code to this concept? can anybody help?
Here is one way of doing it using CSS
Consider the following HTML, I am including four images of various aspect ratios to illustrate that this works. The .wrap element is to show you you might center the image within its parent block.
<div class="wrap">
<div class="box1">
<img src="http://www.placekitten.com/500/500">
</div>
</div>
<div class="wrap">
<div class="box1">
<img src="http://www.placekitten.com/800/200">
</div>
</div>
<div class="wrap">
<div class="box1">
<img src="http://www.placekitten.com/200/800">
</div>
</div>
<div class="wrap">
<div class="box1">
<img src="http://www.placekitten.com/200/200">
</div>
</div>
The trick is to set display: inline-block for .box1, which will force it to shrink to fit the content subject to the max-width and max-height constraints.
.box1 {
width:auto;
height: auto;
max-width: 600px;
max-height: 300px;
background-color:chocolate;
padding:5px;
display: inline-block;
}
To get the image to scale correctly, simply inherit the max-width and max-height values:
.box1 img {
vertical-align: top;
max-width: inherit;
max-height: inherit;
}
Use vertical-align: top to get rid of any white space near the image tag.
Finally, since .box1 is an inline-block, you can center it within its parent container using text-align: center:
.wrap {
border: 1px dotted gray;
margin: 1.00em 0;
text-align: center;
}
The demo fiddle is at: http://jsfiddle.net/audetwebdesign/hpbdC/
img {
width: 100%;
height: auto;
max-height: 100%;
}
should work (I assume you want keep aspect ratio)
By default box1 is treated as a display: block element. If you change that display type to an inline-block (ex: display: inline-block) it would be treated as an adjustable item.
Do keep in mind that you are setting the max height of the box to 300px. Therefore, the image's max-height is three hundred. In the case of a 750px by 750px image, it will be resized to a 300px by 300px image (and so will the box).
Why do you need the wrapping div? You can achieve this by only styling the image: http://jsfiddle.net/Rv7JG/1/
img {
max-width: 600px;
max-height: 300px;
height: auto;
width: 100%;
padding: 5px;
background: chocolate;
}
I have a wrapper div containing a right floated 100% height div and an image.
The image has a width set in %. As you resize the browser window the image height increases and decreased taking with it the height of the wrapper div.
When I set a fixed height on the wrapper div, the right floated 100% height div increases in height as I want it. However, the wrapper div has a dynamic height, set by the current height of the image and the 100% height div, in this instance does not resize vertically as you'd expect.
Is what I'm trying to do achievable?
Here's a pen: http://codepen.io/fraserhart/pen/qiFmb
<div class="wrapper">
<img src="http://i.imgur.com/7v619Ip.jpg" />
<div class="grid">
<section class="row">
<p>Home</p>
</section>
<section class="row">
<p>Looking For Care</p>
</section>
<section class="row">
<p>Working For Us</p>
</section>
<section class="row">
<p>Professionals</p>
</section>
<section class="row">
<p>Who We Are</p>
</section>
<section class="row">
<p>Find a Branch</p>
</section>
</div>
<div class="clear-fix"></div>
</div>
.wrapper{
background:blue;
height:auto;
}
img{
width:60%;
}
.clear-fix{
clear:both;
}
.grid {
display: box;
width:400px;
height:100%;
box-orient: vertical;
background:#ff0000;
float:right;
}
.row {
padding: 20px;
box-flex:1;
background: #ccc;
padding:0px 5px;
border:1px solid #ff0000;
text-align:center;
}
Well, here is one way of doing it, a bit bizarre, probably not to be recommended, but it is a proof of concept, an odd CSS curiosity.
Here is the fiddle: http://jsfiddle.net/audetwebdesign/3tUfC/
Here is the HTML:
<div class="wrapper">
<div class="image-port">
<img src="http://placekitten.com/800/800">
</div>
<div class="content-port">
<div class="grid">
<div class="row">
<img src="http://placekitten.com/100/25">
<p>First...</p>
</div>
<div class="row">
<img src="http://placekitten.com/100/25">
<p>Second...</p>
</div>
<div class="row">
<img src="http://placekitten.com/100/25">
<p>Third...</p>
</div>
<div class="row">
<img src="http://placekitten.com/100/25">
<p>Fourth...</p>
</div>
</div>
</div>
</div>
and here is the CSS:
.wrapper {
outline: 2px dotted blue;
}
.image-port {
outline: 1px dotted blue;
display: table-cell;
width: 60%;
}
.image-port img {
width: 100%;
vertical-align: bottom;
}
.content-port {
display: table-cell;
vertical-align: top;
background-color: wheat;
height: 100%;
width: 40%;
}
.content-port .grid {
}
.content-port .row {
border-top: 2px solid blue;
position: relative;
background-color: rgba(255,255,255,0.5);
overflow: auto;
}
.content-port .row:first-child {
border-top: none;
}
.content-port .row img {
width: 100%;
display: block;
visibility: hidden;
}
.content-port .row p {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0 0 0 0;
padding: 10px;
}
How It Works
A .wrapper block contains two table-cell elements: .image-port and .content-port,
with relative widths of 60% and 40% respectively. This avoids the problem of having the grid jump beneath the image for small window sizes.
In the .image-port, let the img scale to 100% width to get a good view of the image.
In the .content-port block element, set the position: relative, and optionally, overflow and a few other properties for visual design.
Here is the trick: in each .row, place a image with a certain aspect ratio. I created four rows so my image as a 4:1 aspect ratio. Set the .row img width to 100% and set the visibility: hidden so that the image takes up flexible space but is out of the way. This will allow each row row to change in size as you re-size the window.
Next, place your content in the .row, for example, a p. the content element is position: absolute such that it takes up the full width and height of the .row parent element (set the offset properties to zero).
The rows now have a height that scales with the width of the window. This approach has some flexibility, and though not perfect, may be useful.
Note that if you stretch the window wide enough, the 100x25 images will be their full width and the .grid will move away from the right edge of the wrapper. You can allow for this by using a larger placeholder image, say 1000x250.
If you make the placeholder image as a transparent gif or png, is should be light weight and since you are using the same image multiple times, the browser should really be making one request for it (I think?).
The Quirk about this approach is that how well the grid expands depends a bit on the aspect ration of the image in the image-port. You will need to experiment a bit and try to optimize the various parameters to get a pleasing layout.
I am trying to build a layout that consumes all the space that is visible in browser. I set html, body height 100% as was suggested in different SO posts. Following is the markup that I am trying
<div>
<div class="header">
</div>
<div class="main">
<div class="container">
<div class="content"></div>
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
max-height: 100%;
}
.header {
height: 30px;
background-color: #000;
}
.main {
height: auto;
padding-right: 0px;
max-height: 100%;
width: 100%;
display: block;
clear: both;
background-color: #eee;
}
.container {
width: 90%;
overflow-y: scroll;
background-color: #ccc;
}
.content {
height: 2000px;
width: 80%;
background-color: #fff;
}
the content div height cause the whole body to grow and hence the browser's default scroll bars are shown. Though I have set the container div to scroll in order to display the content of content div, still the scroll bars for container div don't show. How can I fix this.
here is the jsfiddle
Edited:
By default the height of the div element depends on its content (unlike width which takes 100% width of the parent). That's why when you specify the height of inner element as a percentage it won't be accurate if your parent tag has no explicitly defined height (that means height has to be defined up to the very top of the DOM since height is not inheritable).
In your case you need to add height: 100%; or any other height to your .container , .main and the wrapper div
modified fiddle