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
Related
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.
Why does my scrolling div with text extend beyond its container vertically?
http://www.blakearchive.org/blake/public/exhibits/test.html
I'm not sure what code to show here. That is a div (right column--it circles around, that's why it's right, not left) with 100% height inside a container 'columns' div with 100% height, but former is extending beyond the latter.
Thanks.
To fix the extended container, use display: table. Set a css property table to the container and table-cell for their children, as follow:
#columns {
display: table
}
#menuBarLine {
display: table-cell
}
#galleria {
display: table-cell
}
#right {
display: table-cell;
box-sizing: border-box
}
adding this display property will fix your problem.
just keep in mind that anytime you have a split column, use display: table property as much as possible because display: table gives you flexibility in setting up the container width and height. If the container is like "grids", I will encourage to use display: table.
box-sizing: border-box changes the way width and height calculate. Now, width and height will include the padding of the container. Therefore, by using box-sizing: border-box, you will almost certainly get the value that you want. I think this should be the default value of the css property width and height. READ MORE
Two things: You are giving it 100% height and padding.
The first is an issue because there are buttons above it, and therefore it cannot occupy 100% of the height of the window without forcing the window to scroll.
You can fix this by using calc:
height: calc(100% - height_of_button_containerpx);
Note: pay particular attention to the syntax. Note that there is no space inbetween numbers and units, but there is a space between each value and the minus sign. This is important!
Note this too: calc() is CSS3 and is unsupported in really old browsers.
The second: padding is applied in addition to height. You are telling the div to have Qpx additional space surrounding its 100% height, and so, since the height cannot be greater than 100%, the window must scroll.
This can be fixed quite easily with box-sizing:
#myDiv
{
box-sizing: border-box;
-moz-box-sizing: border-box;
}
calculate the height of the div with ID menuBarLine. and then
#columns .right {
position: relative;
float: right;
width: 30%;
height: 96%;//(total height of the parent container of #right div -height of the menuBarLine)
overflow-y: auto;
padding: 2%;
box-sizing: border-box;
-moz-box-sizing: border-box;
text-align: justify;
}
I have what I want here, however I must manually enter the width. I want to have a parent container that will hold the stretchable div that contains child divs. The parent container is a fixed size. I need the stretchable div to be large enough to horizontally contain the child divs. Setting the stretchable div to width auto does not work and I do not want to manually set the size. Is there another option besides manually setting the size?
#parent{
width:50%;
height:200px;
background:red;
overflow-x: scroll;
overflow-y: hidden;
}
#stretchable-div{
background:darkblue;
/* width: 600px; works but don't want to manually size*/
width: auto;
}
.child {
background:blue;
width: 100px;
height: 150px;
float:left;
}
If you need to make stretchable div auto width, it has to be decided by it's children. Which is conflicting with children's float property(floating behavior is decided by it's parent width). So you have to change either of the parent's width or children's floating.
I can use display: inline-block and nowrap property to make the chidlren in a single row. But you have to hack inline-block under IE7.
The example is here.
Cannot find a pretty nice solution for now. Just give it for a hint.
Let's say I have a CSS DIV that holds formatted syntax code. The DIV is set to a min-width:100; and a max-width:100;
This same DIV has another CSS declaration for when the DIV is Hovered, max-width: 135% !important; and min-width: 135%;
So if the DIV holding the formated code is wider then the DIV's width, it shows a scroll bar and when you hover over the DIV it expands the DIV to the width of the code not to exceed 135%, if the DIV's code does not exceed the width of the DIV then the DIV stays the same width.
My problem, is that when a div exceeds the 100% width, it expands to the width of the code inside but stays LESS then 135%, is there a way to make it expand to 135% even if the code is not 135% but is over 100%?
Hopefully this makes sense
I almost need some kind of conditional statement that says...
If DIV contents are > 100% then make DIV 135% on Hover otherwise leave DIV at 100%
Is this even possible?
Here is my full CSS
.syntax {
min-width: 100%;
max-width: 100%;
margin: 1em 0 1em 0;
position: relative;
overflow-y: hidden;
overflow-x: auto;
font-size: .9em;
display:inline-block;
}
.syntax:hover {
max-width: 135% !important;
min-width: 135%;
}
I'm not sure I'm getting waht you mean, but if I'm not mistaken, all you're leaving aside is this:
min-width: 135% !important;
you may need to adjust overflow depending on what you need
A better option would be to use fixed sizes, but if you're working on adaptive layout environments guess that is a no go
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.