I have two div elements inside a Parent div element with class names .variableHT, .remaining. Here is the html
<div class="parent">
<div class="variableHT">1234</div>
<div class="remaining"></div>
</div>
and here is CSS
.parent{
height:300px;
}
.variableHT{
height:auto;
background-color:green;
}
.remaining{
margin-top:auto;
margin-bottom:0px;
background-color:yellow;
}
I am trying to make two DIVs, first one is auto height element, height is not fixed, it will grow as per the content size. Then next DIV should occupy whatever the space is remaining.
Tried adding margin values but did not workout.
Please help me on this. Here is the fiddle http://jsfiddle.net/GyULa/1/
How about this one:
.parent{
display: table;
height: 300px;
width: 100%;
}
.variableHT{
height: auto;
display: table-row;
background-color: green;
}
.remaining{
height: 100%;
display: table-cell;
background-color: yellow;
}
Here is fiddle link for it
With overflow:hidden on .parent and a height specification on .remaining it works:
.parent{
height:300px;
overflow: hidden;
}
.variableHT{
height:auto;
background-color:green;
}
.remaining{
margin-top:auto;
margin-bottom:0px;
background-color:yellow;
height: 300px;
}
First dirty fix...with "overflow:hidden" ;) But interesting question! Is there a more elegant way?
.parent{
height:300px;
overflow: hidden;
}
.variableHT{
height:auto;
background-color:green;
}
.remaining{
margin-top:auto;
margin-bottom:0px;
background-color:yellow;
height: 100%;
}
Try adding height: 100% to the variableHT:
Demo
.parent{
height:300px;
overflow:hidden;
}
.variableHT{
height:auto;
background-color:green;
}
.remaining{
height: 100%
background-color:yellow;
}
Related
I have to make a div follow an image and sit on its center vertically and horizontally when responsive. I simply have no idea or don't think whether it is possible only by css. Any help is appreciated
.imageWrapper {
height:200px;
width:200px;
position:relative;
margin:50px auto 0px auto;
}
.imageWrapper > div:first-child {
position:absolute;
z-index:1;
top:0px;
left:0px;
right:0px;
bottom:0px;
overflow:hidden;
}
.imageWrapper > div:first-child img{
height:200px;
width:100%;
object-fit:cover;
position:relative
}
.imageWrapper > div:last-child {
position:relative;
z-index:2;
text-align:center;
line-height:200px;
height:200px;
width:100%;
}
<div class="imageWrapper">
<div><img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/Billede_084.jpg"></div>
<div><p>bla bla</p></div>
</div>
make a wrapping div, make the image absolute as a background and place the text in front of the image.
Well you can make good use of an old trick to center element using position property.
as usual an example is better than an explanation.
.html
<div class="parent">
<div class="child"></div>
</div>
.css
.parent {
position: relative;
width: 100%;
height: 200px;
background-color: lightblue;
}
.parent .child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
background-color: grey;
}
I have this template in my mind
And i dont know how i can implement second "stretchy div". It must fill with his height all remaining space on the screen (not bigger, because I don`t want to see y-scroll). Is it possible?
viewport units and calc make this simpler.
* {
margin: 0;
padding: 0;
}
.one {
height: 50px; /* demo height */
background: red;
}
.two {
height: calc(100vh - 50px);
background: blue;
}
<div class="one"></div>
<div class="two"></div>
EDIT: Flexbox version
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
flex-direction: column;
}
.one {
height: 50px;
background: red;
}
.two {
background: blue;
flex-grow: 1;
}
<div class="one"></div>
<div class="two"></div>
Check out this fiddle. Hope it helps!
HTML -
<div id="wrapper">
<div id="first"></div>
<div id="second"></div>
</div>
CSS -
html, body {
width:100%;
height:100%;
margin:0;
}
#wrapper {
width:300px;
height:100%;
position:relative;
}
#first {
width:300px;
height:200px;
background-color:#F5DEB3;
}
#second {
position:absolute;
top:200px;
bottom:0;
left:0;
width:300px;
background-color:#9ACD32;
}
use resize event of javascript window object.Listen for this event then we have to update our visual elements(div..etc) manually.
You say you want a "stretchy" second div, which my example shows.
.firstDiv {
height: 400px;
}
.secondDiv {
height: 100%;
}
The second div must have content in it or it will not be seen, however the height of it will be determinant on what is inside the div, so it will stretch as you need.
.div1{
height:400px;
z-index:1;
}
.div2{
height:100%;
position:relative;
top:-400px;
z-index:-1;
}
I'm having an issue using display: table and display: table-cell.
Fiddley: http://jsfiddle.net/5q51sbqb/1/
I have a div with a display:table; and within that two divs with display:table-cell;
The left div (.t1) is a fixed width and the right div(.t2) should take up the rest of the space to the edge of the container.
My issues lies with adding a long div (2000px) to the right div(.t2). I basically need the content-window to stay the same width as its parent without pushing out further than the confines of the container, as to allow the content within to be scrolled.
Keep in mind this needs to be without using a fixed width, as the container and t2 are both responsive. And I also have to use table and table-cell display properties :(
So basically the children of the .t2 div are flowing beyond the container when I need them to fit within the container width ( without setting a fixed width on the content-window ... and on the .t2 div)
I'm stumped.
HTML
</div>
</div>
<div class="table-cell t2">
<div id="content-window">
<div id="content"></div>
</div>
</div>
</div>
</div>
CSS
#container{
width: 600px;
height: 600px;
margin: 0px auto;
background-color:green;
padding: 2px;
}
#table{
display:table;
width:100%;
}
.table-cell{
display:table-cell;
height: 300px;
padding:2px;
}
.t1{
width: 100px;
background-color: red;
}
.t2{
width:auto;
background-color: blue;
}
#content-window{
width:100%;
overflow:scroll;
}
#content{
width: 2000px;
height: 50px;
background-color:yellow;
}
Since you smartly created a #content-window, set it to be a position: absolute; so it won't mess up the cell's auto width. Just remember to set the .t2 to be a position: relative, so the #content-window might fill it in width and height, using the contained space of the right table cell.
tip: Use overflow-x if you want it to scroll only horizontally.
#container{
width: 600px;
height: 600px;
margin: 0px auto;
background-color:green;
padding: 2px;
}
#table {
display:table;
width:100%;
}
.table-cell{
display:table-cell;
height: 300px;
padding:2px;
}
.t1 {
width: 100px;
background-color: red;
}
.t2 {
position: relative;
background-color: blue;
}
#content-window{
position: absolute;
width:100%;
height: 100%;
overflow: hidden;
overflow-x: scroll;
height:50px;
}
#content{
width: 2000px;
height: 50px;
background-color:yellow;
}
Check it here: http://jsfiddle.net/5q51sbqb/4/
I have a div, inside that div I have two smaller ones, one of them is to the left, and the other one is to the right, but the width of the parent div does not increase, how can I make it so it does?
I want the red div to get an increased height when the div's inside get bigger.
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
<div class="footer">
</div>
</div>
.wrap{
margin:auto;
width:960px;
min-height:50px;
background:red;
}
.left{
width:450px;
height:100px;
background:blue;
float:left;
}
.right{
width:450px;
height:100px;
background:green;
float:right;
}
.footer{
width:100%;
height:100px;
background:#000;
}
Fiddle.
Add the following rule to the .wrap class overflow: auto;
FIDDLE
.wrap{
margin:auto;
width:960px;
min-height:50px;
background:red;
overflow: auto; /* <-- here */
}
You can add after your second div:
<div style="clear: both;"></div>
or read about clearfix
Here is the updated fiddle link with updated css. You just need to add overflow:hidden, and height:100%; in .wrap class.
.wrap {
margin:auto;
width:960px;
min-height:50px;
background:red;
overflow: hidden;
height: 100%;
}
.wrap:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
I always use the CSS clearfix from this site. It's the most proper way to solve this problem. just set the class attribute of the .wrapper to "wrapper clearfix"
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
Set the height of the parent div to inherit. The height of the .wrap div will now expand based on the content inside:
.wrap
{
margin:auto;
width:960px;
height:inherit;
background-color:red;
}
Now when u increase the height of the left or right div, the main div height will also increase.
.wrap {
margin: auto;
width: 960px;
min-height: 50px;
background: red;
overflow: hidden;
height: 100%;
}
I need to do with html and css such layout:
left width is static for 250px
right is fluid, for other rest of screen (100%-250px)
I try so(i'm using sass):
.wrapper{
width:100%;
margin: 0 auto;
.left{
width:250px;
float:left;
}
.right{
float:right;
width:100%;
margin-left: 250px;
}
}
So how can i solve this problem?
This is pretty simple to do: http://jsfiddle.net/joplomacedo/ExHzk/
If you can't see the fiddle, here's the html and css.
HTML:
<div class="fixed"></div>
<div class="fluid"></div>
CSS:
.fixed {
float: left;
width: 250px;
}
.fluid {
margin-left: 250px;
}
Aside
I left out the wrapper. It's not really relevant for the demonstration. One question though: If you're giving the wrapper a width of 100%, what's the margin: 0 auto for? And do you really need to specify the width?
Try this code if I have understand well:
.wrapper{
width:100%;
margin: 0 auto;
.left{
width:250px;
float:left;
}
.right{
float:right;
width:100%;
margin-right: 250px;
}
}
You could just remove the float:right on the .right like:
right{
width:100%;
margin-left: 250px;
}
http://jsfiddle.net/RfHqX/
Notice that I didn't use SASS-style.
use margin not float for right div
.wrapper{
width:100%;
margin: 0 auto;
}
.left{
width:250px;
height:100%;
float:left;
background:#f00;
}
.right{
height:100%;
margin-left: 250px;
background:#0f0;
}
DEMO