I have a jsfiddle here - http://jsfiddle.net/ktmzk3jk/
I'd like to make the red background on the blocks the same height.
I'm sure I could do it with Jquery but is there a standard CSS soultion.
<div class="container">
<div class="row">
<div class="col-sm-4 col">
<div class="block">
<h3>65%</h3>
<p>Some Text Some Text</p>
</div>
</div>
<div class="col-sm-4 col">
<div class="block">
<h3>20%</h3>
<p>Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text</p>
</div>
</div>
<div class="col-sm-4 col">
<div class="block">
<h3>5%</h3>
<p>Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text</p>
</div>
</div>
</div>
</div>
Try like this DEMO
CSS:
.row-full-height {
height: 100%;
}
.col-full-height {
height: 100%;
vertical-align: middle;
}
.row-same-height {
display: table;
width: 100%;
/* fix overflow */
table-layout: fixed;
}
.col-xs-height {
display: table-cell;
float: none !important;
}
HTML:
<div class="row">
<div class="row-same-height row-full-height">
<div class="col-sm-4 col-xs-height col-full-height">...</div>
</div>
</div>
You shouldn't style that inner <div class="block"> , in fact you shouldn't even have it there;
directly style the .col selector,
here you have a fiddle.
For equal size red blocks, you need to update value of height in .block, set height to height:150px instead of height:100% if you know the maximum height. Otherwise also include overflow:auto; so that a scroll appears if text goes beyond the boundary
Updated JS Fiddle: http://jsfiddle.net/ktmzk3jk/8/
Adding a min-height to would be the best approach but I would recommend a jQuery approach. Especially if the content changes to different lengths often.
Related
I'm running into an issue with position: absolute and I can't find an answer anywhere that explains why it's happening.
I have a flexbox container inside a wrapper with two children that are each set to flex-basis: 50%. When I set position: absolute on the wrapper div, the wrapper shrinks in an unpredictable way.
See the code below:
.outer-wrapper {
position: relative;
width: 100%;
}
.outer-wrapper .wrapper {
position: absolute;
}
.outer-wrapper .wrapper .flex-container {
display: flex;
}
.outer-wrapper .wrapper .flex-container .flex-item {
flex-basis: 50%;
}
<div class="outer-wrapper">
<div class="wrapper">
<div class="flex-container">
<div class="flex-item">
Some Text That Is Long
</div>
<div class="flex-item">
Some Text
</div>
</div>
<div class="flex-container">
<div class="flex-item">
Some Text
</div>
<div class="flex-item">
Some Text
</div>
</div>
</div>
</div>
Removing line 6 in the CSS causes the flex-container to expand to the full width of the parent and each flex child takes up 50% of the width, as expected. However, when I set the wrapper div to position: absolute, the wrapper div shrinks to what seems like an arbitrary width and the text in the flex-children breaks onto multiple lines.
My questions:
Why does setting position: absolute on the wrapper div cause the wrapper div to shrink smaller than its content?
How does the browser determine what width to shrink the wrapper div to? It seems to me like it would either shrink to be as small as possible without introducing line breaks into the text, or would shrink as small as possible while still fitting the longest word, but instead it's shrinking to somewhere in the middle (it only introduces one line break in a string of short words).
Is there a way, while still using flexbox and position: absolute in this way, to force the browser to not shrink the wrapper smaller than its content (unless there is a max-width set on the wrapper)?
Really appreciate any help! This has been driving me crazy!
Why does setting position: absolute on the wrapper div cause the wrapper div to shrink smaller than its content?
How does the browser determine what width to shrink the wrapper div to?
The trick is the use of flex-basis::50%. You are in a situation where you are using a shrink-to-fit container (position:absolute element) and at the same time you are using percentage value inside the flex-basis. So the browser is first calculating the width of the container (ignoring the flex-basis) then the width calculated will be used as reference for the flex-basis.
Here is an illustration of what is happening:
.wrapper {
position: absolute;
border:1px solid red;
}
.wrapper .flex-container {
display: flex;
}
.wrapper .flex-container .flex-item {
/*flex-basis: 50%;*/
border:1px solid green;
}
<div class="wrapper">
<div class="flex-container">
<div class="flex-item">
Some Text That Is Long
</div>
<div class="flex-item">
Some Text
</div>
</div>
<div class="flex-container">
<div class="flex-item">
Some Text
</div>
<div class="flex-item">
Some Text
</div>
</div>
</div>
<div class="wrapper" style="top:100px;">
<div class="flex-container">
<div class="flex-item" style="flex-basis: 50%;">
Some Text That Is Long
</div>
<div class="flex-item" style="flex-basis: 50%;">
Some Text
</div>
</div>
<div class="flex-container">
<div class="flex-item" style="flex-basis: 50%;">
Some Text
</div>
<div class="flex-item" style="flex-basis: 50%;">
Some Text
</div>
</div>
</div>
Notice how in the first example (without flex-basis) the width is equal to the largest content. In the second example you will see that the total width didn't change but we made the flex items equal in width.
The same logic also happen with inline-block or float or any shrink-to-fit container.
.wrapper {
display:inline-block;
border:1px solid red;
}
.wrapper .flex-container {
display: flex;
}
.wrapper .flex-container .flex-item {
/*flex-basis: 50%;*/
border:1px solid green;
}
<div class="wrapper">
<div class="flex-container">
<div class="flex-item">
Some Text That Is Long
</div>
<div class="flex-item">
Some Text
</div>
</div>
<div class="flex-container">
<div class="flex-item">
Some Text
</div>
<div class="flex-item">
Some Text
</div>
</div>
</div>
<br><br>
<div class="wrapper">
<div class="flex-container">
<div class="flex-item" style="flex-basis: 50%;">
Some Text That Is Long
</div>
<div class="flex-item" style="flex-basis: 50%;">
Some Text
</div>
</div>
<div class="flex-container">
<div class="flex-item" style="flex-basis: 50%;">
Some Text
</div>
<div class="flex-item" style="flex-basis: 50%;">
Some Text
</div>
</div>
</div>
To get what you want it's clear that you need to not use flex-basis:50% and consider a different idea to get the same width.
Here is one using CSS grid as I think it would be tedious with flexbox:
.wrapper {
position:absolute;
border:1px solid red;
}
.wrapper .flex-container {
display: grid;
grid-template-columns:repeat(2,1fr);
}
.wrapper .flex-container .flex-item {
border:1px solid green;
}
<div class="wrapper">
<div class="flex-container">
<div class="flex-item">
Some Text That Is Long
</div>
<div class="flex-item">
Some Text
</div>
</div>
<div class="flex-container">
<div class="flex-item">
Some Text
</div>
<div class="flex-item">
Some Text
</div>
</div>
</div>
The reason it is shrinking is since you are setting position absolute without specifying a width.
Block element feature of having the full width of the parent's content area will not be honored when an element is absolute positioned.
If you want to retain the width (100% of the container) of a block element, then set the width of the absolute element .wrapper to 100% and problem solved.
.outer-wrapper {
position: relative;
width: 100%;
}
.wrapper {
position: absolute;
width:100%;
}
.flex-container {
display: flex;
}
.flex-item {
flex-basis: 50%;
}
I would like to align three div in one line with a little space between first div and second div and last div using bootstrap as you see in the picture :
I try with this code :
<div class="row">
<div class="col-md-2">
<img src="img/emo_positif.png')}}">
</div>
<div class="col-md-7">
<div class="square1"></div>
</div>
<div class="col-md-3">
<img src="img/emo_negative.png')}}">
</div>
</div>
but it shows me a big space between the div
Using Bootstrap 3:
.row {
height: 24px;
}
.row > div {
height: 100%;
}
.square {
background: pink;
}
.square1 {
background: #01a8ff;
height: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" >
<div class="row">
<div class="col-xs-2 square">
</div>
<div class="col-xs-8">
<div class="square1"></div>
</div>
<div class="col-xs-2 square">
</div>
</div>
Check this Pen.
Read the docs.
For making the three division in same line . There are many ways. For better UX use display:flex in css for the parent division
Thanks
I'm building a Carousel-type component, but am having some difficulty getting it to work just right.
My basic approach is a div (wrapper) with lots of other divs (items) in it. I want to display 4 items on the carousel at any one time. The items have various content heights, but the heights of the items should be equal (to the largest required).
I can't work out the CSS combination I need to get this to work correctly.
With this setup (HTML + CSS at bottom of post), the width: 25%; on each item-container is ignored.
If I add a fixed with to .item, then the 25% kicks in, but the item width is unknown -- it depends on the browsers size. Setting it to 1000px means you lose content from the item. Setting it to ~210px works, but when you start shrinking your browser, you lose content. On a large browser, you have excessive spacing.
Curiously, if I add flex-wrap: wrap to the CSS, then the 25% width is applied correctly -- but I can't do that, because then it's not a carousel! Example
The scenario is simple:
An unknown amount of items in a div with overflow: auto, which are equal heights should be displayed, with 4 of the children divs on the screen at any one time.
My HTML is structured as follows:
<div id="container">
<div id="wrapper">
<div class="item-container">
<div class="item">
<p>
Carousel Item #1 with some quite long text.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #2.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #3.
</p>
</div>
</div>
...
</div>
</div>
My CSS:
#container {
width: 100%;
background: #0f0;
overflow: auto;
}
#wrapper {
display: flex;
}
.item-container {
border: 1px solid #f00;
width: 25%;
}
Note, this is my MCVE. On my real component, I have buttons for scrolling left and right, the content is significantly more complex and stuff like that.
All you need is to add flex: 0 0 auto to .item-container elements.
* {
box-sizing: border-box;
}
#container {
width: 100%;
background: #0f0;
overflow: auto;
}
#wrapper {
display: flex;
}
.item-container {
border: 1px solid #f00;
flex: 0 0 auto;
width: 25%;
}
<div id="container">
<div id="wrapper">
<div class="item-container">
<div class="item">
<p>
Carousel Item #1 with some quite long text.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #2.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #3.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #4.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #5.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #6.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #7.
</p>
</div>
</div>
</div>
</div>
I have the following problem: I'm working on this site and using a picture as a background of 1 div. Inside this div I have another 2 dives - logo and navigation.
Last /outside of the div with the picture/ is the footer, whos background must be other color, not the picture. I set the css to the div with the picture like this :
#background{
position: absolute;
z-index: -1;
display: block;
}
Here is the html :
<div id="pic">
<img id="background" src="picture.jpg">
<div class="row" id="logo">
</div>
<div class="row" id="example-menu">
</div>
</div>
<div class="row" id="footer">
<div class="medium-3 columns medium-offset-1" id="worktime">РАБОТНО ВРЕМЕ: </br> ПОНЕДЕЛНИК-ПЕТЪК </br> 08:30-19:00ч.</div>
<div class="medium-8 columns"></div>
</div>
But the problem is that the footer also goes over the div with the picture and my design is not like this... I need to keep the whole picture to be seen.
Thanks in advance !
the issue is with the z-index of the div containing the image and the div containing the footer.
the easiest solution is to put the footer after the div with your content. The only time z-index should come into play is if you are trying to put items on top of the image for effect.
<div id="content-wrapper">
<div id="nav">
<span>NAV</span>
</div>
</div>
<div id="footer">
<span>FOOTER</span>
</div>
you can easily add the footer in the container, attach at the bottom as well.
see if this example helps:
https://plnkr.co/edit/GDfzul2qKApw6JGhQSbb?p=preview
Option 1
Instead of using <img>, put the background using CSS
HTML
<div id="pic">
<div class="row" id="logo"></div>
<div class="row" id="example-menu"></div>
</div>
<div class="row" id="footer">
The footer content
</div>
CSS
#pic{
background: url( 'picture.jpg' ) no-repeat;
}
Option 2
Use fixed height for the parent div, #pic in this case:
HTML
<div id="pic">
<img id="background" src="picture.jpg">
<div class="row" id="logo"></div>
<div class="row" id="example-menu"></div>
</div>
<div class="row" id="footer">
The footer content
</div>
CSS
#pic{
position: relative;
height: 100px; /* This should be the height of the background image */
}
#background{
position: absolute;
z-index: -1;
}
Option 3
You may use position:absolute for the .rows instead:
#pic{ position: relative; }
.row{ position: absolute; top: 0; z-index: 99; }
<div id="pic">
<img id="background" src="https://placehold.it/200x100">
<div class="row" id="logo">This is logo</div>
</div>
<div id="footer">
The footer content
</div>
I use the twitter bootstrap and I wanted to align verticaly a div block with a picture and the text at the right.
Here is the code:
<ol class="row" id="possibilities">
<li class="span6">
<div class="row">
<div class="span3">
<p>some text here</p>
<p>Text Here too</p>
</div>
<figure class="span3"><img src="img/screenshots/options.png" alt="Some text" /></figure>
</div>
</li>
<li class="span6">
<div class="row">
<figure class="span3"><img src="img/qrcode.png" alt="Some text" /></figure>
<div class="span3">
<p>Some text</p>
<p>Some text here too.</p>
</div>
</div>
</li>
</ol>
I tried this but not wortks:
.span6 .row{display: table;}
.span6 .row .span3, .span6 .row figure{display:table-cell; vertical-align: middle;}
I tried this too:
.span6 .row .span3{display: inline-block; vertical-align: middle;}
None is working. Does somebody have an idea?
Thanks in advance.
Try this:
.row > .span3 {
display: inline-block !important;
vertical-align: middle !important;
}
Edit:
Fiddle: http://jsfiddle.net/EexYE/
You may need to add Diego's float: none !important; also if span3 is floating and it interferes.
Edit:
Fiddle: http://jsfiddle.net/D8McR/
In response to Alberto: if you fix the height of the row div, then to continue the vertical center alignment you'll need to set the line-height of the row to be the same as the pixel height of the row (ie. both to 300px in your case). If you'll do that you will notice that the child elements inherit the line-height, which is a problem in this case, so you will then need to set your line height for the span3s to whatever it should actually be (1.5 is the example value in the fiddle, or 1.5 x the font-size, which we did not change when we changed the line-height).
Try removing the float attribute from span6:
{ float:none !important; }
If I remember correctly from my own use of bootstrap, the .spanN classes are floated, which automatically makes them behave as display: block. To make display: table-cell work, you need to remove the float.
As well as the previous answers are you could always use the Pull attrib as well:
<ol class="row" id="possibilities">
<li class="span6">
<div class="row">
<div class="span3">
<p>some text here</p>
<p>Text Here too</p>
</div>
<figure class="span3 pull-right"><img src="img/screenshots/options.png" alt="Some text" /></figure>
</div>
</li>
<li class="span6">
<div class="row">
<figure class="span3"><img src="img/qrcode.png" alt="Some text" /></figure>
<div class="span3">
<p>Some text</p>
<p>Some text here too.</p>
</div>
</div>
</li>
i use this
<style>
html, body{height:100%;margin:0;padding:0 0}
.container-fluid{height:100%;display:table;width:100%;padding-right:0;padding-left: 0}
.row-fluid{height:100%;display:table-cell;vertical-align:middle;width:100%}
.centering{float:none;margin:0 auto}
</style>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="offset3 span6 centering">
content here
</div>
</div>
</div>
</body>