Maybe someone has any bright ideas how to replace my current solution to one of the problems via only CSS? I have a working JS solution, just curious if there is a CSS-only one.
A) Elements here have the same width, only the number of elements changes (can be more or less).
B) The line should expand to full width that is empty left here (the problem is here).
C) Text is dynamic (always other width).
Is it possible to set the B) element, so it would fill the width?
Yes it is possible with Flexbox, you can just set flex: 1 on lines and they will take rest of free space.
.content,
.a {
display: flex;
align-items: center;
}
.box {
width: 50px;
height: 50px;
margin: 5px;
background: red;
}
.line {
flex: 1;
border-bottom: 1px dashed black;
}
<div class="content">
<div class="a">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="line"></div>
<div class="text">Lorem ipsum.</div>
<div class="line"></div>
<div class="text">Text</div>
</div>
Related
I have a main wrapper div that is set 100% width. Inside that i would like to have two divs, one that is fixed width and the other that fills the rest of the space. How do i float the second div to fill the rest of the space. Thanks for any help.
There are many ways to do what you're asking for:
Using CSS float property:
<div style="width: 100%; overflow: hidden;">
<div style="width: 600px; float: left;"> Left </div>
<div style="margin-left: 620px;"> Right </div>
</div>
Using CSS display property - which can be used to make divs act like a table:
<div style="width: 100%; display: table;">
<div style="display: table-row">
<div style="width: 600px; display: table-cell;"> Left </div>
<div style="display: table-cell;"> Right </div>
</div>
</div>
There are more methods, but those two are the most popular.
CSS3 introduced flexible boxes (aka. flex box) which can also achieve this behavior.
Simply define the width of the first div, and then give the second a flex-grow value of 1 which will allow it to fill the remaining width of the parent.
.container{
display: flex;
}
.fixed{
width: 200px;
}
.flex-item{
flex-grow: 1;
}
<div class="container">
<div class="fixed"></div>
<div class="flex-item"></div>
</div>
Demo:
div {
color: #fff;
font-family: Tahoma, Verdana, Segoe, sans-serif;
padding: 10px;
}
.container {
background-color:#2E4272;
display:flex;
}
.fixed {
background-color:#4F628E;
width: 200px;
}
.flex-item {
background-color:#7887AB;
flex-grow: 1;
}
<div class="container">
<div class="fixed">Fixed width</div>
<div class="flex-item">Dynamically sized content</div>
</div>
Note that flex boxes are not backwards compatible with old browsers, but is a great option for targeting modern browsers (see also Caniuse and MDN). A great comprehensive guide on how to use flex boxes is available on CSS Tricks.
I don't know much about HTML and CSS design strategies, but if you're looking for something simple and that will fit the screen automatically (as I am) I believe the most straight forward solution is to make the divs behave as words in a paragraph. Try specifying display: inline-block
<div style="display: inline-block">
Content in column A
</div>
<div style="display: inline-block">
Content in column B
</div>
You might or might not need to specify the width of the DIVs
You can use CSS grid to achieve this, this is the long-hand version for the purposes of illustration:
div.container {
display: grid;
grid-template-columns: 220px 20px auto;
grid-template-rows: auto;
}
div.left {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: row1-start
grid-row-end: 3;
background-color: Aqua;
}
div.right {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end; 1;
background-color: Silver;
}
div.below {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end; 2;
}
<div class="container">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="below">Below</div>
</div>
Or the more traditional method using float and margin.
I have included a background colour in this example to help show where things are - and also what to do with content below the floated-area.
Don't put your styles inline in real life, extract them into a style sheet.
div.left {
width: 200px;
float: left;
background-color: Aqua;
}
div.right {
margin-left: 220px;
background-color: Silver;
}
div.clear {
clear: both;
}
<div class="left"> Left </div>
<div class="right"> Right </div>
<div class="clear">Below</div>
<div style="width: 200px; float: left; background-color: Aqua;"> Left </div>
<div style="margin-left: 220px; background-color: Silver;"> Right </div>
<div style="clear: both;">Below</div>
<div class="container" style="width: 100%;">
<div class="sidebar" style="width: 200px; float: left;">
Sidebar
</div>
<div class="content" style="margin-left: 202px;">
content
</div>
</div>
This will be cross browser compatible. Without the margin-left you will run into issues with content running all the way to the left if you content is longer than your sidebar.
If you're not tagetting IE6, then float the second <div> and give it a margin equal to (or maybe a little bigger than) the first <div>'s fixed width.
HTML:
<div id="main-wrapper">
<div id="fixed-width"> lorem ipsum </div>
<div id="rest-of-space"> dolor sit amet </div>
</div>
CSS:
#main-wrapper {
100%;
background:red;
}
#fixed-width {
width:100px;
float:left
}
#rest-of-space {
margin-left:101px;
/* May have to increase depending on borders and margin of the fixd width div*/
background:blue;
}
The margin accounts for the possibility that the 'rest-of-space' <div> may contain more content than the 'fixed-width' <div>.
Don't give the fixed width one a background; if you need to visibly see these as different 'columns' then use the Faux Columns trick.
Give the first div float: left; and a fixed width, and give the second div width: 100%; and float: left;. That should do the trick. If you want to place items below it you need a clear: both; on the item you want to place below it.
I have a main wrapper div that is set 100% width. Inside that i would like to have two divs, one that is fixed width and the other that fills the rest of the space. How do i float the second div to fill the rest of the space. Thanks for any help.
There are many ways to do what you're asking for:
Using CSS float property:
<div style="width: 100%; overflow: hidden;">
<div style="width: 600px; float: left;"> Left </div>
<div style="margin-left: 620px;"> Right </div>
</div>
Using CSS display property - which can be used to make divs act like a table:
<div style="width: 100%; display: table;">
<div style="display: table-row">
<div style="width: 600px; display: table-cell;"> Left </div>
<div style="display: table-cell;"> Right </div>
</div>
</div>
There are more methods, but those two are the most popular.
CSS3 introduced flexible boxes (aka. flex box) which can also achieve this behavior.
Simply define the width of the first div, and then give the second a flex-grow value of 1 which will allow it to fill the remaining width of the parent.
.container{
display: flex;
}
.fixed{
width: 200px;
}
.flex-item{
flex-grow: 1;
}
<div class="container">
<div class="fixed"></div>
<div class="flex-item"></div>
</div>
Demo:
div {
color: #fff;
font-family: Tahoma, Verdana, Segoe, sans-serif;
padding: 10px;
}
.container {
background-color:#2E4272;
display:flex;
}
.fixed {
background-color:#4F628E;
width: 200px;
}
.flex-item {
background-color:#7887AB;
flex-grow: 1;
}
<div class="container">
<div class="fixed">Fixed width</div>
<div class="flex-item">Dynamically sized content</div>
</div>
Note that flex boxes are not backwards compatible with old browsers, but is a great option for targeting modern browsers (see also Caniuse and MDN). A great comprehensive guide on how to use flex boxes is available on CSS Tricks.
I don't know much about HTML and CSS design strategies, but if you're looking for something simple and that will fit the screen automatically (as I am) I believe the most straight forward solution is to make the divs behave as words in a paragraph. Try specifying display: inline-block
<div style="display: inline-block">
Content in column A
</div>
<div style="display: inline-block">
Content in column B
</div>
You might or might not need to specify the width of the DIVs
You can use CSS grid to achieve this, this is the long-hand version for the purposes of illustration:
div.container {
display: grid;
grid-template-columns: 220px 20px auto;
grid-template-rows: auto;
}
div.left {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: row1-start
grid-row-end: 3;
background-color: Aqua;
}
div.right {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end; 1;
background-color: Silver;
}
div.below {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end; 2;
}
<div class="container">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="below">Below</div>
</div>
Or the more traditional method using float and margin.
I have included a background colour in this example to help show where things are - and also what to do with content below the floated-area.
Don't put your styles inline in real life, extract them into a style sheet.
div.left {
width: 200px;
float: left;
background-color: Aqua;
}
div.right {
margin-left: 220px;
background-color: Silver;
}
div.clear {
clear: both;
}
<div class="left"> Left </div>
<div class="right"> Right </div>
<div class="clear">Below</div>
<div style="width: 200px; float: left; background-color: Aqua;"> Left </div>
<div style="margin-left: 220px; background-color: Silver;"> Right </div>
<div style="clear: both;">Below</div>
<div class="container" style="width: 100%;">
<div class="sidebar" style="width: 200px; float: left;">
Sidebar
</div>
<div class="content" style="margin-left: 202px;">
content
</div>
</div>
This will be cross browser compatible. Without the margin-left you will run into issues with content running all the way to the left if you content is longer than your sidebar.
If you're not tagetting IE6, then float the second <div> and give it a margin equal to (or maybe a little bigger than) the first <div>'s fixed width.
HTML:
<div id="main-wrapper">
<div id="fixed-width"> lorem ipsum </div>
<div id="rest-of-space"> dolor sit amet </div>
</div>
CSS:
#main-wrapper {
100%;
background:red;
}
#fixed-width {
width:100px;
float:left
}
#rest-of-space {
margin-left:101px;
/* May have to increase depending on borders and margin of the fixd width div*/
background:blue;
}
The margin accounts for the possibility that the 'rest-of-space' <div> may contain more content than the 'fixed-width' <div>.
Don't give the fixed width one a background; if you need to visibly see these as different 'columns' then use the Faux Columns trick.
Give the first div float: left; and a fixed width, and give the second div width: 100%; and float: left;. That should do the trick. If you want to place items below it you need a clear: both; on the item you want to place below it.
As can be seen in the image, when the width of first column increase, it pushes the contents of the second column also. I want the items of second column in straight line.
One way of doing could be giving fixed width to first column, but I don't want to do this because, the count of columns is dynamic. Sometimes, there will be only three columns, so I will to increase width dynamically which I don't want to do.
#box {
display: flex;
width: 100px;
margin: 0 -5px;
}
.item {
background: gray;
width: 50px;
height: 50px;
margin: 0 5px;
}
<div id='box'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
Demo: http://jsfiddle.net/GLpUp/
You don't have to set an exact 'fixed' width, but try to set the width 'proportionally' with %.
When all divs have 100% they will all have the same width.
If you know your second column doesn't contain much content, simply reduce the percentage. Like this all columns will have the same width as their neighbours above or below them.
This would be a solution using flexbox. I agree with the comments, that using grid or table instead would be advisable.
#row {
display: flex;
width: 100%;
}
.item {
width: 100%;
height: 50px;
border: 1px solid teal;
}
.item:nth-of-type(2) {
width: 30%;
}
<div id='row'>
<div class='item'>I have a lot of content</div>
<div class='item'>just 1</div>
<div class='item'>...</div>
<div class='item'>...</div>
</div>
<div id='row'>
<div class='item'>This is a different length</div>
<div class='item'>but</div>
<div class='item'>the columns have the same</div>
<div class='item'>widths as in row before</div>
</div>
I am having two problems with the checkboxes shown above. The styles applied on the parent and child are essentially:
.parent {
display: flex;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
outline: 1px solid black;
margin-right: 0.5em;
}
.child {
width: 80%;
height: 80%;
flex: none;
background-color: red;
}
The first problem is: when I go read the child's width via getBoundingClientRect().width, it shows me 19.1875, while it should be 24 * 80% = 19.2.
Secondly, how do I make the child square dead center? I have no idea why but they are all slightly to the left and the top. Side note: the parent and child in this case are both <div> elements.
EDIT:
const child = document.querySelector('.child')
console.log(child.getBoundingClientRect().width)
.parent-container {
display: flex;
justify-content: center;
align-items: center;
width: 500px;
height: 50px;
}
.parent {
display: flex;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
outline: 1px solid black;
margin: 1em;
font-size: 1.5em;
}
.child {
width: 80%;
height: 80%;
flex: none;
background-color: red;
}
<div class='parent-container'>
<div class='parent'>
<div class='child'>
</div>
</div>
<div class='parent'>
<div class='child'>
</div>
</div>
<div class='parent'>
<div class='child'>
</div>
</div>
<div class='parent'>
<div class='child'>
</div>
</div>
</div>
<h1> H1 ELEMENT </h1>
<div class='parent-container'>
<div class='parent'>
<div class='child'>
</div>
</div>
<div class='parent'>
<div class='child'>
</div>
</div>
<div class='parent'>
<div class='child'>
</div>
</div>
<div class='parent'>
<div class='child'>
</div>
</div>
</div>
The above snippet is my best effort at replicating the problem. Firstly, the logged value of the child div's width seems to be incorrect (19.1875 instead of 19.2), though it might not actually affect their appearance.
Secondly, as I have discovered, the child component is only misaligned when there's nearby element that affects their positions. As seen in the snippet, the child element in the row of checkboxes above the <h1> are perfectly centered. But the child div in the ones below it are slightly closer to the top than the bottom. While it might not look obvious, it becomes very apparent when they are scaled up, like the photo at the top.
This is observed in most browsers, though in Firefox this effect is actually reversed (closer to the bottom than top). Are there anything I can do to prevent this behavior?
I lack the in-depth knowledge about how different browsers handle subpixel rounding and rendering. But in this case, the margins and other properties expressed in em or % can cause elements to render at inconsistent positions (as we may be dealing with fractions of pixels, while still being limited by the actual pixels of the screen).
I am not aware of a general solution to this problem, but you could simply ensure that the difference of width and height between the parent and the child is divisible by 2. This difference can then be evenly distributed between left/right and top/bottom. In your case, you could for example try:
.child {
width: calc(100% - 4px);
height: calc(100% - 4px);
background-color: red;
}
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