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
Related
I know, this has been asked 1000 times but NO solution from stackoverflow seem to work for me.
Everyone does stuff like .container { height: 100vh; } while the whole idea is to have footer at the bottom if main content of the page has not enough content to stretch.
Parent has flex as display and column direction. Children have flex-grow: 1 and flex-shrink: 0 respectively. Why does it not work? Why is footer not at the very bottom? What am I missing? I don't know height or footer or main, I want the main to take up all the free space at all times.
JSFiddle version: https://jsfiddle.net/6v2gb1s0/
* {
border: solid 1px red;
}
html, body {
height: 100%;
}
#container {
display: flex;
flex-direction: column;
}
main {
flex-grow: 1;
}
footer {
flex-shrink: 0;
}
<div id="container">
<main>main content</main>
<footer>footer</footer>
</div>
The footer won't go to the bottom because the height of the #container is not set.
If you set
#container {
height: 100%
}
The footer will go to the bottom (albeit there will have a scroll because of the margins, so you gotta compensate for that).
Check it out:
It's fundamentally the way flexbox works. display:flex dictates how its children behave, not the parent element. That element just behaves like a normal div. Thus the parent will try to extend to 100% of the width of the parent container and shrink to the height of the content so you have to set the height (or preferably min-height) to 100%.
To understand more how it works, you can set the body element to display:flex and that will cause its child element (the container) to then stretch like you'd expect, which would be an alterntative to setting the container height to 100%.
Hope this helps.
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 a div with lots of content in it, and trying to set a width to be 100% of the parent element. This div also uses a padding, so I thought I should be setting the width to auto.
But for some reason it always expands past the parent width. I even have overflow set to scroll.
What I want is the div to have a scroll bar (only horizontal), and its width to fit the parent width.
Does anyone know how I can fix this?
100% width of its parent, with padding:
Given that the padding you mention is applied to the 100% wide element, the problem is within the box model that browsers use. If you apply 100% width and some padding, the element will get width + padding as its complete width, thus causing it to become too large. There are a few ways to solve this:
CSS3 introduces a new property called box-sizing, by setting it to border-box, the padding will be added within the given width of the element, instead of adding to the width causing the element to become "to big". (Notice the lack of support by older browsers).
I believe it would be possible to use left: 0; right: 0; instead of using width: 100%;. In that case you can add padding, without the element becoming to wide.
The second option in practice:
<!-- The markup -->
<div class="parent">
<div class="child">Child</div>
</div>
/* The CSS */
.parent {
width: 200px;
height: 200px;
position: relative;
background-color: #666;
}
.child {
position: absolute;
left: 0;
right: 0;
padding: 10px;
background-color: #888;
}
Here is a working example of the second option: http://jsfiddle.net/mGLRD/
Horizontal scroll-bar:
To get a horizontal scroll-bar, you will have to look in to the overflow-x CSS-property. By setting it to scroll, you will see a disabled scrollbar when there is no content to scroll, so the scrollbar is always visible. Your other option is to set it to auto, where the scrollbar will become visible if needed (may vary between different browsers).
Try:
div#content {
width:auto;
padding:20px;
overflow-x:auto;
}
See my demo: http://jsfiddle.net/HRRsU/3/
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
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.
In this example the image is not centered. Why? My browser is Google Chrome v10 on windows 7, not IE.
<img src="/img/logo.png" style="margin:0px auto;"/>
add display:block; and it'll work. Images are inline by default
To clarify, the default width for a block element is auto, which of course fills the entire available width of the containing element.
By setting the margin to auto, the browser assigns half the remaining space to margin-left and the other half to margin-right.
You can center auto width div using display:table;
div{
margin: 0px auto;
float: none;
display: table;
}
Under some circumstances (such as earlier versions of IE, Gecko, Webkit) and inheritance, elements with position:relative; will prevent margin:0 auto; from working, even if top, right, bottom, and left aren't set.
Setting the element to position:static; (the default) may fix it under these circumstances. Generally, block level elements with a specified width will respect margin:0 auto; using either relative or static positioning.
In my case the problem was that I had set min and max width without width itself.
Whenever we don't add width and add margin:auto, I guess it will not work. It's from my experience. Width gives the idea where exactly it needs to provide equal margins.
there is a alternative to margin-left:auto; margin-right: auto; or margin:0 auto; for the ones that use position:absolute; this is how:
you set the left position of the element to 50% (left:50%;) but that will not center it correctly in order for the element to be centered correctly you need to give it a margin of minus half of it`s width, that will center your element perfectly
here is an example: http://jsfiddle.net/35ERq/3/
For a bootstrap button:
display: table;
margin: 0 auto;
I remember someday that I spent a lot of time trying to center a div, using margin: 0 auto.
I had display: inline-block on it, when I removed it, the div centered correctly.
As Ross pointed out, it doesn't work on inline elements.
img{display: flex; max-width: 80%; margin: auto;}
This is working for me. You can also use display: table in this case.
Moreover, if you don't want to stick to this approach you can use the following:
img{position: relative; left: 50%;}
put this in the body's css:
background:#3D668F;
then add:
display: block;
margin: auto;
to the img's css.