<div class="view">
<img src="http://media-cache-ec2.pinterest.com/550x/cf/4f/36/cf4f36b3f25df6f6af27ca54012dedf1.jpg">
<div class="details">
Lorem....</div>
</div>
html, body {
height: 100%;
}
.view {
width: 500px;
}
img, .details {
width: 50%;
}
img {
float: left;
}
.details {
padding: 10px;
box-sizing: border-box;
overflow: hidden;
background: pink;
height: 100%;
}
Is there a way to make .details adjust to the height of img? Right now height: 100% does not seem to do the trick.
http://codepen.io/anon/pen/GbfJE
Simple workaround:
.view {
background:pink;
overflow:hidden;
}
You would have to use javascript (most easily jQuery), which would be quite easy...
Check out this solution:
http://codepen.io/anon/pen/sKtIb
Notice I have included the jQuery Javascript library
Related
I'm trying to go with the css-only approach to this issue and not to use margin-left to move the <div class="fd"></div> from <div class="sb"></div>
I've ran out of the idea-fuel what to try. I've nested some wrappers and used different kinds of positionings (this is not a typo nor French, spell-checker excuse me) but nothing has worked out so far.
Issue: Making a fixed div as solid element, to accept the .fd element on it's right side.
.fd holds content which is going to exceed the height of the page.
.sb holds side-content which is going to remain as 100% in height.
See snippet for a clear example what I've been struggling with.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.sb {
height: 100%;
width: 300px;
background: blue;
position: fixed;
opacity: 0.5;
}
.fd {
min-height: 100%;
background-color: red;
display: inline; /* Won't apply to fixed? block will overlap everything */
}
<div class="sb"></div>
<div class="fd">
<p>Am I out in the open?</p>
</div>
Added an extra .wrap.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrap{
padding-left: 300px;
}
.sb {
height: 100%;
width: 300px;
background: blue;
margin-left: -300px;
position: fixed;
opacity: 0.5;
}
.fd {
min-height: 100%;
background-color: red;
display: inline; /* Won't apply to fixed? block will overlap everything */
}
<div class="wrap" id="wrap">
<div class="sb"></div>
<div class="fd">
<p>Am I out in the open?</p>
</div>
</div>
https://jsfiddle.net/afelixj/tb3pbam9/
I have some really simple html/css that uses 100vh on a body tag, and 100% (or 100vh, I've tried both) on two inline block span's, each span of which has a width of 50vw. I expect to see both spans side by side, each taking up half the screen, and each as tall as the screen - no scrollbars, no white space. Body also has a margin of 0 to help with this. What I see is what I expected except that there is a small vertical scroll bar. I also removed all whitespace from inside the body, as I know this can add space beyond the 100% width. But I can't figure out why I get the scrollbar... I know I can just add an overflow: hidden to body and the scrollbar goes away, but again - why the scrollbar in the first place?
Here is the html file:
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
<style>
body {
height: 100vh;
margin: 0;
}
span {
height: 100%;
width: 50%;
display: inline-block;
}
#left {
background-color: red;
}
#right {
background-color: green;
}
</style>
</head>
<body><span id="left"></span><span id="right"></span></body>
</html>
Unfortunately that's the nature of inline elements. You need to add vertical-align:top to force no line height and other font related spacing.
body {
height: 100vh;
margin: 0;
}
span {
height: 100%;
width: 50%;
display: inline-block;
vertical-align: top;
}
#left {
background-color: red;
}
#right {
background-color: green;
}
<span id="left"></span><span id="right"></span>
That's because of the inline element white space margin.
Here I used the margin-bottom: -4px; hack (and there is many more) to remove it. Do note though, when using this hack you need to check it against the current font size and adjust it accordingly.
If you really need inline-block, use the vertical-align hack
A better way is to either use flex or float (to support older browsers).
Here is margin-bottom: -4px;
body {
height: 100vh;
margin: 0;
}
span {
height: 100%;
width: 50%;
display: inline-block;
margin-bottom: -4px;
}
#left {
background-color: red;
}
#right {
background-color: green;
}
<span id="left"></span><span id="right"></span>
Here is flex
body {
height: 100vh;
margin: 0;
display: flex;
}
span {
height: 100%;
width: 50%;
}
#left {
background-color: red;
}
#right {
background-color: green;
}
<span id="left"></span><span id="right"></span>
Here is float
body {
height: 100vh;
margin: 0;
}
span {
height: 100%;
width: 50%;
float: left;
}
#left {
background-color: red;
}
#right {
background-color: green;
}
<span id="left"></span><span id="right"></span>
You can avoid the white space under the span elements by adding vertical-align: middle; to them: I learned that today and it's very simple 🙂
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
<style>
html {
height: 100vh;
}
body {
height: 100vh;
margin: 0;
padding: 0;
}
span {
height: 100%;
width: 50%;
display: inline-block;
vertical-align: middle; /* here */
}
#left {
background-color: red;
}
#right {
background-color: green;
}
</style>
</head>
<body><span id="left"></span><span id="right"></span>
</body>
</html>
Add this style for "body".
body
{
box-sizing: border-box;
}
I didn't have to make any other changes to the original CSS.
https://www.w3schools.com/css/css_rwd_grid.asp
Working on a fullpage ("locked") design.
Here's what I'm working with:
http://jsfiddle.net/5yex5nfu/
<div id="wrapper">
<div id="navigation">
Nav
</div>
<div id="main">
Main
</div>
<div id="footer">
Footer
</div>
</div>
body {
height: 100%;
width: 100%;
margin: 0px;
}
#wrapper {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:50px;
margin-bottom:50px;
margin-right:50px;
margin-left:50px;
background-color: lightblue;
}
#navigation, #footer {
width: 100%;
height: 70px;
background: pink;
}
#main {
height: auto;
background: lightgreen;
}
I want the main div to fill out the rest of the "locked" div, with a %-value; whilst the footer and navigation hade assigned px-values.
Have seen a few solutions for my problem, but none of them seems to work. Have tried to set a %-value for every div, and it works, but as expected: The whole thing scales and messes up the layout.
For a pure css solution you can use calc to calculate the height of main
Example http://jsfiddle.net/5yex5nfu/2/
Just change #main height from auto to this
#main {
height: calc(100% - 140px);
}
Read more about calc and a-couple-of-use-cases-for-calc
You can use just css, with display:table propriety!
http://jsfiddle.net/Monteduro/5yex5nfu/5/
#wrapper {
position: absolute;
top: 0;
left: 0;
background-color: lightblue;
display: table;
height: 100%;
width: 100%;
box-sizing: border-box;
padding:50px;
}
#navigation, #footer {
width: 100%;
height: 70px;
background: pink;
display:table-row;
}
#main {
height: auto;
background: lightgreen;
display:table-row;
}
How can I fully stretch two <div>s to be 50% wide? Prepared jsFiddle.
HTML
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
CSS
div.container {
width: 100%;
}
div.left, div.right {
display:inline;
width:50%;
}
div.container {
width: 100%;
white-space: nowrap;
}
div.left, div.right {
display: inline-block;
width: 50%;
}
Updated jsfiddle
Or:
div.container {
width: 100%;
}
div.left, div.right {
float: left;
width: 50%;
}
Updated jsfiddle
One approach: Use inline-block and box-sizing: border-box (the latter if you have borders)
Demo
CSS:
div {
box-sizing: border-box;
}
div.container{
width: 100%;
position: relative;
border: 1px solid blue;
}
div.left, div.right {
display:inline-block;
width:50%;
border: 1px solid black;
}
HTML:
<div class="container">
<div class="left">left</div><div class="right">right</div>
</div>
Note: the lack of space between the two divs in purposeful. A space between two inline elements is meaningful.
There is multiple ways of doing that. You could apply css like this.
div.left, div.right {
position: relative;
float:left;
width:50%;
}
http://jsfiddle.net/cdydq/14/
Here is another method that may render the required reults.
div.container {
position: relative;
width: 100%;
}
div.left {
position: relative;
width:50%;
}
div.right {
position: absolute;
margin-left:50%;
width:50%;
top:0
}
http://jsfiddle.net/cdydq/18/
My HTML has 2 divs inside an outer div:
<div class="outer">
<div class="col-left">
<p>Lorem Ipsum is simply dummy text of the...
</div>
<div class="col-right">Right</div>
<div class="clear"></div>
</div>
The CSS is:
.outer {
border: 1px solid black;
}
.col-left {
float: left;
background: cyan;
width: 80%
height: 100%;
}
.col-right {
float: left;
width: 15%;
background: yellow;
height: 100%;
}
.clear {
clear: both;
}
The height: 100% takes effect only if I set a px height on the .outer class, however, I have a situation in which the height should not be fixed.
How can I use height 100% without specifying in its parent a fixed height?
I'm going to use what Layne wrote in the comments.
This CAN be done, but it's tricky. You need to let html and body know their height before you can tell things inside of them to be 100 height etc. --- So, if html doesn't have a height, than how will body know what to be 100% of? and on down the line. It's a slippery slope that I slide down every other day.
html, body {
height: 100%;
}
.outer {
border: 1px solid black;
/* I use this instead of the micro clear-fix in this case - look that up */
overflow: hidden;
height: 100%;
}
.col-left {
float: left;
background: cyan;
width: 80%;
min-height: 100%;
}
.col-right {
float: left;
width: 20%;
background: yellow;
height: 100%;
}
http://jsfiddle.net/sheriffderek/fdxGZ/
This is also an issue with "sticky" footers and stuff:
Always a battle http://codepen.io/sheriffderek/pen/ziGbE
I hope that helps!
if you tell the tag's parent tags (including html and body tags) to also be 100% height that should fix your issue. I added max-height as an option, I did not know if you wanted the container to run the length of the whole screen.
http://jsfiddle.net/brandonbabb/SL3FC/
html, body {
height:100%
}
.outer {
border: 1px solid black;
height: 100%;
max-height: 500px
}
.col-left {
float: left;
background: cyan;
width: 80%;
height: 100%;
}
.col-right {
float: left;
width: 15%;
background: yellow;
height: 100%;
}
.clear {
clear: both;
}
use jquery
$(document).ready(function(){
var outerheight = $('.outer').height();
$('.col-right').height(outerheight);
});