I have a container that is dynamically generated on the fly. It will end up with either a single div inside it, or two divs inside it.
The first div may or may not be there, but the second div is always there. I need that second div to always fill up the entire width.
It fills the width when the first div is there, but when it isn't there it doesn't go all the way.
Here is the current CSS I am using:
.div1 {
display: table-cell;
}
.div2 {
display: table-cell;
width: 100%;
vertical-align: top;
}
NOTE: Both of these divs have form fields and labels.
Add a parent element that has display:table style:
.table{
display:table;
width: 100%;
height: 200px;
}
.div1 {
display: table-cell;
background-color: red;
}
.div2 {
display: table-cell;
width: 100%;
vertical-align: top;
background-color: blue;
}
<h2>div1 has content</h2>
<div class="table">
<div class="div1">some content</div>
<div class="div2"></div>
</div>
<br/>
<h2>div1 has no content</h2>
<div class="table">
<div class="div1"></div>
<div class="div2"></div>
</div>
<br/>
<h2>no div1</h2>
<div class="table">
<div class="div2"></div>
</div>
JSFiddle
Related
I am trying to figure out how to expand a div when the children contain divs that overflow (to show overlapping images);
div.container {
position:relative
}
div.column {
display: inline-block; // in my case I want to avoid wrapping
width: 180px;
}
div.item-contains-long-image {
display: block;
height: 25px;
overflow: visible;
position: relative;
}
I would like the container to expand vertically to contain the images overflowing from the inner div. I could add padding to the bottom of the div equivalent to the image height, but am looking for a better way.
#Teobis i took your answer as base for a flex example, hope you dont mind :)
div.container { /* this has been rewritten */
display: flex;
flex-direction: row;
}
div.column {
border:1px solid blue; /*just to show the size*/
display: inline-block; /* in my case I want to avoid wrapping */
width: 180px;
vertical-align:top;
}
div.item-contains-long-image {
display: inline-block;
height: 25px;
/* overflow: visible; no needed, default property*/
position: relative;
}
<div class="container">
<div class="column">
<div class="item-contains-long-image">
<img src="http://via.placeholder.com/180x270">
</div>
</div>
<div class="column">
<div class="item-contains-long-image">
<img src="http://via.placeholder.com/180x310">
</div>
</div>
<div class="column">
<div class="item-contains-long-image">
<img src="http://via.placeholder.com/180x110">
</div>
</div>
</div>
Is this structure what you are looking for??
First of all, you need white-space:nowrap; on the parent of display: inline-block;
or you could use flexbox;
div.container {
position:relative;
border:1px solid red; /*just to show the size*/
white-space:nowrap; /*Necesary for no wrap on .column*/
min-height:150px; /* minimum height */
}
div.column {
border:1px solid blue; /*just to show the size*/
display: inline-block; /* in my case I want to avoid wrapping */
width: 180px;
vertical-align:top;
}
div.item-contains-long-image {
display: inline-block;
height: 25px;
/* overflow: visible; no needed, default property*/
position: relative;
}
<div class="container">
<div class="column">
<div class="item-contains-long-image">
<img src="http://via.placeholder.com/180x270">
</div>
</div>
<div class="column">
<div class="item-contains-long-image">
<img src="http://via.placeholder.com/180x310">
</div>
</div>
<div class="column">
<div class="item-contains-long-image">
<img src="http://via.placeholder.com/180x110">
</div>
</div>
</div>
Hope this helps
I have a div #1 with a variable width and variable height. Now I want to position a div #2 with fixed width and height next to the right site of #1.
These two divs should be inside another div with width: 100%, because I want to repeat those two divs.
Here is an image (white: div #1, black: div #2):
How would I do that?
I played around with floating
Using a flexbox for the rows. I put the width for the white box as inline CSS because I assume it will be calculated somehow in your code.
.container {
background: lightgreen;
padding: 3em;
}
.row {
display: flex;
height: 4em;
}
.row:not(:last-child) {
margin-bottom: 1em;
}
.flexible {
background: white;
}
.fixed {
background: black;
width: 1em;
}
<div class="container">
<div class="row">
<div class="flexible" style="width:150px"></div>
<div class="fixed"></div>
</div>
<div class="row">
<div class="flexible" style="width:500px"></div>
<div class="fixed"></div>
</div>
<div class="row">
<div class="flexible" style="width:50px"></div>
<div class="fixed"></div>
</div>
</div>
Use flex.
.container {
display: flex;
}
.secondDiv {
width: 200px;
}
You can use this example:
.container{
width: 100%;
}
.div1{
width: <div1 width>;
height: <div1 height>;
float: left;
background-color: white;
}
.div2{
float: left;
width: <div2 width>;
height: <div1 height>;
background-color: black;
}
You should group this two divs (div1 and div2) in another div, inside de container with 100% width:
<div id="container" class="container">
<div id="block1" style="float: left; width: 100%">
<div id="div1" class="div1">
</div>
<div id="div2" class="div2">
</div>
</div>
...
</div>
I have a div inside a parent div. The parent div has display set to table-cell and does not have a fixed size.
I need the child div to stretch throughout the parent div, but I need the parent div to retain its size and not stretch itself.
This is my code (with inline CSS for simplicity):
<div style="display:table;">
<div style="display:table-cell;"></div>
<div style="display:table-cell; width: 600px;">Content</div>
<div id="parent" style="display:table-cell;">
<div id="child"></div> <!-- I need to stretch this across the entire parent -->
</div>
</div>
This is basically what I'm trying to achieve:
In other words: three divs in a line, the middle having a fixed size, the other ones stretching to the ends of the browser window. I need to be able to add content to the right div while making sure the right div doesn't resize as I add content into it.
Flexbox can do that.
.parent {
display: flex;
height: 200px;
}
.child {
flex: 1;
background: lightgrey;
}
.child.fixed {
flex: 0 0 600px;
background: blue;
}
<div class="parent">
<div class="child"></div>
<div class="child fixed"></div>
<div class="child"></div>
</div>
Or if you must use CSS Tables - Codepen Demo
.parent {
display: table;
height: 200px;
width: 100%;
table-layout: fixed;
}
.child {
display: table-cell;
background: lightgrey;
}
.child.fixed {
width: 600px;
background: blue;
}
<div class="parent">
<div class="child"></div>
<div class="child fixed"></div>
<div class="child"></div>
</div>
HTML:
<div class="browser-window">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
CSS:
.browser-window {
width: 100%;
height: 100px;
background-color: black;
display: table;
}
.left, .middle, .right {
display: table-cell;
height: 100%;
}
.middle {
width: 60px;
background-color: green;
}
https://jsfiddle.net/6gzegpzx/
I'm trying to recreate: http://jsfiddle.net/MGRdP/6/
html, body{
height:100%;
}
.table {
width: 100%;
display: table;
height:100%;
}
.cell {
border: 2px solid black;
vertical-align: middle;
display: table-cell;
height:100%;
}
<div class="table">
<div class="cell">
<p>Text</p>
</div>
</div>
<div class="table">
<div class="cell">
<p>Text</p>
</div>
</div>
using Neat but my divs are not expanding to 100% of the viewport height. Using inspector, I cannot find any discrepancies. Obviously something is off here.
Can someone provide correct markup for neat that allows me to achieve the as the fiddle?
If you want two divs side by side (like the Fiddle), just make each one width:50% and float:left
html, body{
height:100%;
}
.table {
width: 50%;
display: table;
height:100%;
float:left;
}
.cell {
border: 2px solid black;
vertical-align: middle;
display: table-cell;
height:100%;
}
<div class="table">
<div class="cell">
<p>Text</p>
</div>
</div>
<div class="table">
<div class="cell">
<p>Text</p>
</div>
</div>
.table {
width: 50%;
display: table;
height:100%;
float:left;
}
this css make two div to stay side by side.
You can also use
display:inline-block;
vertical-align:top;
width:49%;
to make side by side layout;
To center content use margin:0 auto for child
and two make height as view port use-
height:100vh
jsfiddle link
I have a table made of divs like this:
<div class="table">
<div class="tRow A">
<div class="tCell">
Test
</div>
</div>
<div class="tRow B">
<div class="tCell">
<!-- content here -->
</div>
</div>
<div class="tRow C">
<div class="tCell">
Test
</div>
</div>
</div>
with the following css:
body, html{
height: 100%;
}
.table{
display: table;
height: 100%;
max-height: 100%;
width: 200px;
table-layout: fixed;
}
.tRow{
display: table-row;
}
.tCell{
display: table-cell;
}
.B {
background: yellow;
}
.B .tCell{
overflow: hidden;
}
.C{
height: 50px;
background: green;
}
http://jsfiddle.net/HtA43/
Now what i need (and i am not able to get this working) is, that the table is rendered 100% height. rowA getting as high as its contents rowC with a fixed height at the bottom. And rowB should fill the rest of the space.
This works so far, but when the content of rowB exceeds its size, the cell and thus the table grows. What i need is that rowB does not grow but the overflow is hidden.
Any suggestions?
On your requisits you have overflow:hidden that makes the layout more easy to acomplish. You can have an structure like this:
<div class="container">
<div class="A">
Test
</div>
<div class="B">
Test....
</div>
<div class="C">
Test
</div>
</div>
And then just a few styles:
.container{
height: 100%;
width: 200px;
position:relative;
overflow:hidden;
}
.B {
min-height:100%;
}
.C{
position:absolute;
bottom:0;
width:100%;
height: 50px;
}
Check this Demo Fiddle