This is a spin off Display Table-Cell: Remove Right and Left Border Space?.
I was trying to create a solution using divs and inner margins of equal width but I get unwanted spacing in between causing my last div to wrap.
https://jsfiddle.net/kyy7qgLz/1/
* {
margin: 0;
padding: 0;
border: 0;
}
#container {
width: 100%;
background-color: blue;
}
.item {
margin-left: 4%;
width: 22%;
display: inline-block;
background-color: red;
}
.item:first-of-type {
margin-left: 0%;
}
<div id="container">
<div class="item">
Text 1
</div>
<div class="item">
Text 2
</div>
<div class="item">
Text 3
</div>
<div class="item">
Text 4
</div>
</div>
Where is the extra spacing coming from and how do I get rid of it?
You need to comment (or removE) the space (or new line) between your HTML elements when you want inline-block elements to not be espaced :
<div id="container">
<div class="item">
Text 1
</div><!--
--><div class="item">
Text 2
</div><!--
--><div class="item">
Text 3
</div><!--
--><div class="item">
Text 4
</div>
</div>
The cleanest solution here is to use flexbox. When you use display: inline-block you are saying “render these elements as blocks of text” so the browser correctly shows the white space you included between your HTML elements.
If you instead set display: flex on your container you will have more accurately described the layout you intend. Namely, you will have said direct children of this container should use a flex layout (instead of a layout intended for text).
* {
margin: 0;
padding: 0;
border: 0;
}
#container {
background-color: blue;
display: flex;
}
.item {
margin-left: 4%;
flex: 1 0 auto;
background-color: red;
}
.item:first-of-type {
margin-left: 0%;
}
<div id="container">
<div class="item">
Text 1
</div>
<div class="item">
Text 2
</div>
<div class="item">
Text 3
</div>
<div class="item">
Text 4
</div>
</div>
Related
I have a flex container which contains an img flex item.
I want this img to disregard its intrinsic height (90px) so that the height may shrink to match the sibling's flex item height (as per the default align-items: stretch style).
.container {
border: 1px solid;
display: flex;
}
.item {
border: 1px solid;
}
.content {
width: 200px;
height: 50px;
background-color: hotPink;
}
<div class="container">
<img class="item" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ">
<div class="item">
<div class="content"></div>
</div>
</div>
We can see the desired behaviour if we swap the img for a div:
.container {
border: 1px solid;
display: flex;
}
.item {
border: 1px solid;
}
.dynamicHeightContent {
width: 120px;
height: 100%;
background-color: green;
}
.content {
width: 200px;
height: 50px;
background-color: hotPink;
}
<div class="container">
<div class="item">
<div class="dynamicHeightContent"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
</div>
I have tried min-height: 0 on the img, to no avail.
What is the special behaviour that applies to img but not div?
How can we opt out of img's special behaviour so that it behaves like other flex items (such as div)? If there isn't a way to opt-out, is there a recommended workaround?
Note that whilst the img won't shrink its height, it does appear to grow:
.container {
border: 1px solid;
display: flex;
}
.item {
border: 1px solid;
}
.content {
width: 200px;
height: 300px;
background-color: hotPink;
}
<div class="container">
<img class="item" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ">
<div class="item">
<div class="content"></div>
</div>
</div>
Note: I'm happy to disregard the img's aspect ratio. I plan to avoid skewing the img via object-fit: cover.
Note that in your example, the item is the flex item and not content - you should check the strech behaviour of item here.
How can we opt out of img's special behaviour so that it behaves like
other flex items (such as div)?
It behaves like other flex items - <img> may not be very useful as a flex item but the stretch behaviour works fine:
if the image has more height than item, the item stretches to the height of the image
if the image has less height than item, the image stretches to the height of the content breaking its aspect ratio.
See demo below:
.container {
border: 1px solid;
display: flex;
}
.item {
background: cadetblue;
}
.content {
width: 200px;
background-color: hotPink;
}
img {
display: block;
}
<h2>Small content</h2>
<div class="container">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ">
<div class="item">
<div class="content">some text here some text here some text here </div>
</div>
</div>
<br/>
<h2>Large Content</h2>
<div class="container">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ">
<div class="item">
<div class="content">some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here </div>
</div>
</div>
I have tried min-height: 0 on the img, to no avail.
The min-height: 0 is given to a column flexbox along the flex direction to override the default auto behaviour (for row direction the property is min-width) - this doesn't work in the cross axis.
You can see details and some examples of this below:
Flexbox affects overflow-wrap behavior
Flexbox resize and scrollable overflow
Why don't flex items shrink past content size?
Wrapping image in a container
Now wrap the <img> in a div and see the same situation - the stretch behaviour is again good:
.container {
border: 1px solid;
display: flex;
}
.item {
background: cadetblue;
}
.content {
width: 200px;
background-color: hotPink;
}
img {
display: block;
}
<h2>Small content</h2>
<div class="container">
<div class="item">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div>
<div class="item">
<div class="content">some text here some text here some text here </div>
</div>
</div>
<br/>
<h2>Large Content</h2>
<div class="container">
<div class="item">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div>
<div class="item">
<div class="content">some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here </div>
</div>
</div>
The difference now is that you can use object-fit successfully on the image now (this does not work properlly if it is a flex item):
.container {
border: 1px solid;
display: flex;
}
.item {
background: cadetblue;
}
.content {
width: 200px;
background-color: hotPink;
}
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
<h2>Small content</h2>
<div class="container">
<div class="item">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div>
<div class="item">
<div class="content">some text here some text here some text here </div>
</div>
</div>
<br/>
<h2>Large Content</h2>
<div class="container">
<div class="item">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div>
<div class="item">
<div class="content">some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here </div>
</div>
</div>
I want this img to disregard its intrinsic height (90px) so that the
height may shrink to match the sibling's flex item height
The only way to disregard the image height is to use positioning on the image wrapper:
position the image absolutely with respect to its wrapper,
you can either give a width to the image wrapper or give flex: 1 on item to get half of the available width horizontally.
See demo below:
.container {
border: 1px solid;
display: flex;
}
.item {
background: cadetblue;
flex: 1; /* equal width for items */
}
.content {
width: 200px;
background-color: hotPink;
}
.item:first-child { /* image container */
position: relative;
}
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
position: absolute; /* position absolutely */
top: 0;
left: 0;
}
<h2>Small content</h2>
<div class="container">
<div class="item">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div>
<div class="item">
<div class="content">some text here some text here some text here </div>
</div>
</div>
<br/>
<h2>Large Content</h2>
<div class="container">
<div class="item">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div>
<div class="item">
<div class="content">some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here </div>
</div>
</div>
I think you are looking at this the wrong way.
The image itself is 90px high which means the content of the flex item has a height of 90px(because your image is the flex item). So your div on the right side is matching the image height because it is higher than the div's height and not the other way around.
Think of it as if you have set the height of the flex item(image) to 90px. So it won't shrink pass it unless you set it to a smaller height. Even though you didn't explicitly set the image height to 90px but it is 90px naturally so it is implicitly set which causes the confusion. So while it will stretch beyond 90px in height it won't go under it because that's the height of the flex item content.
In the case where you swapped it for a div and it works like you imagined is because there is no height set on the .item div which is the flex item.
while this is not the answer you are asking, but the div and img actually behave the same, that is if there is content taller than the height, it grows the height
example:
.container {
border: 1px solid;
display: flex;
}
.item {
border: 1px solid;
}
.dynamicHeightContent {
width: 120px;
height: 100%;
background-color: green;
}
.content {
width: 200px;
height: 50px;
background-color: hotPink;
}
<div class="container">
<div class="item">
<div class="dynamicHeightContent">
akhsdjahskd<br>
ajkhsdkjhasd<br>
ajshdkahsd<br>
ajsgdjgad<br>
ajshdasjdh<br>
</div>
</div>
<div class="item">
<div class="content"></div>
</div>
</div>
since you insist that object-fit should solve it, you can try this, as you can see, object-fit only works if we set the height and width, otherwise the browser will try to make it "keep aspect ratio", just try to remove the height or width from the css (one at a time), you will see this effect
.container {
border: 1px solid;
display: flex;
}
.item {
border: 1px solid;
}
img.item {
height: 50px;
width: 200px;
object-fit: cover;
}
.content {
width: 200px;
height: 50px;
background-color: hotPink;
}
<div class="container">
<img class="item" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ">
<div class="item">
<div class="content"></div>
</div>
</div>
I have 2 spans inside a div:
html:
<div class="main">
<span class="title"> Name</span>
<span class="values">/sys/fs/cgroup/sys/fs/</span>
</div>
here is how it looks:
http://jsfiddle.net/tdrgz1yj/
as you can see the size and volume title getting pushed down when I have long text for Name field. Also I cannot increase the width any more cause in actual app, the Volume field goes out of focus.
Is there a way I can align the Name, Size and Volume fields all in one line even after applying the word-break prop?
Can I make it look something like with css?
Thanks!
Yes. Just add display: flex to the .parent
Example
If you want to move the long text to the same line with the "Name" title, set display: flex to the .main as well.
Example 2
I suggest using span only to wrap inline elements. Instead, use divs :
.parent {
padding: 20px 10px;
margin: 0 0 20px;
display: flex;
width: 100%;
box-sizing: border-box;
}
.parent div {
margin-left: 20px;
}
.main {
flex-basis: 200px;
flex-grow: 1;
flex-shrink: 0;
display: flex;
}
.title {
margin-right: 20px;
display: inline-block;
}
.values {
word-break: break-word;
}
<div class="parent">
<div class="main">
<div class="title">Name:</div>
<div class="values">/sys/fs/cgroup/sys/fs//sys/fs/cgroup/sys/fs//sys/fs/cgroup/sys/fs/</div>
</div>
<div class="main">
<div class="title">Size:</div>
<div class="values">223k</div>
</div>
<div class="main">
<div class="title">Volume:</div>
<div class="values">111</div>
</div>
</div>
I have to build a fluid, scalable, device-independent layout where I need to put 4 elements in a row so that they resize and stick together. Let’s say, 4 images, as they naturally are - one above another, and I just want to group them in two rows - 2 images side by side in 1 row so that I have no problems with layout or structure. Can you show me how? Thank you!
Use flexbox and make it responsive like this:
.element-container {
display: flex;
flex-direction: column;
width: 100%;
}
.element-row {
display: flex;
}
.element {
flex: 0 1 46%;
margin: 0 2% 20px 2%;
margin-bottom: 3%;
max-width: 150px;
}
.element img {
display: block;
width: 100%;
}
<div class="element-container">
<div class="element-row">
<div class="element">
<img src="http://via.placeholder.com/150x150">
</div>
<div class="element">
<img src="http://via.placeholder.com/150x150">
</div>
</div>
<div class="element-row">
<div class="element">
<img src="http://via.placeholder.com/150x150">
</div>
<div class="element">
<img src="http://via.placeholder.com/150x150">
</div>
</div>
</div>
I'm trying to make this layout (I've made a picture to explain what i want to do):
So I've 4 divs where I'm going to put some text inside. I've used flexbox and justify content to align them center, but i want to put a text "Latest News" that is aligned with the first div (in this case Element 1).
I'm not able to think about an elegant solution to my problem, so I'm here to ask for help.
.wrapper{
display: flex;
justify-content: center;
}
.box{
height: 200px;
background-color: red;
margin: 10px;
width: 200px;
}
<p class="section-title">Latest News</p>
<div class="wrapper">
<div class="box">Element 1</div>
<div class="box">Element 2</div>
<div class="box">Element 3</div>
<div class="box">Element 4</div>
</div>
There are a few ways you can do it, and it depends how dynamic your box elements are going to be.
One simple solution that works for n boxes is to include the section title to the first box and give it position: absolute whilst adding margin-top to the wrapper to make space for the title.
https://codepen.io/anon/pen/MJpOrM
.wrapper {
display: flex;
justify-content: center;
margin-top: 40px;
}
.box {
height: 200px;
background-color: red;
margin: 10px;
width: 300px;
}
.section-title {
position: absolute;
top: 0px;
}
<div class="wrapper">
<div class="box">
<p class="section-title">Latest News</p>
Element 1
</div>
<div class="box">Element 2</div>
<div class="box">Element 3</div>
<div class="box">Element 4</div>
</div>
Considering that you have a fixed width for your boxes, the easiest solution is to make the section-title a fixed width too:
.section-title {
width: 1260px; //This is merely 300 * 4 + the margin
margin: auto;
}
https://codepen.io/anon/pen/BpWmJV
I have this simple setup:
.container {
display: table;
width: 70%;
text-align: center;
}
div {
border: 1px solid #336;
}
.column {
display: table-cell;
}
<div class="container">
<div class="column">Column 1.</div>
<div class="column">Column 2 is a bit longer.</div>
<div class="column">Column 3.</div>
</div>
jsFiddle: http://jsfiddle.net/aqk1yy1d/
This table-cell behavior expands with window resize. I would like the center cell/div to be fixed to its content and not expand. Basically the sides should expand but not the inner cell, wich should be the size of its content.
I don't see how I can do this without setting a defined width somewhere, but that in not ok, because I will have different length of content in that middle cell....
Any pointers?
The trick is to set both the left and right column to take up 50% of the width of the table. The center column gets a width of 1px. If there is content larger than 1px in the center column it will force the center column to grow.
The first example only has text inside it, which will wrap at the first moment. To mitigate this add something like white-space: nowrap to keep all text on a single line or make sure that you have content with a width.
.container {
display: table;
width: 70%;
text-align: center;
margin-bottom: 10px;
}
div {
border: 1px solid #336;
}
.column {
display: table-cell;
}
.left,
.right {
width: 50%;
}
.center {
width: 1px;
}
.center-content {
white-space: nowrap;
}
<div class="container">
<div class="column left">Column 1.</div>
<div class="column center">Column 2 is a bit longer.</div>
<div class="column right">Column 3.</div>
</div>
<div class="container">
<div class="column left">Column 1.</div>
<div class="column center"><div class="center-content">Column 2 is a bit longer.</div></div>
<div class="column right">Column 3.</div>
</div>
If you can't find a better solution, you could try using javascript to set the width dynamically. Change your html to something like this:
<div class="container">
<div class="column">Column 1.</div>
<div id="column2Outer" class="column">
<div id="column2Inner" style="display: inline-block">Column 2 is a bit longer.</div>
</div>
<div class="column">Column 3.</div>
</div>
The javascript would be as follows:
$("#column2Outer").css("width", document.getElementById("column2Inner").clientWidth);
You would call this on $(document).ready() or whenever the content changes. You would of course also have to remove the border from the inner column so you can't tell it's a nested div