There are some elements .element that are displayed with flex (the red ones). For some reasons the red elements have to be display as flex, it could not be changed. I would like to get an effect that some text will be placed and center above the middle of the red elements.
The expected result should be:
I use another div with display: flex and put there a legends but it does not display the legends between the elements (legends are not center between the elements), my result is:
.legendContainer,
.elementsContainer {
display: flex;
}
.legendElement,
.element {
flex: 1;
height: 20px;
}
.element {
margin-left: 1px;
margin-right: 1px;
background: red;
}
<div class="legendContainer">
<div class="legendElement"></div>
<div>..oddXXbboo..</div>
<div class="legendElement"></div>
<div>..oddXXbboo..</div>
<div class="legendElement"></div>
<div>..oddXXbboo..</div>
<div class="legendElement"></div>
<div>..oddXXbboo..</div>
<div class="legendElement"></div>
</div>
<div class="elementsContainer">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
What should I change to achieve my goal?
I would put the legend elements into the flex items, give them position: absolute (and position: relative to their parent elements to serve as position anchors) and position them using the settings below, which puts them horizontally-centered above the right end of their parent:
.elementsContainer {
display: flex;
margin-top: 50px;
}
.element {
flex: 1;
height: 20px;
margin-left: 1px;
margin-right: 1px;
background: red;
position: relative;
}
.legend {
position: absolute;
top: -1.2em;
right: 0;
transform: translateX(50%);
}
<div class="elementsContainer">
<div class="element">
<div class="legend">..oddXXbboo..</div>
</div>
<div class="element">
<div class="legend">..oddXXbboo..</div>
</div>
<div class="element">
<div class="legend">..oddXXbboo..</div>
</div>
<div class="element">
<div class="legend">..oddXXbboo..</div>
</div>
<div class="element"></div>
</div>
P.S.: If you want the position to be even more exact, change the right value of .legend to -1px, since there are 1px margins left and right on the .elements. This will give them a 1px offset in relation to the parents right border.
Remove the <div class="legendElement"></div> elements - they seem unnecessary.
Add 10 % horizontal padding to the legendContainer element - this will align your four elements with the five elements below.
Lastly, flex: 1; text-align: center on the child divs.
.legendContainer,
.elementsContainer {
display: flex;
}
.legendElement,
.element {
flex: 1;
height: 20px;
}
.element {
margin-left: 1px;
margin-right: 1px;
background: red;
}
.legendContainer {
padding: 0 10%;
}
.legendContainer > div {
text-align: center;
flex: 1;
}
<div class="legendContainer">
<div>..oddXXbboo..</div>
<div>..oddXXbboo..</div>
<div>..oddXXbboo..</div>
<div>..oddXXbboo..</div>
</div>
<div class="elementsContainer">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
You should think of your element divs as the white sections in the red background, since that's what you want labeled. Then give your labels a fixed width and position them centered above the elements:
.elements {
display: flex;
background: #f00;
width: 100%;
height: 20px;
justify-content: space-around;
margin-top: 30px;
}
.element {
background: #fff;
width: 5px;
position:relative;
}
.label {
position: absolute;
width: 40px;
top: -20px;
white-space: pre;
left: -20px;
}
<div class='elements'>
<div class='element'>
<div class='label'>Label 1</div>
</div>
<div class='element'>
<div class='label'>Label 2</div>
</div>
<div class='element'>
<div class='label'>Label 3</div>
</div>
<div class='element'>
<div class='label'>Label 4</div>
</div>
</div>
Related
I have a list of flatterned div elements (Unfortunately I can't edit html markup to add structures). Because the div#1 is very long, I'd like to put it in a seperate column with its own scrollbar; all the other div's (the number of div's is flexible) are stacked in the right column. What is the best css setting to achieve this? Ideally, I don't want to use fixed/absolute position.
<div id='1'>1</div>
<div id='2'>2</div>
<div id='3'>3</div>
.
.
.
<div id='n'>n</div>
You can use Flex to achieve this result check this example:
* {
box-sizing: border-box;
}
.row {
display: flex;
}
/* Create two equal columns that sits next to each other */
.column {
flex: 50%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}
.column div {
background-color:#bbb;
height:50px;
}
.column div:not(:first-child) {
margin-top:5px;
}
<div class="row">
<div class="column">
<div style="height:500px;">div 1</div>
</div>
<div class="column">
<div>div 2</div>
<div>div 3</div>
<div>div n</div>
</div>
</div>
You can use this structure for this. In this I used the display:flex property so you don't need to use any position.
.main {
display: flex;
}
.blue {
height: 600px;
background-color: blue;
width: 200px;
border: 3px solid black;
margin-right: 30px;
}
.red {
height: 150px;
background-color: red;
width: 150px;
border: 3px solid black;
margin-bottom: 10px;
}
<div class="main">
<div class="left">
<div class="blue"></div>
</div>
<div class="right">
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
</div>
</div>
So I want to float some div's center, orignally I was using float: left which gave me this look http://i.imgur.com/wfHacch.png after reading other answers I see that I can not do that, one of the suggestions made was to use margin: 0 auto; when I used this it made everything simply stack in a line down the center, as per this image http://i.imgur.com/xyixrdj.png
I am trying to force the floating div's to be stacked uniformly centered. Which would also adjust to the stack down the line in lower screensizes,
How best am I to do this?
So here is my CSS at the moment
.container {
overflow: hidden;
width: 100%;
height: 100%;
}
.item {
float: left;
max-width: 500px;
width: 100%;
padding: 10px;
height: 100%;
}
button {
width: 33%;
height: 100%;
padding: 20px;
background: orange;
border: 1;
border-radius: 10px;
border: 1px;
border-radius: 02px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
And my HTML
<div class="container orders">
<div class="item">
<button class="ready">
/*content*/
</button>
</div>
</div
You should use inline-block
div {
display: inline-block
}
By default divs are block elements.
You can use flexbox: https://jsfiddle.net/BradChelly/m9d3jepz/
.container {
width: 80%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.item {
width: 30%;
height: 100px;
margin-bottom: 20px;
border:1px solid red;
}
#media only screen and (max-width: 500px) {
.item {
width: 45%;
}
}
#media only screen and (max-width: 300px) {
.item {
width: 100%;
}
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
I don't know what your code is but If I were you I would try wrap those div's in another div with display: inline-block and clearfix. And then give parent text-align: center. End code should look something like that:
.parent{
text-align: center;
}
.parent .container{
display: inline-block;
width: 340px;
zoom: 1;
}
.parent .container:after{
content: "";
display: table;
clear: both;
}
.parent .container:before{
content: "";
display: table;
}
.parent .container .element{
display: block;
float: left;
width: 100px;
bordeR: 1px solid #000000;
height: 50px;
margin: 5px
}
<div class="parent">
<div class="container">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
</div>
if you want center a div so you have to remove float left you can add text-align center i parent div and add display inline-block in child div like this
.parent{
width:100%;
float:left;
text-align:center;
}
.child{
width:100px;
background:#f00;
display:inline-block;
}
<div class="parent">
<div class="child">Some text here</div>
<div class="child">Some text here</div>
<div class="child">Some text here</div>
<div class="child">Some text here</div>
</div>
I'd like to align a list of elements inside of a container to bottom. By default it sticks to the top of the container.
Note that this list needs to keep its scroll ability. So I can't use flex. Flex makes elements resize and avoids scroll.
I can't think of an easy way to do this.
JSFiddle
#list {
height: 200px;
}
.item {
height: 30px;
line-height: 30px;
background-color: lightgray;
margin: 3px 0;
}
<div id="list">
<div class="item">Item0</div>
<div class="item">Item1</div>
<div class="item">Item2</div>
<div class="item">Item3</div>
<div class="item">Item4</div>
<div class="item">Item5</div>
<div class="item">Item6</div>
<div class="item">Item7</div>
<div class="item">Item8</div>
<div class="item">Item9</div>
</div>
There is a hack using transform scaling in the y-direction - see demo below:
#list {
height: 200px;
border:1px solid green;
overflow-y: auto;
transform: scaleY(-1);
}
.item {
height: 30px;
line-height: 30px;
background-color: lightgray;
margin: 3px 0;
transform: scaleY(-1);
}
<div id="list">
<div class="item">Item0</div>
<div class="item">Item1</div>
<div class="item">Item2</div>
<div class="item">Item3</div>
<div class="item">Item4</div>
<div class="item">Item5</div>
<div class="item">Item6</div>
<div class="item">Item7</div>
<div class="item">Item8</div>
<div class="item">Item9</div>
</div>
#list {
position: absolute; bottom: 0;
}
make sure to add position: relative; to the above element
https://jsfiddle.net/ege89t3h/
I have a case of three inline divs that should be displayed either inline or in column if they don't fit in their container. However, if container is not wide enough for them to fit inline while being not narrow enough for them to collapse into a single column, they are displayed like 2+1 (two inline on top of one).
How to force them to display either ALL inline, or ALL in one column, provided:
I want to avoid using media query.
Inner divs have fixed width in px.
CSS:
.container {
text-align: center;
background-color: #FFFFFF;
margin-bottom: 20px;
}
.narrow {
width: 200px;
}
.medium {
width: 400px;
}
.wide {
width: 600px;
}
.element {
width: 100px;
margin: 20px;
padding: 20px;
display: inline-block;
background-color: #FF0000;
border-radius: 5px;
}
HTML:
<div class="container narrow">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
<div class="container medium">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
<div class="container wide">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
JS Fiddle: https://jsfiddle.net/5wLeggy4/1/
The only way to do it without using media queries is using flexbox:
https://jsfiddle.net/5wLeggy4/3/
.container {
text-align: center;
background-color: #FFFFFF;
margin-bottom: 20px;
display: flex;
}
.narrow {
width: 200px;
flex-direction: column;
}
.medium {
width: 400px;
flex-direction: column;
}
.wide {
width: 600px;
}
.element {
width: 100px;
margin: 20px;
padding: 20px;
background-color: #FF0000;
border-radius: 5px;
flex-direction: row;
}
<div class="container narrow">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
<div class="container medium">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
<div class="container wide">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
Try using "display : block;" instead of "display:inline-block;".
https://jsfiddle.net/AnjuRaj/5wLeggy4/2/
So your element class should look like:
.element {
width: 100px;
margin: 20px;
padding: 20px;
display: block;
background-color: #FF0000;
border-radius: 5px;
}
About the best i can come up with: https://jsfiddle.net/5wLeggy4/5/
<div class="container wide">
<div class="one">
<div class="element"></div>
</div>
<div class="two">
<div class="element"></div>
<div class="element"></div>
</div>
</div>
<style>
.container {
text-align: center;
background-color: #FFFFFF;
margin-bottom: 20px;
}
.one {
display:inline-block;
}
.two {
width:67%;
max-width:364px;
display:inline-block;
}
.element {
width: 100px;
margin:20px;
padding: 20px;
display: inline-block;
background-color: #FF0000;
border-radius: 5px;
}
</style>
The width property on .two causes the second two elements to drop down together. The max width on the .two div means they also cannot expand.
Annoyingly there is a single pixel width of screen where they can be together due to the overlap of the two rules. if .two is 364px exactly, the two elements within will display inline.
How can I align two inline divs so that the their adjacent edges are center?
So I'd like it to look like this:
div1div1 div2div2
div1 div2
div1div1div1 div2div2
I tried using inline block like like below but it is merely centering each line.
.container {
text-align: center;
}
.left-div {
display: inline-block;
}
.right-div {
display: inline-block;
}
<div class="container">
<div class="left-div">div1div1</div>
<div class="right-div">div2div2</div>
</div>
<div class="container">
<div class="left-div">div1</div>
<div class="right-div">div2</div>
</div>
<div class="container">
<div class="left-div">div1div1div1</div>
<div class="right-div">div2div2</div>
</div>
https://jsfiddle.net/fkfmh7md/ to change the distance between divs, change 5px in padding:0 5px to any other value
.container {
display: table;
table-layout: fixed;
width: 100%;
}
.container div {
display: table-cell;
padding: 0 5px;
}
.container div.left {
text-align: right;
}
<div class="container">
<div class="left">div1div1</div>
<div>div2div2</div>
</div>
<div class="container">
<div class="left">div1</div>
<div>div2</div>
</div>
<div class="container">
<div class="left">div1div1div1</div>
<div>div2div2</div>
</div>