Hi i am using this code.....
But when i add new div .myContainer after it is comes up. If i use clear both it not working.
#container {
width: 100px;
height: 100px;
position: relative;
}
#navi,
#infoi {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#infoi {
z-index: 10;
}
<div id="container">
<div id="navi">a</div>
<div id="infoi">
<img src="https://appharbor.com/assets/images/stackoverflow-logo.png" height="20" width="32" />b
</div>
</div>
<div class="myContainer">
ABCDEFGHICJLMNOP
</div>
Related
I'm trying to specify content specifically somewhere on the page, How can i do this so that it'll always be in the exact same spot even when screen size changes?
jsfiddle = https://jsfiddle.net/4pkgfgwh/1/
<div class="container">
<img src="http://i.imgur.com/iGIFvH6.png" style="width:354px;height:228px;">
<div class="display">
<p> Here is some Text</p>
</div>
</div>
.container {
text-align: center;
}
.display {
position:absolute;
TOP:45px;
LEFT:350px;
}
Use position: relative on the parent container:
HTML
<div class="container">
<div class="image-container">
<img src="http://i.imgur.com/iGIFvH6.png">
<div class="display">
<p> Here is some Text</p>
</div>
</div>
</div>
CSS
.container {
width: 100%;
text-align: center;
}
.image-container {
display: inline-block;
position: relative;
width: 354px;
height: 228px;
}
.container img {
width: 100%;
}
.display {
position: absolute;
top: 10px;
left: 200px;
}
JSFiddle demo: https://jsfiddle.net/ompfnjc5/2/
I have it where the blue element row overlaps. But for some reason, the bottom div text foo is being pushed still be the flow. Why is this? I expect foo to be on the left and not effected by the flow because of z-index.
.goal-container {
width: 900px;
}
.progress-column {
display: inline-block;
float: left;
margin-top: 10px;
}
.goal-upper-well {
display: inline-block;
float: left;
background-color: #purple-blue;
width: 500px;
position: relative;
z-index: 2;
}
.goal-lower-well {
height: 300px;
width: 700px;
margin-top: -42px;
position: relative;
z-index: 0;
}
.goal-upper {
height: 43px;
position: relative;
z-index: 2;
}
<div class="goal-container">
<div class="goal-upper">
<div class="well well-sm goal-upper-well">
<button type="button" class="btn-small expand-button"
ng-click="isNavCollapsed = !isNavCollapsed"
aria-label="Left Align">
<span class="glyphicon glyphicon-plus"></span>
</button>
Goal: {{goal.desc}}
</div>
<div class="progress-column">
BARRRRRRRRRRR
</div>
</div>
<div class="goal-lower-well">
<div class="well well-lg goal-lower-well">foo</div>
</div>
</div>
This is because you have a negative top margin on your foo text. Just remove it and the foo text will go to the next line on the left.
.goal-lower-well {
height: 300px;
width: 700px;
/* margin-top: -42px; */ Remove it
position: relative;
z-index: 0;
}
You ned to clear the next 2 divs from floating
.goal-container {
width: 900px;
}
.progress-column {
display: inline-block;
clear: left;
float: left;
margin-top: 10px;
}
.goal-upper-well {
display: inline-block;
float: left;
background-color: #purple-blue;
width: 500px;
position: relative;
z-index: 2;
}
.goal-lower-well {
clear: left;
height: 300px;
width: 700px;
margin-top: -42px;
position: relative;
z-index: 0;
}
.goal-upper {
height: 43px;
position: relative;
z-index: 2;
}
<div class="goal-container">
<div class="goal-upper">
<div class="well well-sm goal-upper-well">
<button type="button" class="btn-small expand-button"
ng-click="isNavCollapsed = !isNavCollapsed"
aria-label="Left Align">
<span class="glyphicon glyphicon-plus"></span>
</button>
Goal: {{goal.desc}}
</div>
<div class="progress-column">
BARRRRRRRRRRR
</div>
</div>
<div class="goal-lower-well">
<div class="well well-lg goal-lower-well">foo</div>
</div>
</div>
Having some trouble getting the desired effect on an image overlay with responsive image. What I want is upon hovering over the image, the colour block and text to appear as shown, but for the text to be in the vertical centre of the div. I have tried vertical-middle but it doesn't seem to be working. Can't make the width and height set value as need to collapse and expand. If anyone can help i'd appreciate it. Thanks
Code, CSS below
.overlay-box {
position: relative;
}
.overlay {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(38,150,198,0.5);
}
.overlay p {
color: #ffffff;
text-align: center;
}
.overlay-box:hover .overlay {
display: block;
}
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-3" style="margin-bottom: 20px;">
<div class="overlay-box">
<a href="#" target="_blank">
<div class="overlay">
<p>1st line<br>2nd line<br><br>
3rd line</p>
</div>
<img src="http://placehold.it/2000x2000" class="img-responsive "/></a>
</div>
</div>
</div>
img{
max-width: 100%;
height: auto;
}
.overlay-box {
position: relative;
}
.overlay {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(38,150,198,0.5);
}
.overlay:before {
content: '';
display: inline-block;
width: 1px;
height: 100%;
vertical-align: middle;
border: 1px solid;
}
.overlay p {
color: #ffffff;
text-align: center;
display: inline-block;
vertical-align: middle;
width: 90%;
}
.overlay-box:hover .overlay {
display: block;
}
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-3" style="margin-bottom: 20px;">
<div class="overlay-box">
<a href="#" target="_blank">
<div class="overlay">
<p>1st line<br>2nd line<br><br>
3rd line</p>
</div>
<img src="http://placehold.it/2000x2000" class="img-responsive "/></a>
</div>
</div>
</div>
You need to wrap the overlay with another div(since tables seem to ignore their height and width when they're absolute) and add position:absolute to it. Then add dislpay:table and dislpay:table-cell; vertical-align:middle for the child divs.
Check out this fiddle: https://jsfiddle.net/65cvzcev/
I have seen examples of three columns (fixed fluid fixed). However, I need an example of a four column solution.
The two outer columns are fixed.
The two inner columns are fluid.
Fixed | Fluid | Fluid | Fixed
You can use calc.
.first, .last {
width: 300px;
}
.middle {
width: calc(50% - 300px);
}
You may want to apply vendor prefixes too.
HTML
<div id="framecontentLeft">
<div class="innertube">
<h1>Left Frame 1</h1>
</div>
</div>
<div id="framecontentRight">
<div class="innertube">
<h1>Right Frame 4</h1>
</div>
</div>
<div id="maincontent">
<div class="inner1">
<h1>Middle Frame 2</h1>
</div>
<div class="inner2">
<h1>Middle Frame 3</h1>
</div>
</div>
CSS
#framecontentLeft, #framecontentRight{
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 100%;
background-color: navy;
color: white;
}
#framecontentRight{
left: auto;
right: 0;
width: 150px;
background-color: navy;
color: white;
}
#maincontent{
position: fixed;
top: 0;
left: 200px;
right: 150px;
bottom: 0;
background: #fff;
overflow: hidden;
}
.inner1{
height: 100%;
background:red;
width:50%;
float:left;
}
.inner2{
background:green;
height: 100%;
width:50%;
float:right;
}
DEMO
I like flexbox better than calc, if you can use it. It’s more… flexible.
<div id="container">
<div class="fixed">
Fixed
</div>
<div class="fluid">
Fluid
</div>
<div class="fluid">
Fluid
</div>
<div class="fixed">
Fixed
</div>
</div>
#container {
display: flex;
}
.fixed {
width: 15em;
}
.fluid {
flex: 1;
}
Dabblet. This, of course, makes all columns the same height, and if you can assume that, doing it without flexbox is also no problem given one more container (noting that if the fluid elements won’t necessarily be taller than the fixed ones, then you should give the inner container a max-height):
<div id="container">
<div class="fixed left">
Fixed
</div>
<!-- Fluid container! No, you don’t have to call it this. -->
<div class="bottle">
<div class="fluid">
Fluid
</div>
<div class="fluid">
Fluid
</div>
</div>
<div class="fixed right">
Fixed
</div>
</div>
#container {
position: relative;
}
.fixed {
bottom: 0;
position: absolute;
top: 0;
width: 15em;
}
.fixed.left {
left: 0;
}
.fixed.left {
right: 0;
}
.bottle {
margin: 0 15em;
overflow: hidden;
}
.fluid {
float: left;
width: 50%;
}
And, of course, if .bottle overflows, you’ll need some kind of clearing ::after.
I have a div with position: fixed, which contains two other divs inside: one with content and second which must always be positioned on the bottom of the main div.
Here is an example:
.scroller {
position: fixed;
border: 1px solid #ddd;
width: 240px;
height: 100px;
top: 0;
bottom: 0;
overflow: auto;
}
.footer {
position: absolute;
bottom: 0;
}
<div class="scroller">
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
<div>content</div><div>content</div><div>content</div><div>content</div>
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="footer">FOOTER</div>
</div>
The problem is that footer starts to move with other content when user scrolls content of the main block, despite of position:absolute of the footer block.
Is there any way to stick footer to the bottom of the main fixed block without changing html structure?
And what if main div contains many children and only last of them is the footer which we need to stick to bottom? Example:
.scroller {
position: fixed;
border: 1px solid #ddd;
width: 240px;
height: 100px;
top: 0;
bottom: 0;
overflow: auto;
}
.footer {
position: absolute;
bottom: 0;
}
<div class="scroller">
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="footer">FOOTER</div>
</div>
Since the absolutely positioned element is inside .scroller and you don't want it to move when scrolling, the scrollable container should be .content instead to .scroller.
.content {
height: 100px;
overflow: auto;
}
Moreover, you should remove bottom: 0 from the fixed wrapper so that its height is given by its content, that is, 100px.
.scroller {
position: fixed;
border: 1px solid #ddd;
width: 240px;
}
.content {
height: 100px;
overflow: auto;
}
.footer {
position: absolute;
bottom: 0;
}
<div class="scroller">
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
<div>content</div><div>content</div><div>content</div><div>content</div>
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="footer">FOOTER</div>
</div>
In case you want multiple .content elements and don't want to scroll each one separately, you can wrap them all in a .scroller-inner container, and set the styles above to it.
.scroller {
position: fixed;
border: 1px solid #ddd;
width: 240px;
}
.scroller-inner {
height: 100px;
overflow: auto;
}
.footer {
position: absolute;
bottom: 0;
}
<div class="scroller">
<div class="scroller-inner">
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
</div>
<div class="footer">FOOTER</div>
</div>
Alternatively, if you know the height of the header, you can make the footer a fixed element, and use margins to correct its position. This is kinda hacky, though.
.scroller {
position: fixed;
border: 1px solid #ddd;
width: 240px;
height: 100px; /* val1 */
top: 0; /* val2 */
overflow: auto;
}
.footer {
position: fixed;
white-space: nowrap;
top: 100px; /* val1 + val2 */
line-height: 20px; /* val3 */
font-size: 16px; /* val4 */
margin-top: -18px; /* val3/2 + val4/2 */
}
<div class="scroller">
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="footer">FOOTER</div>
</div>