I have <div> block, that have some fixed width. Sidebars stretch until their width reach some value. Then block should stretch instead of sidebars. How can I implement this in CSS?
"Sidebars" are just <div>'s margin (space).
Solution:
div
{
/* Left and right margin stretch from zero to infinity */
margin:0 auto;
/* 2em is minimal side width */
padding: 0 2em;
/* Expected width */
max-width: 640px;
/* Minimal width */
min-width: 320px;
}
I think you're looking for the min-width property: http://www.w3schools.com/CSS/pr_dim_min-width.asp. Or max-width: http://www.w3schools.com/css/pr_dim_max-width.asp.
However this doesn't have full support in all browsers.
One way would be to surround all the <div>'s in a larger div's which is a total size of all of them, then perhaps impose a min-width on all three. But Internet Explorer doesn't work well with this.
Related
For example: I have an element which takes the full width of the viewport. I want its min-height to be half of its width, to get a ratio of 1:2.
On a 1600px wide desktop monitor the element's width would be about 1583px (monitor width minus scrollbar width), but its min-height would be 800px, because vw doesn't substract the scrollbar's width. So that would not be a 1:2 ratio.
An easy solution would be padding-top: 50%;, but if there's text within the element, that doesn't work. Alternative: a left floating pseudo element ::before with padding-top: 50%; would create the desired min-height in the ratio of 1:2, but that would be kinda hacky.
Am I missing something? Is there any clean way?
First thing you should do is include the following so the default padding and margins given by the web browser are removed:
* {
padding: 0;
margin: 0;
}
For the element you want to have 100vw and half height:
.half_height{
width: 100vw;
aspect-ratio: 2/1;
}
.container {
Width: calc(100vw - calc(100vw -100%));
Height: 50vh;
}
In the old days before having max-width and min-width, we have to set the width to some value other than auto, together with margin-left and margin-right to auto, for the div to be horizontally centered.
Now that we have max-width and min-width, we can also set the max-width to some value other than none to horizontally centered it? Is there any spec for it?
P.S. min-width won't work as the div will span the whole width, so you can consider it horizontally centered, except that the left and right margin are both 0, so there is no horizontally centering effect.
Example:
width: https://jsfiddle.net/dtr7t4z7/1/
max-width: https://jsfiddle.net/dtr7t4z7/2/ and https://jsfiddle.net/dtr7t4z7/3/
min-width: https://jsfiddle.net/dtr7t4z7/4/
margin: auto will just fill the remaining space equally on both sides. If a width or max-width are not specified, a div will take up as much horizontal space as possible. Because the div is the full width of its container when only min-width is specified, there isn't any space left for margin: auto to distribute.
https://jsfiddle.net/ehnvy1xz/5/
body{
display:flex;
justify-content:center;
}
#line {
text-align:center;
background: yellow;
min-width: 200px;
}
If you really need the min-width. I would recommend using flex on the parent div and centering it that way instead.
http://jsfiddle.net/XW9Se/
I've set width: 200px; on the left <div> but if I view it with the browser inspector tool it appears that the real width is random or something. It keeps changing depending on the window size.
Why doesn't the width take effect?
EDIT: If I remove width: 100% the width stays fixed. But I need that so the #main div takes the remaining width :( Is there any way to have the sidebar # fixed width and the other <div> fill the rest of the container width? width: auto; on #main doesn't work..
The answer from Adrift is perfect; but a change to make it more flex would be
#left{
flex-basis: 200px;
flex-grow: 0;
flex-shrink: 0;
}
And remove the width property entirely.
It would be the flex way to say that the element will have an invariable width of 200px
My preferred way of dealing with this situation is to add:
flex-shrink: 0;
This way you may continue using width in your Flex container and you've given it specific information about how you wish this flex item to behave.
Another option, depending on the requirement is to use min-width, which is respected when using flex.
Give the #left div a min-width of 200px, should do the job.
Remove the width on .container > div and use flex: auto; on #main: fiddle
#main {
flex: auto;
background: lightblue;
-webkit-order: 2;
order: 2;
}
Also (if nothing from above works)
Check your min-width and max-width.
It fixed the same problem for me by increasing their range.
add display: contents on the element or div you want to maintain the width.
Solved this with a flex not respecting min-width when there was not enough content to fill that width.
Added the CSS rule box-sizing: initial; on the same flex element that had the non-working min-width declaration.
Add display:inline-block; in left class
I have a centered div with fluid width, bound by a max-width:
#content {
height: 100%;
margin-left: auto;
margin-right: auto;
max-width: 760px;
width: 80%;
}
I'm having trouble filling the space on the left and right of it due to the max-width property. How do I make also fluid divs to the left and right that will fill the empty space, even when the content div is constrained by the max-width? Preferably in a pure CSS way.
Use min-width with the 80%? Also perhaps use box-sizing to ensure the percentage values are treated at their true value.
Potential solution here http://jsfiddle.net/vSRgS/1
I've created a really simple modal that allows the content to decrease or expand without running off the page - always leaving 10% margin on the top and bottom. When the page isn't tall enough to contain all the modal content, the entire modal becomes scrollable.
See jsfiddle here
Is it possible, using only CSS, to replicate this behavior but only have the modal body be scrollable, so the header is always fixed. I've tried a few things, but haven't come up with the solution yet. Making the header position: fixed almost works, I have to reposition it over the modal box and then try to add padding to the body so the content is visible under the header, which doesn't budge the scrollbars down. I always prefer to exhaust all the css alternatives before I bind some js to window resize and manually manipulate the body height.
This might be late, but I had to solve a similar issue of fixed header, fluid height, fluid width.
This is how I tackled the issue:
Give your elements a border-box box-sizing. Use a wrapper to center and create a bounding box. This can be a fluid one with min-width and max-width + percentages.
Give your content element an overflow-y of auto and a max-height of 100%;
Use box-sizing:border-box;
The complete code should be something like this:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.modal {
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
}
.wrap {
position: relative;
margin: 0 auto;
display: block;
width: 90%;
/* Change the max-width value on a media query breakpoint to make this example more "responsive" */
max-width: 500px;
height: 90%;
padding: 30px;
}
.modal header {
height: 30px;
padding: 0;
color: #FFF;
background-color: #007;
}
.modal .body {
background-color: #FFF;
max-height: 100%;
overflow-y: auto;
}
http://jsfiddle.net/mariomc/EhR7r/
Applying the max-height and overflow-y settings to .body rather than to .wrap...?
Edit 1:
Nothing's turned up so far within the constraints, which suggests either JavaScript or straying from the constraints (using % for the header height or px margins).
Edit 2:
Here's an initial demo using % for the header height. I added a px min-height to the header tag to prevent the header from almost disappearing on very small screens, at the expense of the top margin (which is reduced on very small screens).
On a screen >= 400px tall, it should work exactly as per the requirements (40px header with 10% height). If the header were reduced in height, it would support slightly-smaller screens (a 30px header with 10% height would support >= 300px screens). Here's a demo with a 30px header.
It's a clumsy solution, but it's the only one that turned up without using JavaScript.
Also, note that I added an h2 and a .content tag and moved the padding:10px; there, to avoid combining % height and padding in the same elements (which leads to a taller height than the % value specified).