This is a table,
This is the design of the same table when onHover
Here is the trouble, the parent div of the original div has a padding to align the table content, so when onHover, the background-color is following the same constraint as well. So it becomes this:
How to solve this, how to make it break the padding constraint?
I created a codepen
Is this?
.box {
background-color: lightgrey;
}
.row {
display: flex;
padding: 16px;
}
.row:hover {
background-color:red;
}
.cell {
width: 33%;
}
<div class='box'>
<div class='row'>
<div class='cell'>
1
</div>
<div class='cell'>
2
</div>
<div class='cell'>
3
</div>
</div>
</div>
Put left/right padding on .cell like this:
.cell {
width: 33%;
padding: 0 1rem;
}
https://codepen.io/anon/pen/wNmmxa
How about adding this to your css?
.box:hover{background-color: red;}
https://codepen.io/vensa-albertgao/pen/yZKKXa
Related
I need my two blocks to go in a row one after another, but when the screen resolution decreases, they are placed under each other, that is, in the column
<div>
<div>
<h1>Block1</h1>
</div>
<div>
<h1>Block2</h1>
</div>
</div>
We can use flex (by default flex-direction is row so we don't need any other styling in css) -:
<div class="container">
<div>
<h1>Block1</h1>
</div>
<div>
<h1>Block2</h1>
</div>
</div>
.container{
display: flex;
}
Also this is one way of doing things, flex is not supported everywhere so you can go for inline-block also -:
<div>
<div class="inline">
<h1>Block1</h1>
</div>
<div class="inline">
<h1>Block2</h1>
</div>
</div>
.inline{
display: inline-block;
}
As the div element is known as a block element, you need to use display:inline-block. This means 'if there is space next to the element, place the next inline block element next to it' (in essence).
div {
display: inline-block;
background:tomato;
}
#media only screen and (max-width: 600px) {
div{
display:block;
background:green;
}
<div>
<div>1
</div>
<div>2
</div>
</div>
For your width to then turn back into a block element, you will need to use the media query - something like above.
You should use CSS grid:
<div class="wrapper">
<div>
<h1>Block1</h1>
</div>
<div>
<h1>Block2</h1>
</div>
</div>
Css:
.wrapper{
diplay: grid;
grid-template-columns: 1fr;
}
Try using display:flex and use flexbox to place next to each other when the width is high. When the width reduces the div cols will go down.
.row {
width: 100vw;
display: flex;
flex-wrap: wrap;
}
.cols {
height: 400px;
width: 400px;
margin: 5px 5px 5px 5px;
background-color: blue;
}
<div class="row">
<div class="cols">
</div>
<div class="cols">
</div>
</div>
Like this:
#media all and (max-width: 480px) {
div{
float: left;
width: 98%;
margin-left: 1%;
overflow: hidden;
border: 1px solid #000;
box-sizing: border-box;
padding: 5px;
}
}
Or with class
.wrapper div{
...
}
More about #media
https://developer.mozilla.org/pl/docs/Web/CSS/Media_Queries/Using_media_queries
Picture describes it better, so I am attaching it.
So, this is simple list. Green areas are clickable and what I want to achieve is centering texts inside those green buttons, but those texts also should be aligned to left side. Not sure if I am being clear enough, but I do hope picture will explain the idea.
Tried to play with flex, but not successfully.
#container {
display: flex;
flex-direction: column;
align-items: center;
}
.item {
border: 1px solid red;
}
<div id="container">
<div id="otherContainer">
<div class="item">some text</div>
<div class="item">sone loooonger text</div>
<div class="item">text</div>
</div>
</div>
I expect to have some clean css which would allow me to have desired result as you can see in picture. So, question is, is it even possible to achieve without hackish css/JS solutions?
Yes, its possible to do this without javascript, but it comes with some limitations like having to set a max-width.
button {
display: block;
width: 100%;
border: none;
}
div {
margin: 1rem auto;
max-width: 100px;
text-align: left;
}
.bg-green {
background: green;
}
.bg-lightgreen {
background: lightgreen;
}
<button class="bg-green">
<div>Some text</div>
</button>
<button class="bg-lightgreen">
<div>Some other text</div>
</button>
<button class="bg-green">
<div>Text</div>
</button>
Here is a trick using table:
#container {
display: table;
width:100%;
}
.item {
background: yellow;
display:table-row;
white-space:nowrap;
}
.item:before,
.item:after{
content: "";
display:table-cell;
width:50%;
}
.item:hover {
background: red;
}
<div id="container">
<div class="item">some text</div>
<div class="item">sone loooonger text</div>
<div class="item">text</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 need to have a div construct with a table-display, while the first cell should be as wide as the content fit to it without linebreak. The second cell should take the rest of the width,
html
<div class="table full-width">
<div class="table-cell">Cell 1 without br</div>
<div class="table-cell">Cell 2 just the rest width</div>
</div>
css
.full-width {
width: 100%;
}
.table {
display: table;
}
.table-cell {
display: table-cell;
}
I would highly recommend not explicitly styling <div>s as table elements. Use the default HTML elements for that, or perhaps use more fluid formatting styles, such as float.
However, I suggest you use the more modern CSS3 flex-box, with its children style flex-grow. It gives you a lot more flexibility in situations like these.
div.container {
display: flex;
background-color: lightgrey;
padding: 20px;
justify-content: space-between;
}
div.shrink, div.grow {
padding: 20px;
margin: 0 10px;
background-color: grey;
flex-basis: auto;
}
div.shrink {
flex-shrink: 1;
}
div.grow {
flex-grow: 1;
}
<div class="container">
<div class="shrink">
This will shrink!
</div>
<div class="grow">
This will grow!
</div>
</div>
You can try this:
HTML
<div class="table full-width">
<div class="table-cell">Cell 1 without br</div>
<div class="table-cell cell-wide">Cell 2 just the rest width</div>
</div>
CSS
.full-width {
width: 100%;
}
.table {
display: table;
}
.table-cell {
display: table-cell;
white-space: pre;
}
.cell-wide {
width: 100%
}
Fiddle
I'm looking for a CSS solution to the following:-
<div style="display:inline;">
<div>The content of this div is dynamically created but will always be wider than
the below div.
</div>
<div> Need this div to have the same width as the above div.
</div>
</div>
The wrapper div has an inline display and works as expected, both child divs have dynamically generated content. I need the bottom one to take the width of the previous sibling.
Many thanks for any suggestions in advance.
Here's another Flexbox solution which allows for the second child to wrap to match the width of the variable height sibling.
.wrapper > div {
border: 1px solid;
}
.child {
display: flex;
}
.child div {
flex-grow: 1;
width: 0;
}
.wrapper {
display: inline-block;
}
<div class="wrapper">
<div>This div is dynamically sized based on its content</div>
<div class="child"><div>This div will always be the same width as the preceding div, even if its content is longer (or shorter too).</div></div>
</div>
Edit:
To support multiple divs under .child, where each div is on its own line, add break-after: always; ...
.child div {
flex-grow: 1;
width: 0;
break-after: always;
}
Floats and tables are so 2000 and late. With today's browsers we can make the two sibling DIVs match each other's width, regardless which is bigger/smaller.
Here's a Flexbox solution fit for 2016:
.wrapper {
display: inline-block;
}
.parent {
display: flex;
flex-direction: column;
}
/* For visualization */
.child {
border: 1px solid #0EA2E8;
margin: 2px;
padding: 1px 5px;
}
<div class="wrapper">
<div class="parent">
<div class="child">Child number one</div>
<div class="child">Child #2</div>
</div>
</div>
Set your div to display:inline-block instead, this way your div will expand with the content inside of it.
http://jsfiddle.net/CpKDX/
2023 keep it simple...
Use grid and the fr unit. Then you can split up into as many equally sized rows or columns as you want:
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 1em;
}
.container > div {
border: 1px solid black;
padding: 0.5em;
}
<div class="container">
<div>I'm a part of a grid. I will be split up into equal parts with my other sibling(s) depending on how many columns the grid is given.</div>
<div>I am a sibling element.</div>
</div>
Here is still a flexbox-based approach.
The essential idea: in an outermost wrapper, elements that need to be of equal width are wrapped into another wrapper.
.wrapper {
display: inline-block;
}
.flex-wrapper {
display: flex;
flex-direction: column;
}
.demo-bar {
height: 4px;
background-color: deepskyblue;
}
<div class="wrapper">
<div class="flex-wrapper">
<div contenteditable>Some editable text.</div>
<div class="demo-bar"></div>
</div>
</div>
Another practical example: an adaptive progress bar with the same width below a media (video or audio) element.
video.addEventListener("timeupdate", () =>
progress.style.width = `${video.currentTime / video.duration * 100}%`
)
.wrapper {
display: flex;
flex-direction: column;
position: relative;
align-items: center;
}
video {
display: block;
max-width: 100%;
}
.progress-bar {
height: 0.25rem;
background: #555;
}
#progress {
width: 0%;
height: 100%;
background-color: #595;
}
<div class="wrapper">
<div data-css-role="wrapper">
<video id="video" controls>
<source src="https://raw.githubusercontent.com/mdn/interactive-examples/master/live-examples/media/cc0-videos/flower.webm">
</video>
<div class="progress-bar">
<div id="progress"></div>
</div>
</div>
</div>
UPDATE: This works with me, I've just tried it:
<div style="max-width:980px;border:1px solid red;">
<div style="background:#EEE;float:left;">
<div style="width:auto;border:1px solid blue;float:left;">If you use 100% here, it will fit to the width of the mother div automatically.</div>
<div style="border:1px solid green;"> The div will be 100% of the mother div too.</div>
</div>
<div style="clear:both;"></div>
</div>
Is this what you want? The borders and background are just to show the divs ;)
Just go like this:
Let's say you want the whole divs be max. 980px (otherwise just leave that out or replace with 100%)...
<div style="max-width:980px;">
<div style="width:100%;">If you use 100% here, it will fit to the width of the mother div automatically.
</div>
<div style="width:100%;"> The div will be 100% of the mother div too.
</div>
</div>
The second option would be, to use one more div... or you use style="width:auto;" for the dynamic div...
Not sure if I understood what you are trying to do, but looks like setting a 100% width to the last div should work:
<div style="width:100%;">
BTW the style in the first div is not well defined, you should use a colon instead of a equal sign in the properties definition:
<div style="display:inline;">
If your willing to give up on a couple of <div>s then I have the solution for you:
<div style=“display: inline-block;”>
<table>
<tr>
<td>The table automatically makes its siblings the same width</td>
</tr>
<tr>
<td>So this will be as wide</td>
</tr>
</table>
</div>
Remember to set the div display:inline-block;