I am trying to add two divs(left-item-container, right-item-container) to the top of my page and make the left-item-container fixed . I wish to have the left item fixed when the page is scrolled . The right item should be scrolled and can be hidden.
I would also like to have space between the divs.
.mydiv{
display:flex
justify-content: space-between;
.left-item-container{
position: fixed;
}
.right-item-container{
}
}
When I exclude position fixed the space between works fine - however I loose the fixed position.
I need help to make the left item fixed and also have space between when both divs are visible.
I was able to get it to work by giving the container a specific height as well as applying a justify-content of flex-start to the left-container as that is where we'd like it to stay fixed.
.mydiv{
display:flex;
justify-content: space-between;
.left-item-container{
border: 10px solid red;
justify-content:flex-start;
position:fixed;
height:30px;
}
.right-item-container{
border:10px solid blue;
height:20px;
}
}
Check out this jsfiddle
Related
I have a container with a fixed width and variable height. I'm filling the container with an unknown amount of elements.
I'd like the elements to arrange themselves in columns, from top to bottom and then left to right.
I could use column, but I don't know the maximum width of the child elements, so I can't set a column-width or column-count.
I think display: flex with flex-flow: column wrap is the way to go, but if I maintain height: auto on the container, it will generate as a single column without wrapping elements to use all the available width.
Can I convince flexbox to use all the available width and thus minimize the container's height?
Would you suggest a different solution?
Fiddle: http://jsfiddle.net/52our0eh/
Source:
HTML:
<div>
<span>These</span>
<span>should</span>
<span>arrange</span>
<span>themselves</span>
<span>into</span>
<span>columns,</span>
<span>using</span>
<span>all</span>
<span>available</span>
<span>width</span>
<span>and</span>
<span>minimizing</span>
<span>the</span>
<span>container's</span>
<span>height.</span>
</div>
CSS:
div {
outline: 1px solid red;
width: 100%;
display: flex;
flex-flow: column wrap;
align-items: flex-start;
/*height: 8em;*/
}
span {
outline: 1px solid blue;
}
What you look for is more like the column rules: DEMO
div {/* do not set column numbers rule */
width: 100%;
-moz-column-width:4em;
column-width:4em;
-moz-column-gap:0;
column-gap:0;
-moz-column-rule:solid 1px;
column-rule:solid 1px;
text-align:center;
}
I've compromised and set height: 10em (which seems acceptable) along with overflow-y: auto (to add a horizontal scrollbar in case of overflow) on the container element.
I would still like to know if there is a way to use all available width and minimize the height, though.
In the end, your options for overflowing are hide, scroll, or wrap. How about this version instead? It takes any overflowing items and puts them on a second row. Items on the second row still fill the available space, but are larger due to the smaller number of items sharing the space.
http://jsfiddle.net/52our0eh/14/
div {
outline: 1px solid red;
display: flex;
flex-flow: row wrap;
}
span {
outline: 1px solid blue;
flex:1;
}
I want to simply center 2 divs horizontally regardless of the screen width and without using a wrapper. I have the following simple code:
#div1 {
display: inline-block;
width: 100px;
border: 1px solid #000000;
}
#div2 {
display: inline-block;
width: 200px;
border: 1px solid #000000;
}
I created the following fiddle for illustration:
http://jsfiddle.net/axe89/
The reason I don't want to use a wrapper is that I want to make a cross platform website and if I define a width for the wrapper it will break mobile screen.
#setek has the solution above, just wanted to add this quick rule of thumb:
To horizontally center display:inline and display:inline-block items, use text-align:center;.
To horizontally center display:block items, use margin: 0 auto;.
as alluded to by setek, you can define a container for your divs, with a width of 100% so that it scales with the screen/device width. Also set its text align to center to achieve your desired effect.
#container{text-align:center;width:100%;}
here is your updated fiddle
and for slightly modified markup and css - http://jsfiddle.net/axe89/5/
Use css margin properties.
margin-left:40%
to the first div.
You can add
text-align: center;
to the body tag or to whatever you are planning to wrap the divs with.
fiddle link
.mainCoverWrapper {
position: relative;
min-width:312px;
background:red
}
I'm trying to center a div with min-width of 312px and make it expand according to its dynamic content while keeping it centered.
Right now the min-with doesn't work at all because it needs a float. I can't use a float because I need the div centered on the page.
In other words, div starts out with margin auto with a width of 312px and expands with its added content while being centered. Is this possible?
Any help would be greatly appreciated.
http://jsfiddle.net/FVmvA/
Here's a working example of the parent to follow the width of the child, and the child will expand according to the text given in it.
.myCoverWrapper {
border: 1px solid Peru;
margin:auto;
min-width: 200px;
max-width: 100%;
display: inline-block;
background: red;
}
.test {
height: 100px;
margin: 10px;
background: cyan;
}
This makes the parent div follow the width of the kid.
This however, will disallow you to "center" it. There's no way you can have both. This is because you cant center an image without knowing the width of the element.
The solution is to use jQuery, to add CSS in when necessary.
Here's an example. There's some bugs, but well, you have the general idea.
If you want the width to be fluid, your best bet is to set display: inline-block; on the to-be-centered element, and text-align: center; to the parent element.
See: CSS center display inline block?
I have a container whose id is #parent, I dynamically add several images of class .child, fixed width and height can be assumed for .child elements.
I want all .child to float next to each other to build a horizontal list. How do I get #parent resizing automatically to the total width of all .child ?
Thanks a lot!
PS: I need a pure CSS solution..
Fiddle: http://jsfiddle.net/u8GPN/1/
Solution can be found here: http://jsfiddle.net/u8GPN/28/
You can make your parent inline-block and add white-space: nowrap; to it:
#parent {
display: inline-block;
overflow: hidden;
border: 1px dashed blue;
white-space: nowrap;
}
http://jsfiddle.net/u8GPN/22/
To test dynamically adding new blocks http://jsfiddle.net/u8GPN/23/
You can also give position: absolute to the #parent div to solve the problem for cross-browser support. (or go with white-space: nowrap as shown in #dfsq's post)
#parent {
display : block; /* (or) inline-block */
overflow : hidden;
border: 1px dashed blue;
position:absolute; /* Doesn't extend the width more than the page's width */
}
Working Fiddle
As you stated that the .child elements have fixed width and height, You need to give #view height explicitly equal to the .child elements height, to occupy the space in layout.
I have an empty page with one DIV on it:
<div style="height: 20%;
min-height: 10px;
max-height: 100px;
width: 100%;
background-color: blue;"></div>
I want to add a DIV after this one that takes up all remaining vertical space on the page. How do I do it?
I've spent all day on this and CSS is starting to drive me crazy.
What has to be inside this div?
If it's a just a color filler, just put your blue div in a another div wich you give a background color and make that one fit 100% of your browser window?
It will look like 2 divs beneath eachother. If you need content you can always just put another div under your blue one with whatever content you want.
EDIT:
code example:
http://jsbin.com/efefe/2
Assuming you have two divs:
<div id='one'></div>
<div id='two'></div>
where #one has variable height and #two should consume all remaining vertical space you can do:
/* Note you could add a container div instead of using the body */
body {
display: flex;
flex-direction: column;
}
#one {
flex: none;
}
#two {
flex: 1;
}
Furthermore, if you want #two to be scrollable you can add:
height: 100%;
overflow-y: scroll;
which will allow it to scroll vertically to show it's whole contents.
You can read more about display:flex here.