In html, I have a panel with a fixed height which contains cards. It can contain one card or many cards. Hence, because the panel has a fixed height, it can be needed to have a scrollbar displayed in order to visualize all cards. This works properly with the property overflow: auto.
However, when the scrollbar is displayed, cards are shift. I would like to avoid that or at least hide this shift with a trick. I checked a lot of similar questions that suggests to use padding-left: calc(100vw - 100%); but it did not work since it is not the body scrollbar. The width of the card needs to be responsive according to the container's width.
Something that could work is to set the overflow: overlay and add a padding-right. However, this is not a standard and not compatible with firefox.
Here, you can find a reproduce example:
let flag = true;
const setHeight = () => {
if (flag) {
document.getElementById('container').style.setProperty('height', '100%');
} else {
document.getElementById('container').style.removeProperty('height');
}
flag = !flag;
};
document.getElementById('button').addEventListener('click', setHeight);
setHeight();
.panel-container {
height: 300px;
width: 510px;
padding: 8px 20px 0;
background-color: blue;
overflow: auto;
}
.card {
height: 86px;
width: 100%;
background-color: grey;
border-radius: 3px;
border: 1px solid red;
margin-bottom: 10px;
cursor: pointer;
}
.scrollbar::-webkit-scrollbar-track {
width: 14px;
}
.scrollbar::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 4px solid green;
}
.scrollbar::-webkit-scrollbar-corner {
background-color: transparent;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
height: 8px;
}
<button id="button">With/Without overflow</button>
<div id="container" class="panel-container scrollbar">
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
</div>
In fact, it was quite simple. Just play with the margin and set the overflow to scroll.
let flag = true;
const setHeight = () => {
if (flag) {
document.getElementById('container').style.setProperty('height', '100%');
} else {
document.getElementById('container').style.removeProperty('height');
}
flag = !flag;
};
document.getElementById('button').addEventListener('click', setHeight);
setHeight();
.panel-container {
height: 300px;
width: 510px;
padding: 8px 12px 0 20px;
background-color: blue;
overflow: scroll;
}
.card {
height: 86px;
width: 100%;
background-color: grey;
border-radius: 3px;
border: 1px solid red;
margin-bottom: 10px;
cursor: pointer;
}
.scrollbar::-webkit-scrollbar-track {
width: 14px;
}
.scrollbar::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 4px solid green;
}
.scrollbar::-webkit-scrollbar-corner {
background-color: transparent;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
height: 8px;
}
<button id="button">With/Without overflow</button>
<div id="container" class="panel-container scrollbar">
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
<div class="card">
<div class="card-left-container"></div>
<div class="card-middle-container"></div>
<div class="card-right-container"></div>
</div>
</div>
Related
Current Behavior
I have the following basic structure:
<section id="containers">
<div class="box" id="box1">
<div class="collapsible"><h2>Box 1</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box2">
<div class="collapsible"><h2>Box 2</h2></div>
<div class="content">Content</div>
</div>
<!-- ... dozens of .boxes ... -->
</section>
#containers is .display: flex; flex-wrap: wrap, so the number of boxes on any one row is dynamic. This is an important feature that must be maintained.
Here's a minimal working example:
$(document).ready(function() {
$(".collapsible").click(function() {
$( this ).next().slideToggle();
});
});
#containers {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.box {
min-width: 15em;
background: #888;
border: #555 1px solid;
overflow: hidden;
border-radius: 0.5em;
}
.collapsible {
background: #ccc;
cursor: pointer;
}
.collapsible h2 {
margin: 0;
margin-left: 16px;
font-size: 2rem;
}
.collapsible:hover {
background: #aaf;
}
.content {
margin: 0.5em;
margin-left: 16px;
display: none; /* Initially collapsed */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p id="status"></p>
<section id="containers">
<div class="box" id="box1">
<div class="collapsible"><h2>Box 1</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box2">
<div class="collapsible"><h2>Box 2</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box3">
<div class="collapsible"><h2>Box 3</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box4">
<div class="collapsible"><h2>Box 4</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box5">
<div class="collapsible"><h2>Box 5</h2></div>
<div class="content">Content</div>
</div>
</section>
</body>
I can easily use .slideToggle() to toggle visibility of a sibling (.content) underneath one of the clickable .collapsible divs:
$(".collapsible").click(function() {
$( this ).next().slideToggle();
});
Desired Behavior and Remarks
What I'd like is, on click of any .collapsible div in a row, the entire row will be toggled. That is, every .content div on the same horizontal row as displayed in the current viewport.
This must handle rows with dynamic number of columns, including viewport resizing. I'm flexible on the precise behavior, though.
Is this possible? And how much will it hurt?🙂 Changes to the document structure (such as adding some sort of row container) are OK, and I don't mind using some JS/jQuery code of course. The main thing I can't do is hard code the number of columns, as I need my site to remain responsive on vertical phones and fullscreen desktop browsers.
Maybe the jQuery slideToggle() function is not the best method.
Since a row will be the same height , you may look at a method to set size from 0 to another value. anybox resized will stretch other boxes on the same row.
here an example of the idea, setting a max-height from 0 to 200px and a transition.
it toggles a class.
$(document).ready(function() {
$(".collapsible").click(function() {
this.classList.toggle('slide');// plain javascript to toggle a class
});
});
*{box-sizing:border-box}
#containers {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.box {
min-width: 15em;
background: #888;
border: #555 1px solid;
overflow: hidden;
border-radius: 0.5em;
}
.collapsible {
background: #ccc;
cursor: pointer;
}
.collapsible h2 {
margin: 0;
margin-left: 16px;
font-size: 2rem;
}
p{margin-top:0;}
.collapsible:hover {
background: #aaf;
}
.content {
margin:0 0.5em;
margin-left: 16px;
max-height:0; /* Initially collapsed */
transition:0.5s
}
.slide + .content{max-height:400px;/* which one got the class*/ color:darkred}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p id="status"></p>
<section id="containers">
<div class="box" id="box1">
<div class="collapsible"><h2>Box 1</h2></div>
<div class="content"><p>Content</p></div>
</div>
<div class="box" id="box2">
<div class="collapsible"><h2>Box 2</h2></div>
<div class="content"><p>Content</p><p>Content</p></div>
</div>
<div class="box" id="box3">
<div class="collapsible"><h2>Box 3</h2></div>
<div class="content"><p>Content</p></div>
</div>
<div class="box" id="box4">
<div class="collapsible"><h2>Box 4</h2></div>
<div class="content"><p>Content</p><p>Content</p><p>Content</p></div>
</div>
<div class="box" id="box5">
<div class="collapsible"><h2>Box 5</h2></div>
<div class="content"><p>Content</p></div>
</div>
</section>
</body>
What you are missing here , is to set the height of the row to the height of the taller box, unless they will all be the same height.
For this, you can look for every box at the same top offset that the one clicked, and look for the tallest innercontent of the .contents and use this height .
Here comes the idea looking where each are standing and resets a max-height rule, you can inspire from too:
// defaut : supposed to be with no class 'slide' set on html elements
$(document).ready(function () {
let boxes = document.querySelectorAll(".collapsible");
let contents = document.querySelectorAll(".content");
$(".collapsible").click(function (event) {
let arrayContent = [];//reset
let hide=false;
for (i = 0; i < contents.length; i++) {
contents[i].style.maxHeight = "min-content";
let index = i;
let heightC = contents[i].offsetTop;
let boxOffset = contents[i].parentNode.offsetTop + 1;
// a few infos .add/remove what is needed
arrayContent.push({
index,
heightC,
boxOffset
});
contents[i].setAttribute("style", "");// resets inline style
}
let rowOffset = this.offsetTop;
if(this.classList.contains('slide')) {
hide=true;
}
let classState = this.classList;
arrayContent.forEach(function (obj) {
if (obj.boxOffset == rowOffset) {
if(hide == true) boxes[obj.index].classList.add('slide');/* reset needed if window resized => rows reorganized ? */
boxes[obj.index].classList.toggle("slide");
} else {
boxes[obj.index].classList.remove("slide");
}
});
});
});
* {
box-sizing: border-box
}
#containers {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.box {
min-width: 15em;
background: #888;
border: #555 1px solid;
overflow: hidden;
border-radius: 0.5em;
}
.collapsible {
background: #ccc;
cursor: pointer;
}
.collapsible h2 {
margin: 0;
margin-left: 16px;
font-size: 2rem;
}
p {
margin-top: 0;
}
.collapsible:hover {
background: #aaf;
}
.content {
margin: 0 0.5em;
margin-left: 16px;
max-height: 0;
/* Initially collapsed */
transition: max-height 0.5s!important
}
.slide~.content {
max-height: 400px;
/* which one got the class*/
color: darkred;
}
.collapsible:before {
content: attr(class)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p id="status"></p>
<section id="containers">
<div class="box" id="box1">
<div class="collapsible">
<h2>Box 1</h2>
</div>
<div class="content">
<p>Content</p>
</div>
</div>
<div class="box" id="box2">
<div class="collapsible">
<h2>Box 2</h2>
</div>
<div class="content">
<p>Content</p>
<p>Content</p>
</div>
</div>
<div class="box" id="box3">
<div class="collapsible">
<h2>Box 3</h2>
</div>
<div class="content">
<p>Content</p>
</div>
</div>
<div class="box" id="box4">
<div class="collapsible">
<h2>Box 4</h2>
</div>
<div class="content">
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
<div class="box" id="box5">
<div class="collapsible">
<h2>Box 5</h2>
</div>
<div class="content">
<p>Content</p>
</div>
</div>
</section>
</body>
I have these progress bars which are suppose to work as ratings and they look good:
I have applied some CSS and I change their width with JavaScript by reading values from text files.
But are not responsive at all and whenever the window is resized:
HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="second-part">
<div class="row">
<div class="side">
<div>5 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar11" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p11">150</div>
</div>
<div class="side">
<div>4 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar12" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p12">63</div>
</div>
<div class="side">
<div>3 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar13" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p13">15</div>
</div>
<div class="side">
<div>2 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar14" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p14">6</div>
</div>
<div class="side">
<div>1 star</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar15" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p15">20</div>
</div>
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
/* Three column layout */
.side {
float: left;
width: 15%;
margin-top:10px;
}
.middle {
margin-top:10px;
float: left;
width: 70%;
}
/* Place text to the right */
.right {
text-align: left;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The bar container */
.bar-container {
width: 90%;
background-color: #f1f1f1;
text-align: center;
color: white;
}
/* Responsive layout - make the columns stack on top of each other instead of next to each other */
#media (max-width: 400px) {
.side, .middle {
width: 100%;
}
.right {
display: none;
}
}
JavaScript to change progress bar width:
var par1 = 4;
for(var i = 10; i < 16; i++) {
$('.p' + (i+1)).text(table[0][par1]);
$('.bar' + (i+1)).css("width", table[0][par1]);
par1++;
}
How could I make it more responsive? Thank you in advance!
I recommend using css flexbox, so the items wrap instead of overlap when the page is resized. You could use media queries with this to adjust the size of the items and container so they don't overlap/wrap. This site has a good explanation of flexbox: A Complete Guide to Flexbox.
I want to make cards which are responsive but not fixed. What changes should I make to CSS so that it change change their sizes accordingly.
Here is the fiddle link for this Working Fiddle
The cars should change its size with resizing window however the position of the button should be at the bottom only, and in spite of content, size of all cards should be same.
CARD.HTML
<div class = 'col-md-2'>
<div class="mycard text-center">
<div class="card-header">
<p1>HEADING 1</p1>
</div>
<div class = "card-block">
<div id = "container">
Something will be written here
</div>
</div>
<div class = "card-name">
<p2> MY NAME 1 </p2>
</div>
<div class = 'cardfooter'>
<div class='dropdownAD'>
<button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
</div>
<div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
</div>
</div>
</div>
<div class="mycard text-center">
<div class="card-header">
<p1>HEADING 2</p1>
</div>
<div class = "card-block">
<div id = "container">
Something will be written here
</div>
</div>
<div class = "card-name">
<p2> MY NAME 2 , WHOLE PURPOSE IS TO MAKE TO NEXT LINE TO MAKE BUTTONS AT FIXED PLACE </p2>
</div>
<div class = 'cardfooter'>
<div class='dropdownAD'>
<button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
</div>
<div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
</div>
</div>
</div>
<div class="mycard text-center">
<div class="card-header">
<p1>HEADING 3</p1>
</div>
<div class = "card-block">
<div id = "container">
Something will be written here
</div>
</div>
<div class = "card-name">
<p2> MY NAME 3</p2>
</div>
<div class = 'cardfooter'>
<div class='dropdownAD'>
<button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
</div>
<div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
</div>
</div>
</div>
<div class="mycard text-center">
<div class="card-header">
<p1>HEADING 4</p1>
</div>
<div class = "card-block">
<div id = "container">
Something will be written here
</div>
</div>
<div class = "card-name">
<p2> MY NAME 4</p2>
</div>
<div class = 'cardfooter'>
<div class='dropdownAD'>
<button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
</div>
<div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
</div>
</div>
</div>
</div>
CARD.CSS
.mycard {
background-color: #FFC20A;
color: black;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
padding: 5px 5px 5px 5px;
text-align: center;
height: 200px;
width: 230px;
border-radius: 10px;
font-size: 12px;
}
.card-header {
color: black;
height:24px;
padding: 1px 0px 1px 0px;
font-size: 16px;
text-align: center;
}
.card-block {
background-color: #b2b2b2;
color: black;
border-radius: 10px;
height: 100px;
width: 220px;
}
.card-name {
height:35px;
}
.cardfooter {
border-radius: 5px;
width:100%;
height: 34px;
bottom:0;
margin-bottom: 0px;
}
I believe all you need to do is change the card's width to min-width. This will force the card to be 100% width until 230px. As you can see in my altered version of your JSFiddle.
What you should keep in mind is your card content is broken down into rows of content. Each row looks like it should be 100% width of the card, therefore you don't need to actually apply a width to the content, just provide display: block. This will force it to be 100% width of it's parent. With content being 100% width of it's parent it's flexibility will always be dependent on the parent. Thus you can set the parents width to 100%, 50%, 200px whatever, the content will always follow.
Let me know if you need me to clarify anything :)
.mycard {
background-color: #FFC20A;
color: black;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
padding: 5px 5px 5px 5px;
text-align: center;
height: 200px;
min-width: 230px;
border-radius: 10px;
font-size: 12px;
}
.card-header {
color: black;
height:24px;
padding: 1px 0px 1px 0px;
font-size: 16px;
text-align: center;
}
.card-block {
background-color: #b2b2b2;
color: black;
border-radius: 10px;
height: 100px;
width: 220px;
}
.card-name {
height:35px;
}
.cardfooter {
border-radius: 5px;
width:100%;
height: 34px;
bottom:0;
margin-bottom: 0px;
}
<div class = 'col-md-2'>
<div class="mycard text-center">
<div class="card-header">
<p1>HEADING 1</p1>
</div>
<div class = "card-block">
<div id = "container">
Something will be written here
</div>
</div>
<div class = "card-name">
<p2> MY NAME 1 </p2>
</div>
<div class = 'cardfooter'>
<div class='dropdownAD'>
<button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
</div>
<div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
</div>
</div>
</div>
<div class="mycard text-center">
<div class="card-header">
<p1>HEADING 2</p1>
</div>
<div class = "card-block">
<div id = "container">
Something will be written here
</div>
</div>
<div class = "card-name">
<p2> MY NAME 2 , WHOLE PURPOSE IS TO MAKE TO NEXT LINE TO MAKE BUTTONS AT FIXED PLACE </p2>
</div>
<div class = 'cardfooter'>
<div class='dropdownAD'>
<button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
</div>
<div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
</div>
</div>
</div>
<div class="mycard text-center">
<div class="card-header">
<p1>HEADING 3</p1>
</div>
<div class = "card-block">
<div id = "container">
Something will be written here
</div>
</div>
<div class = "card-name">
<p2> MY NAME 3</p2>
</div>
<div class = 'cardfooter'>
<div class='dropdownAD'>
<button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
</div>
<div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
</div>
</div>
</div>
<div class="mycard text-center">
<div class="card-header">
<p1>HEADING 4</p1>
</div>
<div class = "card-block">
<div id = "container">
Something will be written here
</div>
</div>
<div class = "card-name">
<p2> MY NAME 4</p2>
</div>
<div class = 'cardfooter'>
<div class='dropdownAD'>
<button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
</div>
<div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
</div>
</div>
</div>
</div>
Goodmorning developers,
I am new in frontend development. I'm stuck with the following problem:
I want to have a head div with 4 sub divs inside the head one. How can I do it with fitting the screen? (see sketch)
Kind regards
I think you need this please check:
See Fiddle Demo
.container {
border: 3px solid;
float: left;
width: 100%;
}
.custom_box {
float: left;
width: 100%;
}
.custom_box1 {
border: 3px solid;
float: left;
margin: 2%;
text-align: center;
width: 35%;
}
.custom_box2 {
border: 3px solid;
float: left;
margin: 2%;
text-align: center;
width: 55%;
}
<div class="container">
<div class="custom_box">
<div class="custom_box1">
<h1>1</h1>
</div>
<div class="custom_box2">
<h1>2</h1>
</div>
</div>
<div class="custom_box">
<div class="custom_box1">
<h1>1</h1>
</div>
<div class="custom_box2">
<h1>2</h1>
</div>
</div>
</div>
Here is the fiddle: https://jsfiddle.net/9Lum94me/
There are other ways as well with CSS floats, flexbox and table-cell which you can explore.
HTML:
<div class="container">
<div class="row">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
</div>
<div class="row">
<div class="column">Column 3</div>
<div class="column">Column 4</div>
</div>
</div>
CSS:
.container{
border: 1px solid gray;
}
.row{
padding: 10px;
}
.row .column{
display: inline-block;
min-width: 45%; min-height: 150px; border: 1px solid gray; margin: 0 4% 0 0;
}
EDIT:
You will have to manage the widths of the columns as per needs.
A bootstrap responsive example without any style...(Except bordering).
Fiddle example
.content{
border:2px solid green;
height:100px;
width:92%;
margin:20px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="border:1px solid blue;">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="row no-gutter-2">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="content">Header1</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="content">Header2</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="content">Header3</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="content">Header4</div>
</div>
</div>
</div>
</div>
To test the responsiveness, plz re-size the browser window.
Above example is responsive on small, medium and large scale.
Please run the snippet on full page.
The goal is to create grid with indented rows where the last cell fills to right hand side of the page with a 1px border around each cell.
The problem in the attempt below is that the border of the last cell of a row extends the full page width which creates unwanted borders around an indent. This seems strange because the div contents are correctly aligned.
http://jsfiddle.net/woqpq508/1/
<style>
.table {
border-collapse:collapse;
}
.row {
}
.indent {
min-width: 20px;
float: left;
}
.cell {
border-style: solid;
border-width: 1px;
margin-left: -1px;
margin-bottom: -1px;
float: left;
}
.lastcell {
float: none;
}
</style>
<div class="table">
<div class="row">
<div class="cell">x</div>
<div class="cell">y</div>
<div class="cell">zzz</div>
<div class="cell lastcell" contenteditable="true">long text</div>
</div>
<div class="row">
<div class="indent"> </div>
<div class="cell">x</div>
<div class="cell">y</div>
<div class="cell">zzz</div>
<div class="cell lastcell" contenteditable="true">long text</div>
</div>
<div class="row">
<div class="cell">x</div>
<div class="cell">y</div>
<div class="cell">zzz</div>
<div class="cell lastcell" contenteditable="true">long text</div>
</div>
</div>
As said in the comment, you'd achieve what you want with display:table/table-cell.
.table {
border-collapse: collapse;
display: table;
width: 100%;
}
.row {
margin-bottom: -1px;
}
.indent {
min-width: 20px;
display: table-cell;
}
.cell {
border-style: solid;
border-width: 1px;
display: table-cell;
}
.lastcell {
width: 100%;
}
<div class="table">
<div class="row">
<div class="cell">x</div>
<div class="cell">y</div>
<div class="cell">zzz</div>
<div class="cell lastcell" contenteditable="true">long text</div>
</div>
<div class="row">
<div class="indent"> </div>
<div class="cell">x</div>
<div class="cell">y</div>
<div class="cell">zzz</div>
<div class="cell lastcell" contenteditable="true">long text</div>
</div>
<div class="row">
<div class="cell">x</div>
<div class="cell">y</div>
<div class="cell">zzz</div>
<div class="cell lastcell" contenteditable="true">long text</div>
</div>
</div>
Fiddle from your comment
You could always draw a border around the row and only give each cell (except the last one) a border-left:
.indent {
min-width: 20px;
float: left;
}
.cell {
border-right: 1px solid;
margin-left: -1px;
float: left;
}
.lastcell {
border: 0;
float: none;
}
.container > div {
border: 1px solid;
border-top: 0;
}
.container > div:first-child {
border-top: 1px solid;
}
<div class="container">
<div>
<div class="cell">x</div>
<div class="cell">y</div>
<div class="cell">zzz</div>
<div class="cell lastcell" contenteditable="true">long text</div>
</div>
<div>
<div class="indent"> </div>
<div class="cell">x</div>
<div class="cell">y</div>
<div class="cell">zzz</div>
<div class="cell lastcell" contenteditable="true">long text</div>
</div>
<div>
<div class="cell">x</div>
<div class="cell">y</div>
<div class="cell">zzz</div>
<div class="cell lastcell" contenteditable="true">long text</div>
</div>
</div>
When you removed the float from the last cell, you've turned it back into a block element, which catches 100% of it's container (- other floats in your case).
Remove the lastCell class, and add clear:both to .row
.row {
clear: both;
}
Anyhow, I must agree with the #Vucko comment - use a table or a css table instead.