I have a div element (innerBar) inside another one (leftBar), and unless I specify the innerBar's border to have some width, the innerBar isn't starting at the top of the leftBar.
How do fix this?
.leftBar {
width: 10%;
height: 100%;
position: fixed;
top: 0;
left: 0;
border: 1px solid red;
}
.innerBar {
width: 100%;
height: 100%;
background-color: lightblue;
border: 1px solid yellow;
}
<div class="leftBar">
<div class="innerBar">
<p>Some Text</p>
</div>
</div>
It's not necessary to position the nested element out of the document flow at all.
This behaviour is a result of the default margin property declared on the nested p element (specifically the margin-top property), and can be rectified by either one of the following methods:
removing the margin property on the nested p tag:
.innerBar p {
margin-top: 0;
}
* {
box-sizing: border-box;
}
.leftBar {
width: 10%;
height: 100%;
position: fixed;
top: 0;
left: 0;
border: 1px solid red;
}
.innerBar {
width: 100%;
height: 100%;
background-color: lightblue;
/* additional */
display: inline-block;
vertical-align: top;
}
<div class="leftBar">
<div class="innerBar">
<p>Some Text</p>
</div>
</div>
declaring the following additional properties on the nested element
(innerBar):
.innerBar {
width: 100%;
height: 100%;
background-color: lightblue;
/* border: 1px solid yellow; */
/* additional */
display: inline-block;
vertical-align: top;
}
* {
box-sizing: border-box;
}
.leftBar {
width: 10%;
height: 100%;
position: fixed;
top: 0;
left: 0;
border: 1px solid red;
}
.innerBar {
width: 100%;
height: 100%;
background-color: lightblue;
}
.innerBar p {
margin: 0px;
}
<div class="leftBar">
<div class="innerBar">
<p>Some Text</p>
</div>
</div>
Okay got it, I just add to innerBar the property:
position: absolute;
Related
Using css,
I want the the div(.scroll-indicator) to always cover parent div(.scroll-container), but when you scroll you see that it scrolls along with its content.
https://jsfiddle.net/vish6263/srnjyvtm/16/
Basically position: sticky is a hybrid of relative and fixed
Is there a solution for a hybrid of absolute and fixed?
Update: I already have it working by wrapping it without another container but since this is a re-usable component I am developing I didn want to add another layer inbetween, so was wondering if there is a solution using CSS only?
.scroll-container {
position: relative;
width: 200px;
height: 200px;
overflow: auto;
border: 1px solid blue;
}
.scroll-item {
height: 50px;
}
.scroll-indicator {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: 1px solid red;
}
<div class='scroll-container'>
<div class='scroll-indicator'>
</div>
<div class='scroll-item'>item1</div>
<div class='scroll-item'>item2</div>
<div class='scroll-item'>item3</div>
<div class='scroll-item'>item4</div>
<div class='scroll-item'>item5</div>
<div class='scroll-item'>item6</div>
</div>
If you know the height you can try the following:
.scroll-container {
--h: 200px; /* the height */
position: relative;
width: 200px;
height: var(--h);
overflow: auto;
border: 1px solid blue;
}
.scroll-item {
height: 50px;
}
.scroll-indicator {
position: sticky;
top: 0;
height: inherit;
margin-bottom: calc(-1*var(--h));
border: 1px solid red;
box-sizing: border-box;
pointer-events: none
}
<div class='scroll-container'>
<div class='scroll-indicator'>
</div>
<div class='scroll-item'>item1</div>
<div class='scroll-item'>item2</div>
<div class='scroll-item'>item3</div>
<div class='scroll-item'>item4</div>
<div class='scroll-item'>item5</div>
<div class='scroll-item'>item6</div>
</div>
Wrap the items in another div;
.scroll-container {
position: relative;
width: 200px;
height: 200px;
border: 1px solid blue;
display: flex;
}
.scroll-item {
height: 50px;
font-size: 20px;
}
.scroll-indicator {
position: absolute;
width: 100px;
height: calc(100% - 20px);
top: 0;
left: 0;
border: 1px solid red;
pointer-events: none;
}
.scroll-items {
overflow-y: auto;
display: flex;
}
<div class='scroll-container'>
<div class='scroll-indicator'>
</div>
<div class="scroll-items">
<div class='scroll-item'>item1</div>
<div class='scroll-item'>item2</div>
<div class='scroll-item'>item3</div>
<div class='scroll-item'>item4</div>
<div class='scroll-item'>item5</div>
<div class='scroll-item'>item6</div>
</div>
</div>
Edit: fixed issue because I forgot to update it from my JsFiddle
How can I position a textarea at the bottom of the parent div and also make the textarea the same width?
The problem I have now is that the textarea expands all the way to the right side of the page.
Html
html,
body {
height: 90%;
}
.container {
position: relative;
margin-left: 100px;
width: 500px;
height: 100%;
border: 1px solid red;
}
.middle {
position: absolute;
top: 20px;
left: 20px;
width: 100%;
height: 100%;
border: 1px solid blue;
}
.bottom {
position: fixed;
bottom: 0;
width: 100%;
}
<div class="container">
<div class="middle">
<p>
Textarea should be placed at bottom of the 'blue' div, with the same width
</p>
<textarea class="bottom" placeholder="Textarea..."></textarea>
</div>
</div>
Here is a simple example of the problem that I have: https://jsfiddle.net/hu45v46p/1/
How can this be solved with html and css?
Instead of position: fixed, you want to give it position: absolute.
By default, it will be slightly larger than the blue box (because of the borders). You can accommodate for this with width: calc(100% - 6px):
html,body {
height: 90%;
}
.container {
position: relative;
margin-left: 100px;
width: 500px;
height: 100%;
border: 1px solid red;
}
.middle {
position: absolute;
top: 20px;
left: 20px;
width: 100%;
height: 100%;
border: 1px solid blue;
}
.bottom {
position: absolute;
bottom: 0;
width: calc(100% - 6px);
}
<div class="container">
<div class="middle">
<p>
Textarea should be placed at bottom of the 'blue' div, with the same width
</p>
<textarea class="bottom" placeholder="Textarea..."></textarea>
</div>
</div>
Hope this helps! :)
Check out the code below.
html,body {
height: 90%;
}
.container {
position: relative;
margin-left: 100px;
width: 500px;
height: 100%;
border: 1px solid red;
}
.blue {
position: absolute;
top: 20px;
left: 20px;
width: 100%;
height: 100%;
border: 1px solid blue;
}
.bottom {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
<div class="container">
<div class="middle">
<div class="blue">
<p>Textarea should be placed at bottom of the 'blue' div, with the same width</p>
<textarea class="bottom" placeholder="Textarea..."></textarea>
</div>
</div>
</div>
position: fixed; is relative to your viewport which is why you're getting those results for the textarea.
html,body {
height: 90%;
}
.container {
position: relative;
margin-left: 100px;
width: 500px;
height: 100%;
border: 1px solid red;
}
.middle {
position: absolute;
top: 20px;
left: 20px;
width: 100%;
height: 100%;
border: 1px solid blue;
}
.bottom {
/*fixed to absolute*/
position: absolute;
bottom: 0;
width: 100%;
}
<div class="container">
<div class="middle">
<p>
Textarea should be placed at bottom of the 'blue' div, with the same width
</p>
<textarea class="bottom" placeholder="Textarea..."></textarea>
</div>
</div>
Changed the value of the position property to absolutefor the .bottom div and added some basic CSS browser reset * {margin: 0; padding: 0; box-sizing: border-box} which fits the textarea nicely inside the .middle div:
* {margin: 0; padding: 0; box-sizing: border-box}
html, body {
height: 90%;
}
.container {
position: relative;
margin-left: 100px;
width: 500px;
height: 100%;
border: 1px solid red;
}
.middle {
position: absolute;
top: 20px;
left: 20px;
width: 100%;
height: 100%;
border: 1px solid blue;
}
.bottom {
position: absolute;
bottom: 0;
width: 100%;
}
<div class="container">
<div class="middle">
<p>
Textarea should be placed at bottom of the 'blue' div, with the same width
</p>
<textarea class="bottom" placeholder="Textarea..."></textarea>
</div>
</div>
There is a block with header, body and footer parts inside of it. Header and footer heights are fixed, body height is determined by its content. I need the outer block size to be the size of its contents but not more then the size of its container. If the body height exceeds maximum possible size, then the y-scroll is shown for body, but header and footer stay at the top and bottom of outer block.
I made the FIDDLE. But I could only get as far as when I resize window the scroll appears for outer block, not for body block only.
This is CSS and HTML:
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
position: absolute;
top: 10px; bottom: 10px; left: 10px; width: 200px;
border: 1px solid red;
}
.innerContainer {
border: 1px solid purple;
max-height: 100%;
overflow: auto;
}
.header, .footer {
height: 30px;
background: blue;
}
.body {
background: green;
}
<div class='container'>
<div class='innerContainer'>
<div class='header'></div>
<div class='body'>text<br>text<br>...</div>
<div class='footer'></div>
</div>
</div>
Is it possible to do what I need without using JavaScript?
EDIT: I made an image to make it clear what I need.
Well Here is your code from what I understand that you want the header
sticks to top and footer in the bottom and you can scroll the body if
necessary in the container size.
<div class='container'>
<div class='innerContainer'>
<div class='header'></div>
<div class='body'>text<br>texttext<br>texttext<br>texttext<br>texttext<br>texttext<br>texttext<br>texttext<br>texttext<br>texttext<br>text
</div>
<div class='footer'></div>
</div>
</div>
We need to style the footer and header separately plus your style as you will see in the code below
So you add to .innerContainer (position: absolute; bottom: 0; right: 0; left: 0; height: 100%; overflow: hidden;) and for the .body you add(height: 50%; overflow-y: auto;)
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
position: absolute;
top: 10px; bottom: 10px; left: 10px; width: 200px;
border: 1px solid red;
}
.innerContainer {
border: 1px solid purple;
height: 100%;
max-height: 100%;
overflow: hidden;
bottom: 0;
top: 0;
right: 0;
left: 0;
position: absolute;
}
.header, .footer {
height: 30px;
background: blue;
}
.body {
background: green;
min-height: 20px;
max-height: 36%;
overflow-y: auto;
font-size: 20px;
}
I hope that what you want and if you have any question please let me know.
The only solution I've found is using CSS3 calc. Doesn't work in Android browswer, though... FIDDLE
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
position: absolute;
top: 10px; bottom: 10px; left: 10px; width: 200px;
border: 1px solid red;
overflow: hidden;
}
.header, .footer {
height: 30px;
background: blue;
}
.body {
height: 300px;
background: green;
}
.bodyContainer {
max-height: calc(100% - 60px);
overflow-y: auto;
}
<div class='container'>
<div class='header'></div>
<div class='bodyContainer'>
<div class='body'></div>
</div>
<div class='footer'></div>
</div>
I get a flexible count of elements out of a database and put them into a list.
There is a container below the list. This container should take the rest height of the parent container.
On the code below you can see my current result. the Div in #rightContent should take the complete rest height. But i dont know how.
Html:
<section>
<aside>
I'm a sidebar!
</aside>
<main>
<article id="leftContent">
<img src="http://fs1.directupload.net/images/150422/6x5qv8ik.png">
</article>
<article id="rightContent">
<h1>Headline</h1>
<hr>
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<div>
<p>
a lot of text
</p>
</div>
</article>
</main>
</section>
CSS:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
section {
width: 100%;
height: 100%;
}
section aside {
position: fixed;
right: 50px;
width: 150px;
background-color: firebrick;
color: white;
padding: 25px;
height: 100%;
}
section main {
position: relative;
margin-right: 250px;
left: 0;
display: block;
width: auto;
border: 1px solid yellow;
}
section #leftContent {
position: relative;
display: block;
border: 1px solid green;
padding: 0;
margin: 0;
height: auto;
width: 50%;
}
section #leftContent img {
width: 100%;
height: auto;
display: block;
}
section #rightContent {
position: absolute;
display: inline-block;
border: 1px solid blue;
right: 0;
margin-left: 50%;
width: 49%;
height: 100%;
top: 0;
}
section #rightContent div {
border: 1px solid violet;
position: relative;
margin-bottom: 0;
}
http://jsfiddle.net/kzkpLg11/
This image shows what i want.
You could do it like this: http://jsfiddle.net/kzkpLg11/1/
Involves a few extra elements but the browser support will be ok. It's basically all about this piece of CSS. But I suggest you have a look at the fiddle.
.table {
display: table;
width: 100%;
height: 100%;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
You could also solve this problem with Flexbox. But that might be a little trickier.
I have 3 divs that I want next to each other on my page. If the container is 700px in width, they all connect well. But I want to have a max width of 800px on my container. And in that case, I want all my divs to space out (1st div to the left, 2nd div in the center and 3rd div on the right). I need to connect those divs with 2 spacers that I've got (1 to connect div 1 and 2. The other to connect 2 and 3).
Once I have achieved that, I want a second div (content) to float above the first div (background). But I have already achieved that.
I have tried a few things, but I can't find a solution, if anyone could help me, I would appreciate it!
Here are my code snippet:
* {
margin: 0;
padding: 0;
}
.container {
width: 800px;
margin: 0 auto;
background: #efefef;
height: 800px;
}
.content {
position: relative;
z-index: 100;
top: 0;
}
.background {
position: absolute;
z-index: 0;
top: 0;
width: inherit;
}
.bg-left {
height: 190px;
width: 268px;
background: url(images/left-1.png);
float: left;
}
.bg-left-spacer {
height: 190px;
width: 1px;
background: url(images/left-spacer.png);
float: left;
}
.bg-connector {
height: 190px;
width: 133px;
background: url(images/connector.png);
float: left;
margin: 0 auto;
}
.bg-right-spacer {
height: 190px;
min-width: 1px;
background: url(images/right-spacer.png);
float: left;
background-repeat: repeat-x;
}
.bg-right {
height: 190px;
width: 297px;
background: url(images/right-1.png);
float: left;
}
<div class='container'>
<div class='content'>
<h1>testheader</h1>
<p>testtext</p>
</div>
<div class='background'>
<div class='bg-left'></div>
<div class='bg-left-spacer'></div>
<div class='bg-connector'></div>
<div class='bg-right-spacer'></div>
<div class='bg-right'></div>
</div>
</div>
You could achieve it like this:
JSFiddle - DEMO
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
min-width: 700px;
max-width: 800px;
margin: 0 auto;
background: #efefef;
height: 800px;
}
.content {
position: relative;
z-index: 100;
top: 0;
}
.background {
position: absolute;
width: 100%;
z-index: 0;
top: 0;
display: table;
table-layout: fixed;
}
.bg-left {
height: 190px;
width: 268px;
background: url(images/left-1.png);
border: 1px solid #000;
display: table-cell;
}
.bg-connector {
height: 190px;
width: 133px;
background: url(images/connector.png);
border: 1px solid #000;
display: table-cell;
}
.bg-right {
height: 190px;
width: 297px;
background: url(images/right-1.png);
border: 1px solid #000;
display: table-cell;
}
.space {
display: table-cell;
width: 100%;
height: 190px;
background: #F00;
}
<div class='container'>
<div class='content'>
<h1>testheader</h1>
<p>testtext</p>
</div>
<div class='background'>
<div class='bg-left'></div>
<div class="space"></div>
<div class='bg-connector'></div>
<div class="space"></div>
<div class='bg-right'></div>
</div>
</div>
You should use percantages to achieve that:
.bg-left {
height: 190px;
width: calc( 100% / 3 - 1px );
background: url(images/left-1.png);
}
This way .bg-left is 33.3% in width -1px for the spacer.
DEMO: http://jsfiddle.net/6aor5u4m/