I want to have a div in the background (100% width of browser) by mouseover on a content-div. Everything works great but i dont know is there a solution to make the background div as height as the parent?
Without using Jquery? Pure CSS would be great!
Thanks!
.content {
/* position: relative; >> will make the absoluted positioned div 100%width of the browser*/
z-index: 1;
}
.background {
position: absolute;
background: aqua;
width: 100%;
right: 0px;
left: 0px;
z-index: -1;
display: none;
}
.post:hover .background {
display: block;
height: 10%;
/* WHAT TO DO? */
}
<div class="post">
<div class="content">
<div class="background"></div>
…content…
</div>
</div>
part of the problem is: the "post" div is in a centerd "main" div with a given width and i want to have a background-div that has 100% width of the viewport
Sorry, it is a bit hard to explain what i need, therefore I make a small sketch here:
This is posible with vw units, look:
* {
margin: 0;
padding: 0;
}
.main {
background: #29D;
margin: 0 auto;
max-width: 800px;
}
.post {
background: #E31;
margin: 3vw 3vw 3vw 12vw;
}
.content {
background: #8D5;
margin: 2vw;
}
.content img {
width: 100vw;
margin-left: -14vw;
display: block;
}
#media(min-width: 800px) {
.content img {
margin-left: calc(800px / 2 - 50vw - 14vw);
}
}
<div class="main">
.main
<div class="post">
.post
<div class="content">
.content
<img src="http://s3.postimg.org/3k8v5p0v7/dragon.jpg">
</div>
<div class="content">
.content
</div>
<div class="content">
.content
</div>
</div>
</div>
First thing you need to know is the max width of your wrapper. In my case it is 800px. You have to substitute all the 800's with your size. Then notice that all your left margins should be in vw units or pixels but not 100%. The trick here is that calc() function and the media query!
Related
Simple scenario - I would have thought.
The idea is that app-bar is a fixed height - set at 56px. The content DIV beneath should fill the remaining space - the height of the container is around 320px, which is set using a percentage of the parent.
If I use height:100%, the flexbox doesn't kick in, however, if I use height:320px it does.
Any ideas? The height needs to be a percentage, as it's filling the responsive parent.
<header class="img-app-bar">
<div class="container">
<div class="app-bar"></div>
<div class="content"></div>
</div>
</header>
.img-app-bar {
.container {
display:flex;
flex-direction:column;
background-color:Red;
height:100%;
.app-bar {
flex:0;
}
.content {
flex:1;
background-color:Yellow;
}
}
}
If the parent element doesn't have a height css style, percentage height for the child it isn't going to work (unless you use the absolute positioning hack) - that's just the way css works
A work around for your situation is to do the following (the aforementioned absolute position hack):
.img-app-bar {
position: relative;
/* the following is just for giving height without using height */
padding-top: 300px;
background: red;
}
.container {
/*this seems to set a height without setting a height*/
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.flex {
display: flex;
flex-direction: column;
height: 100%;
}
.app-bar {
height: 56px;
background: green;
}
.content {
flex:1;
background: blue;
}
<header class="img-app-bar">
<div class="container">
<div class="flex">
<div class="app-bar"></div>
<div class="content"></div>
</div>
</div>
</header>
The problem is that .img-app-bar needs a height, too. Otherwise your .container takes 100% height of 0.
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.img-app-bar {
width: 100%;
height: 100%;
}
.container {
display:flex;
flex-direction:column;
background-color:Red;
height:100%;
}
.app-bar {
height: 56px;
}
.content {
flex:1;
background-color:Yellow;
}
<header class="img-app-bar">
<div class="container">
<div class="app-bar"></div>
<div class="content"></div>
</div>
</header>
Sorry if the title is confusing. Basically, I'm working on a tumblr theme where I need three adjacent divs wrapped in a fixed-width container. None of their contents are fixed, so they all have variable widths. The middle div should always be centered to the container, while the divs to the left and right will always be "touching" the middle div, and, thus, move around as the middle div's width changes (the left and right s may be images, so text-align doesn't always work). Plus, I may also need to hide the left, right, or both the left and right divs.
Here's a conceptual image:
I can obtain this using flexboxes easily (JFiddle), but flex only has 86% global support.
This is the closest I could get without using flexboxes, but I can't get that middle div (with the text) centered to the title div, while preserving the relative positions of the two images on either side: JFiddle
* {
height: 100%;
position: relative;
}
body {
height: 200px;
}
/* just to get rid of scrollbar */
p {
margin: 0;
}
.title {
background: #aaa;
height: 22px;
width: 450px;
/* for example */
margin: 0 auto;
}
.container {
background: #abc;
float: left;
}
.lr {
transform: translate(0, -100%);
}
.left {
background: green;
float: left;
}
.left img {
transform: translate(-100%);
}
.center {
background: red;
display: inline-block;
z-index: 2;
}
.right {
background: blue;
float: right;
}
.right img {
transform: translate(100%);
}
.left img, .right img {
height: 100%;
}
<div class="title">
<div class="container">
<div class="center">CENTERCENTERCENTERCEN</div>
<div class="lr">
<div class="left">
<img src="http://i.imgur.com/7bvErJN.jpg" />
</div>
<div class="right">
<img src="http://i.imgur.com/q8Mq0YZ.jpg" />
</div>
</div>
</div>
</div>
Other people have mentioned trying to display the title as a table, but that would require centering the middle cell to the whole row, and having the cells to the left and right take up the rest of the space, and I'm not sure if you can do that when their widths aren't fixed.
Anyone know of any other solutions?
If you can change your HTML then apply this:
First move the left and right elements inside center:
<div class="center">
CENTERCENTERCENTERCEN
<div class="left">
testtest<img src="http://i.imgur.com/7bvErJN.jpg" />
</div>
<div class="right">
<img src="http://i.imgur.com/q8Mq0YZ.jpg" />
</div>
</div>
Then on the CSS :
/*Keep the center container on the middle*/
.title {
text-align:center;
}
.center {
position:relative;
display:inline-block;
}
/*Position elements based on the relative center parent*/
.left {
position:absolute;
top:0;left:0;
transform:translateX(-100%)
}
.right {
position:absolute;
top:0;right:0;
transform:translateX(100%)
}
Check this DemoFiddle
Using position: absolute should help in this.
I changed your HTML to following:
<div class="title">
<div class="container">
<img class="left" src="http://i.imgur.com/7bvErJN.jpg" />
<div class="center">CENTERCENTERCENTERCEN</div>
<img class="right" src="http://i.imgur.com/q8Mq0YZ.jpg" />
</div>
</div>
CSS
.title {
background: #aaa;
height: 22px;
width: 450px;
/* for example */
margin: 0 auto;
text-align: center;
}
.container {
background: #abc;
display: inline-block;
margin: 0 auto;
position: relative;
text-align: left;
}
.center {
background: red;
}
.left, .right {
position: absolute;
top: 0px;
}
.left {
right: 100%;
}
.right {
left: 100%;
}
Working Fiddle
Updated to show OP Update
No need for flex here, why not just use percentages? Float all the containers and put the percentages as relative to the sizes you want. (50% for the middle, 25% for the outside containers).
You can use the outside containers as wrappers so you can still use a border on the inner containers without messing up the sizing. Then just float the inner containers within the outside containers (if that makes sense). The example below just floats the inner p tags to the outer containers.
This makes it always hug the inner container, while keeping relative sizes and also keeping the middle centered.
Example below:
Fiddle
HTML
<div class="container">
<div class="flexa">
<div class="left">
<p>leftleft</p>
</div>
<div class="center"><p>CENTERCENTdsfdfdERCENTsdfdfsfERCEN</p></div>
<div class="right">
<p>ri</p>
</div>
</div>
<div class="bottom">BOTTOMOMOM</div>
</div>
CSS
* {
margin: 0;
padding: 0;
}
div {
background: #aaaaaa;
overflow: hidden;
}
p{
border: 1px solid black;
}
.container {
width: 500px;
/* for example */
margin: 0 auto;
}
.right p{ /* This is what makes it work. This could be a div with class of inner or something like that. */
float:left;
}
.left p{
float:right;
}
.flexa div{
float:left;
}
.left {
width:25%;
}
.center {
width: 50%;
}
.right {
width:25%;
}
.bottom {
display: block;
margin: 0 auto;
text-align: center;
}
I've two floated DIVs (two columns) which are nested in an "clear-float"-DIV, which itself is nested in an centered DIV ("wrapper" DIV).
<div id="content">
<div class="block2">
<div id="slot_left">
CONTENT-LEFT
</div>
<div id="slot_right">
*CONTENT-RIGHT*
</div>
</div>
</div>
The right column has min-width and max-width CSS option set. But the wrapper DIV, which has min-width and max-width also, is always expanded to max width.
#content {
min-width: 300px;
min-height: 80px;
max-width: 350px;
margin: 0 auto;
background: #c00;
}
.block {
overflow: hidden;
_overflow: visible;
_overflow-x: hidden;
_height: 0;
}
#slot_left {
width: 200px;
background: #ff0;
float: left;
position: relative;
}
#slot_right {
float: left;
background: #cc0;
min-width: 100px;
max-width: 150px;
position: relative;
}
What's the reason for that? I want the wrapper DIV to has minimum width required but to be centered on screen.
Here is an fiddle.
use display:inline-block
why this is happening?? div is by default block level element, so when you have given max-width, it will always obey it to occupy max area possible....
http://jsfiddle.net/sHB7g/3/
CSS
#content {
min-width: 300px;
min-height: 80px;
max-width: 350px;
margin: 0 auto;
background: #c00;
display:inline-block
}
.block {
display:inline-block;
overflow: hidden;
border:1px solid #000;
}
http://jsfiddle.net/sHB7g/1/
#content {
display: inline-block;
}
and then added a content wrapper
#contentwrapper {
text-align: center;
}
the html then is like this
<div id="contentwrapper">
<div id="content">
<div class="block">
<div id="slot_left">
CONTENT-LEFT
</div>
<div id="slot_right">
*CONTENT-RIGHT*
</div>
</div>
</div>
Let's say I have two columns in a row.
One contains an image using class="img-responsive" for fluid image and the other column next to has a custom div block.
My question is how to get this custom div's height 100%. Below didn't work for me.
height: auto;
max-width: 100%;
If I set fixed value in height, it won't play nicely with the
column containing image as the image resizes height when the viewport size changes.
I can get the columns heights equal by doing something like the following as suggested by previous questions.
class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.row {
overflow: hidden;
}
But my case is slightly different that I need to use custom div inside the column that
sets equal height with the image height, not the parent divs (columns).
Here is JS Fiddle
I was just looking for a smiliar issue and I found this:
.div{
height : 100vh;
}
more info
vw: 1/100th viewport width
vh: 1/100th viewport height
vmin: 1/100th of the smallest side
vmax: 1/100th of the largest side
The original question is about Bootstrap 3 and that supports IE8 and 9 so Flexbox would be the best option but it's not part of my answer due the lack of support, see http://caniuse.com/#feat=flexbox and toggle the IE box. Pretty bad, eh?
2 ways:
1. Display-table:
You can muck around with turning the row into a display:table and the col- into display:table-cell. It works buuuut the limitations of tables are there, among those limitations are the push and pull and offsets won't work. Plus, I don't know where you're using this -- at what breakpoint. You should make the image full width and wrap it inside another container to put the padding on there. Also, you need to figure out the design on mobile, this is for 768px and up. When I use this, I redeclare the sizes and sometimes I stick importants on them because tables take on the width of the content inside them so having the widths declared again helps this. You will need to play around. I also use a script but you have to change the less files to use it or it won't work responsively.
DEMO: http://jsbin.com/EtUBujI/2
.row.table-row > [class*="col-"].custom {
background-color: lightgrey;
text-align: center;
}
#media (min-width: 768px) {
img.img-fluid {width:100%;}
.row.table-row {display:table;width:100%;margin:0 auto;}
.row.table-row > [class*="col-"] {
float:none;
float:none;
display:table-cell;
vertical-align:top;
}
.row.table-row > .col-sm-11 {
width: 91.66666666666666%;
}
.row.table-row > .col-sm-10 {
width: 83.33333333333334%;
}
.row.table-row > .col-sm-9 {
width: 75%;
}
.row.table-row > .col-sm-8 {
width: 66.66666666666666%;
}
.row.table-row > .col-sm-7 {
width: 58.333333333333336%;
}
.row.table-row > .col-sm-6 {
width: 50%;
}
.col-sm-5 {
width: 41.66666666666667%;
}
.col-sm-4 {
width: 33.33333333333333%;
}
.row.table-row > .col-sm-3 {
width: 25%;
}
.row.table-row > .col-sm-2 {
width: 16.666666666666664%;
}
.row.table-row > .col-sm-1 {
width: 8.333333333333332%;
}
}
HTML
<div class="container">
<div class="row table-row">
<div class="col-sm-4 custom">
100% height to make equal to ->
</div>
<div class="col-sm-8 image-col">
<img src="http://placehold.it/600x400/B7AF90/FFFFFF&text=image+1" class="img-fluid">
</div>
</div>
</div>
2. Absolute bg div
DEMO: http://jsbin.com/aVEsUmig/2/edit
DEMO with content above and below: http://jsbin.com/aVEsUmig/3
.content {
text-align: center;
padding: 10px;
background: #ccc;
}
#media (min-width:768px) {
.my-row {
position: relative;
height: 100%;
border: 1px solid red;
overflow: hidden;
}
.img-fluid {
width: 100%
}
.row.my-row > [class*="col-"] {
position: relative
}
.background {
position: absolute;
padding-top: 200%;
left: 0;
top: 0;
width: 100%;
background: #ccc;
}
.content {
position: relative;
z-index: 1;
width: 100%;
text-align: center;
padding: 10px;
}
}
HTML
<div class="container">
<div class="row my-row">
<div class="col-sm-6">
<div class="content">
This is inside a relative positioned z-index: 1 div
</div>
<div class="background"><!--empty bg-div--></div>
</div>
<div class="col-sm-6 image-col">
<img src="http://placehold.it/200x400/777777/FFFFFF&text=image+1" class="img-fluid">
</div>
</div>
</div>
You need to set the height of every parent element of the one you want the height defined.
<html style="height: 100%;">
<body style="height: 100%;">
<div style="height: 100%;">
<p>
Make this division 100% height.
</p>
</div>
</body>
</html>
Article.
JsFiddle example
My solution was to make all the parents 100% and set a specific percentage for each row:
html, body,div[class^="container"] ,.column {
height: 100%;
}
.row0 {height: 10%;}
.row1 {height: 40%;}
.row2 {height: 50%;}
I have two images of different width and height that need to be positioned bottom centered within the image box. Here is the HTML and CSS example.
<div class="box">
<div class='image'>
<img alt="" src="image.jpg"/>
</div>
</div>
.box {
max-width: 970px;
height: 440px;
}
.box img {
max-width: 100%;
position: absolute;
bottom: 8px;
margin-left: auto;
margin-right: auto;
}
This code works fine for a large image of exact width and height. But when a smaller image is placed within image box, that image is centered bottom right. How can I make both images center bottom?
Thanks for anyone's help!
Here you go... I'll try to explain as we go, but short answer, a fiddle
.box {
/* Just so I could see the parent */
background-color: #bada55;
max-width: 970px;
height: 440px;
/* Needed to make this element positional (so it will contain the absolutely positioned child */
position: relative;
/* Yep, center wasn't necessary here... */
}
.box .image { /* move this to the image wrapper */
position: absolute;
bottom: 8px;
/* Force full width */
left: 0;
right: 0;
/* Center contents (the image) */
text-align: center;
}
img {
max-width: 100%;
}
I found this semantic trick to work pretty well (without any absolute positions)
.box {
margin: 0;
text-align: center;
max-width: 970px;
height: 440px;
border:2px solid red;
}
.box .something-semantic {
display: table;
width: 100%;
height: 100%;
}
.box .something-else-semantic {
display: table-cell;
text-align: center;
vertical-align: bottom;
}
html
<div class="box">
<div class="something-semantic">
<div class="something-else-semantic">
<img src="" width="50" height="40"/>
<img src="" width="120" height="70"/>
</div>
</div>
</div>
fiddle here.