I have these two divs:
<div style="width:400px; height: 400px; background-color: red; float: left">my first div. width 400px</div>
<div style="width:600px; height: 400px; background-color: green; ">my second div. width 600px</div>
As you can see, I have floated the first one.
The problem: I expected the second to be placed on the right of the first one, but no..
Since having two paragraphs this way,
<p style="float: left">my first paragraph</p>
<p>my second paragraph</p>
the second paragraph is on the right of the first one, why it is not working in the same way for the divs?
NOTE: I know I can use other methods to put the divs next to each other. For example adding float: left to the second div, but what I really want to know is why is not working just adding float: left to the first one as with paragraphs or <li>s happens.
P tag by default have this style
clear: both;
margin-bottom: 1em;
margin-top: 0;
you should be overridden
try it
p {
width: 600px;
height: 400px;
display: block;
background-color: green;
margin: auto;
clear: inherit;
}
This is actually the standard mode for integrating images into longer text and the text "floating around" the image: The image gets a float (left or right), the text does not, the result is an image inside one or several paragraphs of text - a very useful principle:
img {
float: left;
margin: 0 10px 5px 0;
}
<img src="http://placehold.it/360x240/0af"/>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
<p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>
<p>Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
Related
I have grid based layout with two columns (aside and section) inside container (main). Every column should be scrollable separately but container should not be scrollable at all. The heights of both columns are dynamic but container has fixed height.
I've tried two approaches with overflow-y on parent container :
With overflow-y: scroll but .... When I finish scrolling inside one of child divs e.g (aside) the whole container(main) starting to scroll what is not I want.
With overflow-y: hidden but .... then content inside scrollable child divs is cut, like
here:
cut content inside child scrollable divs when parent has overflow-y to hidden
I've also tired with overscroll-behaviour property but it seems to be not working, I have no clue why.
main {
display: grid;
grid-template-columns: 336px 2fr;
overflow-y: scroll;
/*hidden cuts my content */
max-height: 400px;
}
section {
max-height: 100vh;
border: 1px solid black;
overflow-y: scroll;
--webkit-overscroll-behavior-y: none;
}
aside {
border: 1px solid blue;
display: flex;
flex-direction: column;
justify-content: flex-start;
overflow-y: scroll;
max-height: 100vh;
--webkit-overscroll-behavior-y: none;
}
div {
display: flex;
max-width: 304px;
border: 1px solid red;
background-color: lightgreen;
margin-bottom: 12px;
padding: 15px;
}
<main>
<aside>
<div>
Text 1
</div>
<div>
Text 2
</div>
<div>
Text 3
</div>
<div>
Text 4
</div>
<div>
Text 5
</div>
<div>
Text 6
</div>
<div>
Text 7
</div>
<div>
Text 8
</div>
<div>
Text 9
</div>
</aside>
<section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at lacus nisl. Aliquam sed elit vel nisi egestas fringilla non eget metus. Nam tempus vehicula massa, et pharetra orci pulvinar eu. Etiam tincidunt arcu nisl, ac porttitor felis ornare eget.
Suspendisse feugiat posuere dui, id imperdiet nisl tincidunt vel. Duis ut tempus purus. Nulla facilisis lobortis sagittis. Fusce risus augue, hendrerit id nisi sed, luctus imperdiet sem. Phasellus vestibulum scelerisque massa, tincidunt porta lectus
gravida non. Integer egestas ipsum eros. Duis a ultrices odio. Curabitur justo lectus, ultricies quis urna eget, interdum scelerisque felis. Nullam eleifend est in efficitur vulputate. Praesent sit amet vulputate nibh, at vulputate dui. Nulla facilisi.
Praesent sollicitudin mi nec sem sollicitudin, et aliquam diam rutrum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent finibus justo sem, vitae tincidunt mi consequat in. Aliquam ullamcorper ultrices
nulla, at dapibus nulla hendrerit eget. Nullam sit amet libero a magna dictum mattis. Suspendisse hendrerit suscipit augue, vel congue sapien tincidunt nec. Donec volutpat tempor felis ac sagittis. Donec in bibendum leo. Nunc cursus leo ex, in commodo
massa laoreet vitae. Phasellus eu lorem eu felis facilisis faucibus. Suspendisse pretium a ex id sodales. Proin eu enim id nisl aliquam luctus nec non tellus. Nullam fermentum dolor ac semper aliquet. Fusce accumsan vestibulum lorem eget malesuada.
In eget molestie urna, eget viverra sapien. Nullam malesuada sapien at orci hendrerit, vitae dapibus lorem pulvinar. Duis ornare odio lectus, id hendrerit magna mattis id. Duis in est non nisi placerat gravida sed ut enim. Proin pellentesque mollis
eros, sit amet mattis lectus fringilla quis. Donec eu ligula eu ex mollis suscipit. Vestibulum blandit imperdiet sodales. Maecenas malesuada magna id sem fermentum, nec pulvinar dolor mollis. Nam tempus, velit ac dignissim interdum, augue est pulvinar
urna, id molestie lectus tellus in mi. Curabitur cursus purus eget hendrerit auctor. Maecenas vel orci et urna hendrerit varius. Suspendisse potenti.
</section>
</main>
Here is snippet for this case:
https://jsfiddle.net/Lgeayx4u/3/
Is it possible do what I want with pure CSS? I would like to avoid JS.
If you don't want the outer container to scroll and also keep a fixed height to it, then definitely you will not be able to reach the complete content for the aside and section portions. The better option is to let them inherit the container's height and set overflow-y: hidden on the container:
main {
display: grid;
grid-template-columns: 336px 2fr;
overflow-y: hidden;
/*hidden cuts my content */
height: 300px;
}
section, aside{ height: 100%; }
section {
max-height: 100vh;
border: 1px solid black;
overflow-y: scroll;
--webkit-overscroll-behavior-y: none;
}
aside {
border: 1px solid blue;
display: flex;
flex-direction: column;
justify-content: flex-start;
overflow-y: scroll;
max-height: 100vh;
--webkit-overscroll-behavior-y: none;
}
div {
display: flex;
max-width: 304px;
border: 1px solid red;
background-color: lightgreen;
margin-bottom: 12px;
padding: 15px;
}
<main>
<aside>
<div>
Text 1
</div>
<div>
Text 2
</div>
<div>
Text 3
</div>
<div>
Text 4
</div>
<div>
Text 5
</div>
<div>
Text 6
</div>
<div>
Text 7
</div>
<div>
Text 8
</div>
<div>
Text 9
</div>
</aside>
<section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at lacus nisl. Aliquam sed elit vel nisi egestas fringilla non eget metus. Nam tempus vehicula massa, et pharetra orci pulvinar eu. Etiam tincidunt arcu nisl, ac porttitor felis ornare eget.
Suspendisse feugiat posuere dui, id imperdiet nisl tincidunt vel. Duis ut tempus purus. Nulla facilisis lobortis sagittis. Fusce risus augue, hendrerit id nisi sed, luctus imperdiet sem. Phasellus vestibulum scelerisque massa, tincidunt porta lectus
gravida non. Integer egestas ipsum eros. Duis a ultrices odio. Curabitur justo lectus, ultricies quis urna eget, interdum scelerisque felis. Nullam eleifend est in efficitur vulputate. Praesent sit amet vulputate nibh, at vulputate dui. Nulla facilisi.
Praesent sollicitudin mi nec sem sollicitudin, et aliquam diam rutrum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent finibus justo sem, vitae tincidunt mi consequat in. Aliquam ullamcorper ultrices
nulla, at dapibus nulla hendrerit eget. Nullam sit amet libero a magna dictum mattis. Suspendisse hendrerit suscipit augue, vel congue sapien tincidunt nec. Donec volutpat tempor felis ac sagittis. Donec in bibendum leo. Nunc cursus leo ex, in commodo
massa laoreet vitae. Phasellus eu lorem eu felis facilisis faucibus. Suspendisse pretium a ex id sodales. Proin eu enim id nisl aliquam luctus nec non tellus. Nullam fermentum dolor ac semper aliquet. Fusce accumsan vestibulum lorem eget malesuada.
In eget molestie urna, eget viverra sapien. Nullam malesuada sapien at orci hendrerit, vitae dapibus lorem pulvinar. Duis ornare odio lectus, id hendrerit magna mattis id. Duis in est non nisi placerat gravida sed ut enim. Proin pellentesque mollis
eros, sit amet mattis lectus fringilla quis. Donec eu ligula eu ex mollis suscipit. Vestibulum blandit imperdiet sodales. Maecenas malesuada magna id sem fermentum, nec pulvinar dolor mollis. Nam tempus, velit ac dignissim interdum, augue est pulvinar
urna, id molestie lectus tellus in mi. Curabitur cursus purus eget hendrerit auctor. Maecenas vel orci et urna hendrerit varius. Suspendisse potenti.
</section>
</main>
(EDIT: my current code added to bottom of post)
I need to set a value for the height of the div in order for it to hide/scroll overflow properly, but I don't want a div at a specific pixel height. I can solve that by using % or vh units, but I don't actually want to use those units. By that, I mean I don't want my div to always be, for example, 2/3 of the page, because that means the bottom of the div will be a different distance from the bottom of the browser window, like this-
* {
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
}
body > div {
width: 90%;
height: 90%;
background: yellow;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<div>
</div>
</body>
</html>
-I want it to be a consistent distance from the bottom of the browser window,
like this-
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
div {
background-color: yellow;
width: 350px;
position: fixed;
left: 10px;
top: 10px;
right: 10px;
bottom: 10px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<div>
</div>
</body>
</html>
(for visual representation primarily, I am not really using the code itself as an example)
Basically, I want my div to be a variable height and hide/scroll overflow, but always 10px from the bottom.
I think these describe the same problem I'm having:
Setting a length (height or width) for one element minus the variable length of another, i.e. calc(x - y), where y is unknown
Getting a scrollable child div to Vertically fill the remainder of its parent dynamically
The answers there are to use tables or flexbox - are these the only options (without using javascript)?
My code:
* {
margin: 0;
padding: 0;
}
body {
font-family: Helvetica, Arial, sans-serif;
overflow-x: hidden;
overflow-y: hidden;
width: 100%;
height: 100%;
}
p {
font-size: 9pt;
}
a {
text-decoration: none;
color: black;
}
.container { /*this contains all the divs!!*/
padding: 10px;
}
.header {
}
.name {
float: left;
width: 25vw;
padding-right: 5vw;
}
.about {
width: 65vw;
}
.main { /*this contains divs 'left' and 'right'*/
/*background-color: #CCCCCC;*/
clear: left;
padding-top: 10px;
width: 95vw;
}
.left {
/*background-color: #E6E6E6;*/
float: left;
min-height: 10px;
width: 25vw;
padding-right: 5vw;
}
.hold { /*this is how i tried your solution*/
position: relative;
height: calc(95vh - 10px);
}
.right { /*this is my problem div*/
background-color: #FFFF00;
width: 65vw;
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
}
.lorem {
margin-right: 20vw;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Name </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="name">
<p> Name </p>
</div> <!-- end div name -->
<div class="about">
<p> about </p>
</div> <!-- end div name -->
</div> <!-- end div header -->
<div class="main">
<div class="left">
</div> <!-- end div left -->
<div class="hold">
<div class="right">
<div class="lorem">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam feugiat facilisis purus at fermentum. Etiam ultricies iaculis nulla maximus cursus. Maecenas justo nulla, suscipit a dapibus at, lobortis nec mauris. Mauris egestas mi sit amet risus convallis, in hendrerit lorem maximus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sollicitudin tempor libero, nec molestie dui tempor sit amet. Aenean molestie ex id nisl venenatis, quis tincidunt lectus porta. Vivamus aliquam lobortis nulla, id porta leo consequat sollicitudin. Ut iaculis neque placerat ipsum placerat tincidunt.
Quisque libero sem, hendrerit quis urna sit amet, mollis venenatis nisl. Morbi vel neque rhoncus, congue purus ac, condimentum nunc. Morbi vestibulum metus nec velit eleifend, ac sodales nulla posuere. Praesent id fermentum massa. Morbi vestibulum lorem nulla, ac vestibulum nunc auctor non. Donec ultricies placerat mauris, at pretium nibh finibus eu. Suspendisse gravida neque nisl, sit amet bibendum ante placerat eget. Sed laoreet suscipit turpis vitae ullamcorper. Mauris quis pharetra eros. Curabitur quis diam non dui elementum facilisis vel ac sem. Duis vitae augue vitae mi pulvinar placerat ut quis purus. Donec sagittis maximus aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Phasellus pharetra nisi arcu, in laoreet lacus convallis sed. Nam euismod ligula felis, ut laoreet nisl sodales eget. Maecenas cursus, augue vitae suscipit laoreet, purus magna bibendum tellus, sed maximus ex dui ac velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla eget aliquet tellus, in viverra sapien. Sed eget urna mauris. Morbi dapibus dolor et felis viverra condimentum sed a nisl. Integer congue cursus ultrices. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse nulla risus, pulvinar eget odio vitae, scelerisque cursus magna. Nam maximus eros vitae massa euismod, vel tempus felis vulputate.
Nunc blandit massa a nisl viverra, vitae molestie ex rhoncus. Pellentesque finibus luctus nisi. Sed quis luctus metus. Nullam sed augue ultrices, lacinia dolor ac, egestas ante. In non nisi nibh. Sed vitae dui libero. Duis ut ullamcorper urna. Phasellus quis fringilla leo.
Nulla porta tellus ut nibh pharetra dapibus. Mauris ullamcorper egestas aliquam. Cras posuere scelerisque imperdiet. In ultrices, leo eu molestie bibendum, augue dui semper ante, vel faucibus nibh enim sed eros. Mauris ipsum dui, placerat et tincidunt vitae, laoreet vel enim. Praesent at ligula et neque placerat blandit sed vulputate ipsum. Phasellus sodales, odio nec aliquam pretium, augue lacus mattis quam, nec vulputate purus lorem vitae nisi.
Suspendisse nisl ipsum, volutpat ac dapibus at, tincidunt eget nulla. Mauris ornare a nisi ac fringilla. Maecenas leo sapien, vulputate in dictum a, feugiat in eros. Aliquam sit amet sagittis leo. Mauris metus nisl, convallis eget mollis ut, ullamcorper eu tellus. Pellentesque eu dolor tempor, bibendum leo vitae, maximus velit. Aenean volutpat neque sit amet tellus mattis euismod.
Quisque nec vehicula orci. Curabitur varius fringilla risus, convallis tincidunt velit porttitor vitae. Aenean in lacus nec nunc tempor dignissim nec pretium sem. Nullam finibus odio quis metus ornare, in fermentum elit rutrum. Proin vitae dui in metus vehicula sodales. Donec massa neque, suscipit ac est quis, ultrices auctor risus. Cras eu auctor lectus. Nam sagittis vulputate hendrerit. Maecenas consequat odio justo, at malesuada nulla ullamcorper a. Donec arcu tellus, dignissim ut velit vel, consequat scelerisque dolor. Curabitur dictum vel risus quis consequat.
Pellentesque fringilla eu nisi sed tincidunt. Nulla feugiat sit amet purus sit amet cursus. Suspendisse nibh purus, tincidunt eu congue ut, ultricies id lectus. Phasellus convallis in nibh vel molestie. Nunc condimentum congue justo. In congue, turpis at vulputate imperdiet, dolor erat ultricies turpis, vitae egestas est augue in nisl. Ut ut leo diam. Duis vulputate ligula velit, vitae volutpat felis viverra a. Maecenas justo quam, lobortis a placerat ut, ullamcorper ac lorem. Sed eu vehicula odio.
Fusce id mauris ornare, mollis mi at, vulputate turpis. Praesent a risus feugiat, rutrum lacus nec, sodales nisi. Nulla ullamcorper libero pretium lacus accumsan, eu tempor mi porta. In tincidunt porta feugiat. Cras lectus arcu, convallis nec neque ac, vestibulum pretium ex. Curabitur mi ipsum, commodo ut eros eget, fringilla fringilla tortor. Curabitur maximus tellus ut turpis malesuada, auctor semper lectus porta. Suspendisse non sapien sagittis, dapibus tellus et, egestas quam. Aliquam vitae massa sit amet urna rhoncus rutrum sit amet et lorem. Phasellus gravida justo ut vulputate vestibulum.
Nunc sed tempus metus, sit amet volutpat mi. Quisque sed metus rutrum, iaculis enim sed, sodales lacus. Quisque quis mi ac sapien scelerisque efficitur lacinia et nunc. Proin tincidunt scelerisque turpis, non euismod ante interdum at. Sed vitae velit scelerisque, placerat nulla in, egestas justo. Mauris urna orci, pulvinar a nibh a, luctus pellentesque mauris. Nulla faucibus hendrerit urna non venenatis. Quisque nulla mi, suscipit sit amet nunc eu, dictum ullamcorper tellus. Donec lacus libero, commodo quis mauris pellentesque, feugiat iaculis nisl. Nulla facilisi. Suspendisse sed risus quis risus fringilla condimentum. Aenean aliquet in eros vel volutpat. Vivamus malesuada ultrices lorem sit amet feugiat. In interdum leo ac orci sollicitudin, maximus vestibulum nisl gravida. Sed venenatis pharetra fringilla. Etiam mauris risus, cursus et est tristique, mattis venenatis nisi.
</p>
</div> <!-- end div LOREM -->
</div> <!-- end div main -->
</div> <!-- end div hold -->
</div> <!-- end div container -->
</body>
</html>
You're on the right track! You can combine vh with calc to get the desired effect.
height: calc(100vh - 10px) - assuming the element is positioned at the top of the screen, that'll achieve the effect you're describing.
To handle scroll/overflow, you'll need an inner container - a div inside the one you set the height property on. Give that inner div { height: 100%; overflow: auto; } and you should be all set.
Here's a demo - to see it working, use the full screen view and shrink your browser's height.
/* These styles are just to make this easier to see,
and to normalize the display a little. */
* { box-sizing: border-box; margin: 0; padding: 0; }
.page { width: 100px; border: 2px solid; }
/* Here's the box that locks to some distance from the bottom, in this case 30px */
.outer {
height: calc(100vh - 30px);
position: relative;
border: 1px solid blue;
}
/* And here's the scrollable container inside it */
.inner {
height: 100%;
overflow: auto;
}
<div class="page">
<div class="outer">
<div class="inner">
content content content content
content content content content
content content content content
</div>
</div>
</div>
I am a newbie to CSS. I started exploring CSS float property. I have two <div> elements inside a container. The two divs have equal width and height.
<div class="container">
<div class="one">
</div>
<div class="two">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</p>
</div>
</div>
And CSS for the above is :
.one{
width: 200px;
height: 200px;
background-color: green;
border: 1px solid blue;
float: left;
}
.two{
width: 200px;
height: 200px;
background-color: red;
border: 1px solid black;
overflow:visible;
}
.container{
overflow:hidden;
}
From the above what I can understand is that since the div that is floated is removed from the normal flow and floated to left and the second div which contains the text inside <p> elements merges underneath the .one div. And moreover since both have the same width and height I cannot see the content.
But when I set the overflow property of the .two to scroll I see the second div being placed adjacent to first div. This is confusing. Why is such a behavior? Please explain me. Link to codepen attached below for more details.
Link to Codepen
The float CSS property specifies that an element should be taken from the normal flow. However the non-float element still takes all the available width including the floating element. But if you set overflow: auto; or hidden to it, it will then align next to the floating element. See the demo following, it should explain it clearly.
.a1, .b1 {
background: rgba(0,0,0,.5); /*pure black with alpha*/
width: 50px;
height: 50px;
float: left;
}
.a2 {
background: lime;
}
.b2 {
background: lime;
overflow: auto; /*let the browser decide whether to clip or not*/
}
<div class="a1">hello</div>
<div class="a2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</div>
<br/>
<div class="b1">hello</div>
<div class="b2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</div>
What is happening here is because:
.container{
overflow:hidden;
}
What is happening?
Your floating div wants to take up space before your other div. Because your non-floating div has display: block, it wants a whole line to render itself. The floating div is pushing down your non-floating div which is then hidden by the style above. If you change display to inline-block, it will take up only the space it needs using the width and height properties.
Here is an example: http://codepen.io/anon/pen/LVpxZy
I have a css problem like this:
I have 3 divs, imagine they're all stacked in a column (like table with 3 rows) and the top one and the bottom one has height: 100px; and position: absolute; for example and they're like header and footer, they always stick to the top and the bottom of my form.
The height of the whole form can vary depending on other elements in the form, so I need my middle div to be just between the other 2 divs, and if it doesn't fit with it's content, to scroll.
(For example header and footer are 100px height, the form is just 500px height and the text in middle div is very very long) <- at the moment the middle div expands and streches the whole form.
I've tried many things to solve this with positioning, marging, padding of the elements, but still no success... Can anyone help me? Thanks!
You can do it this way: jsFiddle
CSS
.header, .footer {
background-color: green;
height: 100px;
width: 100%;
}
.form {
height: 300px;
position: relative;
}
.content {
position: absolute;
top: 100px;
bottom: 100px;
overflow-y: scroll;
}
.footer {
position: absolute;
bottom: 0px;
}
What's wrong with just a little bit of JS as simple as this?
var form_height=300, footer_height=100, header_height=100;
document.getElementById('content').style.height=form_height - header_height - footer_height +'px';
Just adding that your code works:
http://jsfiddle.net/n8sZ7/23/
HTML
<div class="form">
<div class="header"></div>
<div id="content" class="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc
</div>
<div class="footer"></div>
</div>
CSS
.header, .footer {
background-color: green;
height: 100px;
}
.form {
height: 300px;
}
.content {
overflow-y: scroll; <!-- I want this to fit between header and footer (in this example to get 100px of height) without using any javascript -->
}
I'm using absolute positioning to have a div fill up the entire browser window. However, I wan't to combine this with a sticky div that sometimes is there and sometimes not.
To make things a little clearer, check out this jsFiddle: http://jsfiddle.net/henrikandersson/aDdRS/
I want the "top", "left" and "subheader" to stay where they are at all times.
I also want the "content" div to fill up what is left of the window.
However, sometimes I want to display the "alert" div before "content".
So far so good, as you can see in the jsFiddle. But, I want "alert" to stick to the "subheader" and stay there when scrolling. As you can see if you resize the window, "alert" will now be scrolled along with "content" - I don't want it to be.
Anyone got an idea of how to solve this?
EDIT:
I made a change in my jsFiddle, I placed the "alert" where it should be (between subheader and content-area). As you can see ( http://jsfiddle.net/henrikandersson/aDdRS/12 ) it does not push the "content-area" down since content-area has top:20px. And I can't set top:40px for example since "alert" should be able to vary in height and I want content-area to have the same css with or without the alert above.
EDIT #2:
This question deals with the same problem, but there is no solution for that question either. Seems like it's not possible without using JavaScript:
variable height scrolling div, positioned relative to variable height sibling
2018-6-18
I choose the CSS way with position: sticky.
that https://github.com/abouolia/sticky-sidebar .
doesn't work for me (I am using Vue.js 2.0 SPA with vue-router & vuex)
I also want the element position: absolute first,
and then position: sticky
Solution
parent HTML element use position: absolute to have the right position.
(don't forget to set height for parent. for example height:100%)
child HTML element position: sticky
work for me.
position: fixed
is a combination of both absolute and sticky
edit
update with some enhancements
body {
height: 100%;
overflow: hidden;
}
#top{
position: absolute;
background: yellow;
height: 50px;
width: 100%;
top: 0;
}
#left {
background: #e3e3e3;
position: absolute;
bottom: 0;
left: 0;
top: 50px;
width: 200px;
}
#right {
position: absolute;
bottom: 0;
left: 200px;
right: 0;
top: 50px;
}
#sub-header {
height: 20px;
background: orange;
}
#content-area {
position: absolute;
top: 20px;
right: 0;
bottom: 0;
left: 0;
}
#alert {
background: red;
color: white;
}
#content {
width: 100%;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
overflow-y: auto;
position: absolute;
}
#alert + #content {
top: 20px;
}
#alert:empty + #content {
top: 0px;
}
<body>
<div class="container">
<div id="top">top</div>
<div id="left">left</div>
<div id="right">
<div id="sub-header">subheader</div>
<div id="content-area">
<div id="alert">alert!</div>
<div id="content">content<br /><br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget nunc magna, eget vehicula ligula. Vestibulum in massa massa, ut feugiat arcu. Suspendisse feugiat commodo tellus, id aliquam dolor cursus eu. Aliquam erat volutpat. Nulla interdum ipsum ut lectus sollicitudin blandit sodales ante malesuada. Etiam ac neque ut turpis faucibus luctus non et arcu. Maecenas ut risus ut odio fringilla sagittis. Sed nulla lorem, suscipit at condimentum quis, adipiscing eget turpis. Morbi accumsan est at tellus hendrerit sed blandit nibh sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent gravida, velit id sodales bibendum, nulla leo rutrum quam, vel tempus justo mi vitae sapien. In imperdiet blandit rhoncus. Phasellus at massa nulla, ut tincidunt est. Nam viverra dui non enim semper consequat. Etiam sed libero sed ante condimentum bibendum ultrices eu nunc.
Integer massa nibh, interdum eget consectetur sed, scelerisque a ipsum. Fusce et ligula erat. Vestibulum lacus enim, facilisis id sollicitudin non, condimentum eu sem. Donec quis magna nec massa vulputate hendrerit. Nam leo nulla, fermentum eu congue quis, imperdiet sit amet orci. Aliquam ornare felis commodo est rhoncus blandit. Quisque at neque ac turpis vulputate sagittis. Donec et viverra risus. Fusce posuere lacus aliquam erat molestie sed tincidunt elit placerat. Sed pulvinar varius neque. Nullam congue adipiscing quam egestas convallis. Sed molestie massa euismod dolor facilisis laoreet.
Cras sit amet nisi sapien, non fringilla arcu. Aenean euismod gravida sem. Donec eu luctus justo. Aliquam erat volutpat. Mauris vestibulum sagittis magna, eget bibendum dolor tempor nec. Nunc rhoncus suscipit felis eu imperdiet. Sed fermentum diam non turpis tempor sit amet adipiscing leo elementum. Donec aliquam consequat elit id auctor.
Praesent vehicula, nibh a elementum imperdiet, urna nulla iaculis leo, ac hendrerit sem massa ac tortor. Suspendisse viverra consectetur libero a luctus. Maecenas iaculis mi id urna fermentum condimentum viverra tellus vulputate. Suspendisse potenti. Aliquam fermentum nulla quis dolor commodo scelerisque. Donec cursus laoreet consectetur. Praesent ultricies arcu ut ante hendrerit imperdiet. Etiam at metus lectus. Aliquam ut ligula neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec auctor scelerisque purus non sollicitudin. Sed elementum facilisis nisl, eget commodo est congue in. Etiam tincidunt viverra felis, vel tincidunt nulla pretium vel. Phasellus commodo bibendum magna et imperdiet. Aenean euismod condimentum magna eget venenatis. Pellentesque lorem eros, ornare at egestas vel, tincidunt non nunc. Quisque non diam nisl, ut consectetur metus. Fusce ipsum tortor, viverra et lobortis et, ullamcorper non magna. Duis elementum molestie sem, et ullamcorper neque eleifend non. Nunc iaculis quam eros, in pellentesque nunc. Donec tincidunt faucibus est, porta cursus eros imperdiet volutpat.</div>
</div>
</div>
</div>
<body>
first post
Why not scroll just the .content and not the .content-area
body {
height: 100%;
overflow: hidden;
}
#top{
position: absolute;
background: yellow;
height: 50px;
width: 100%;
top: 0;
}
#left {
background: #e3e3e3;
position: absolute;
bottom: 0;
left: 0;
top: 50px;
width: 200px;
}
#right {
position: absolute;
bottom: 0;
left: 200px;
right: 0;
top: 50px;
}
#sub-header {
height: 20px;
background: orange;
}
#content-area {
position: absolute;
top: 20px;
right: 0;
bottom: 0;
left: 0;
}
#alert {
background: red;
color: white;
}
#content {
width: 100%;
height: 100%;
overflow-y: auto;
}
<body>
<div class="container">
<div id="top">top</div>
<div id="left">left</div>
<div id="right">
<div id="sub-header">subheader</div>
<div id="content-area">
<div id="alert">alert!</div>
<div id="content">content<br /><br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget nunc magna, eget vehicula ligula. Vestibulum in massa massa, ut feugiat arcu. Suspendisse feugiat commodo tellus, id aliquam dolor cursus eu. Aliquam erat volutpat. Nulla interdum ipsum ut lectus sollicitudin blandit sodales ante malesuada. Etiam ac neque ut turpis faucibus luctus non et arcu. Maecenas ut risus ut odio fringilla sagittis. Sed nulla lorem, suscipit at condimentum quis, adipiscing eget turpis. Morbi accumsan est at tellus hendrerit sed blandit nibh sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent gravida, velit id sodales bibendum, nulla leo rutrum quam, vel tempus justo mi vitae sapien. In imperdiet blandit rhoncus. Phasellus at massa nulla, ut tincidunt est. Nam viverra dui non enim semper consequat. Etiam sed libero sed ante condimentum bibendum ultrices eu nunc.
Integer massa nibh, interdum eget consectetur sed, scelerisque a ipsum. Fusce et ligula erat. Vestibulum lacus enim, facilisis id sollicitudin non, condimentum eu sem. Donec quis magna nec massa vulputate hendrerit. Nam leo nulla, fermentum eu congue quis, imperdiet sit amet orci. Aliquam ornare felis commodo est rhoncus blandit. Quisque at neque ac turpis vulputate sagittis. Donec et viverra risus. Fusce posuere lacus aliquam erat molestie sed tincidunt elit placerat. Sed pulvinar varius neque. Nullam congue adipiscing quam egestas convallis. Sed molestie massa euismod dolor facilisis laoreet.
Cras sit amet nisi sapien, non fringilla arcu. Aenean euismod gravida sem. Donec eu luctus justo. Aliquam erat volutpat. Mauris vestibulum sagittis magna, eget bibendum dolor tempor nec. Nunc rhoncus suscipit felis eu imperdiet. Sed fermentum diam non turpis tempor sit amet adipiscing leo elementum. Donec aliquam consequat elit id auctor.
Praesent vehicula, nibh a elementum imperdiet, urna nulla iaculis leo, ac hendrerit sem massa ac tortor. Suspendisse viverra consectetur libero a luctus. Maecenas iaculis mi id urna fermentum condimentum viverra tellus vulputate. Suspendisse potenti. Aliquam fermentum nulla quis dolor commodo scelerisque. Donec cursus laoreet consectetur. Praesent ultricies arcu ut ante hendrerit imperdiet. Etiam at metus lectus. Aliquam ut ligula neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec auctor scelerisque purus non sollicitudin. Sed elementum facilisis nisl, eget commodo est congue in. Etiam tincidunt viverra felis, vel tincidunt nulla pretium vel. Phasellus commodo bibendum magna et imperdiet. Aenean euismod condimentum magna eget venenatis. Pellentesque lorem eros, ornare at egestas vel, tincidunt non nunc. Quisque non diam nisl, ut consectetur metus. Fusce ipsum tortor, viverra et lobortis et, ullamcorper non magna. Duis elementum molestie sem, et ullamcorper neque eleifend non. Nunc iaculis quam eros, in pellentesque nunc. Donec tincidunt faucibus est, porta cursus eros imperdiet volutpat.</div>
</div>
</div>
</div>
<body>
Use float: left; and width: 0; and you can use transform: translateX(xxx); for set left position.
Problem solved :)
Add fixed height & width 100% to alert + position:fixed
Add padding-top to content
Only downfall is of course the extra padding if there is no alert...
See http://jsfiddle.net/aDdRS/5/
The alert scrolls with the content because it's inside the content-area which has overflow-y: auto.
Move it out of the content-area (put it in between subheader and content-area), and remove the position: absolute (and top/left/right/bottom) attributes from the content. In that example I see no reason for content to be absolute-positioned, normal flow will put it where it wants to be.
I chose to go with a JavaScript approach after all. Would have preferred a pure CSS approach but my need for IE8 support stood in the way. This answer by Myles Gray is pretty much what I did - https://stackoverflow.com/a/4933509/940517
Sticky + absolute w/o parent:
html,
body {
height: 250vh;
color: #fff;
position: relative;
}
.child {
margin: 100px auto -100px;
height: 100px;
width: 200px;
background-color: firebrick;
position: sticky;
top: 50px;
padding: 10px;
}
<div class="child">Hi, I'm sticky AND absolutely positioned!</div>