With the following HTML and CSS
.container {
position: relative;
border: solid 1px red;
height: 256px;
width: 256px;
overflow: auto;
}
.full-height {
position: absolute;
top: 0;
left: 0;
right: 128px;
bottom: 0;
background: blue;
}
<div class="container">
<div class="full-height">
</div>
</div>
The inner div takes up the full head of the container as desired. If I now add some other, flow, content to the container such as:
.container {
position: relative;
border: solid 1px red;
height: 256px;
width: 256px;
overflow: auto;
}
.full-height {
position: absolute;
top: 0;
left: 0;
right: 128px;
bottom: 0;
background: blue;
}
<div class="container">
<div class="full-height">
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus
maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio cupiditate
placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate quidem.
</div>
Then the container scrolls as desired, however the absolutely positioned element is no longer anchored to the bottom of the container but stops at the initial view-able bottom of the container. My question is; is there any way of having the absolutely positioned element be the complete scroll height of its container without using JS?
You need to wrap the text in a div element and include the absolutely positioned element inside of it.
<div class="container">
<div class="inner">
<div class="full-height"></div>
[Your text here]
</div>
</div>
Css:
.inner: { position: relative; height: auto; }
.full-height: { height: 100%; }
Setting the inner div's position to relative makes the absolutely position elements inside of it base their position and height on it rather than on the .container div, which has a fixed height. Without the inner, relatively positioned div, the .full-height div will always calculate its dimensions and position based on .container.
* {
box-sizing: border-box;
}
.container {
position: relative;
border: solid 1px red;
height: 256px;
width: 256px;
overflow: auto;
float: left;
margin-right: 16px;
}
.inner {
position: relative;
height: auto;
}
.full-height {
position: absolute;
top: 0;
left: 0;
right: 128px;
bottom: 0;
height: 100%;
background: blue;
}
<div class="container">
<div class="full-height">
</div>
</div>
<div class="container">
<div class="inner">
<div class="full-height">
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus
maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio
cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate
quidem.
</div>
</div>
http://jsfiddle.net/M5cTN/
position: fixed; will solve your issue. As an example, review my implementation of a fixed message area overlay (populated programmatically):
#mess {
position: fixed;
background-color: black;
top: 20px;
right: 50px;
height: 10px;
width: 600px;
z-index: 1000;
}
And in the HTML
<body>
<div id="mess"></div>
<div id="data">
Much content goes here.
</div>
</body>
When #data becomes longer tha the sceen, #mess keeps its position on the screen, while #data scrolls under it.
So gaiour is right, but if you're looking for a full height item that doesn't scroll with the content, but is actually the height of the container, here's the fix. Have a parent with a height that causes overflow, a content container that has a 100% height and overflow: scroll, and a sibling then can be positioned according to the parent size, not the scroll element size. Here is the fiddle: http://jsfiddle.net/M5cTN/196/
and the relevant code:
html:
<div class="container">
<div class="inner">
Lorem ipsum ...
</div>
<div class="full-height"></div>
</div>
css:
.container{
height: 256px;
position: relative;
}
.inner{
height: 100%;
overflow: scroll;
}
.full-height{
position: absolute;
left: 0;
width: 20%;
top: 0;
height: 100%;
}
.container {
position: relative;
border: solid 1px red;
height: 256px;
width: 256px;
overflow: auto;
}
.full-height {
position: absolute;
top: 0;
left: 0;
right: 128px;
bottom: 0;
background: blue;
}
<div class="container">
<div class="full-height">
</div>
</div>
I ran into this situation and creating an extra div was impractical.
I ended up just setting the full-height div to height: 10000%; overflow: hidden;
Clearly not the cleanest solution, but it works really fast.
Not that there's anything wrong with any of the other answers, but just for fun, I copied the original snippet and all I changed was height to min-height and I didn't have to add another <div> anywhere.
.container {
position: relative;
border: solid 1px red;
min-height: 256px;
width: 256px;
overflow: auto;
}
.full-height {
position: absolute;
top: 0;
left: 0;
right: 128px;
bottom: 0;
background: blue;
}
<div class="container">
<div class="full-height">
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus
maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio cupiditate
placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate quidem.
</div>
.bottomDiv {
position: relative;
bottom: 0;
}
.parentDiv {
display: flex;
flex-direction: column;
}
.theDivPlacedOnTopofBottomDiv {
flex-grow: 1 !important;
}
Related
I have a div named profile-picture-container and a picture inside it.
The div has an explicit width and height, and the border-radius set to 50% to make it a circle.
I place this div in a Bootstrap(3.3.7) col. Since it has an explicit width and height for example 100px, when I resize the window, and bootstrap jumps to a smaller grid setting, the profile-picture-container overflows the column. As far as I know, to make a div a circle, its height and width needs to be the same.
However I can't use percentages since setting the width to 70% is ok, but setting the height to 70% is a totally different size, since it sets to the column's height's 70%.
Is there a way to make it dynamic and avoid writing many media queries?
.profile-picture-container {
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
background-color: #222;
}
.col-sm-9 {
margin-top: 20px;
}
<body>
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="profile-picture-container">
<img src="assets/face-1.jpg" class="profile-picture" alt="">
</div>
</div>
<div class="col-sm-9">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequuntur temporibus amet
ad dolor fuga tenetur veniam magni quo totam facilis blanditiis suscipit iusto debitis vero nam
necessitatibus possimus ut odit tempora aliquam ullam natus, officiis tempore dignissimos. Unde et
obcaecati magnam consectetur, velit, deleniti excepturi, error optio id est porro? Ea modi rem accusamus
debitis atque nihil quaerat ad sed labore cum, impedit blanditiis consequuntur! Quia molestias aliquid
velit iure possimus consectetur! Nostrum atque, dolores doloremque eius commodi ducimus reprehenderit
repellendus ratione! Reprehenderit unde fugit, quisquam magni ducimus culpa corrupti aut explicabo
tenetur alias quo expedita quod corporis, officiis quos!</div>
</div>
</div>
</body>
Specify image height and width in img tag.
<img src="assets/face-1.jpg" class="profile-picture" alt="" width="200" height="200">
And for css add this following css to get solution.
.profile-picture-container{
display: block;
height: 0;
overflow: hidden;
position: relative;
z-index: 1;
padding-bottom: 100%;
}
.profile-picture-container img{
bottom: 0;
display: block;
height: 100%;
left: 0;
margin: auto;
max-width: 100%;
position: absolute;
right: 0;
top: 0;
border-radius: 50%;
width: 100%;
}
So I have a fixed div with title and image below the title, and I want to then have another div, in the flow immediately under the fixed div. The fixed div with title and image will change size as the browser width changes, up to a maximum width of 700px. As the fixed div with image changes size the div containing text under the fixed div should maintain a a relative position below the bottom of the image.
I've tried implementing a wrapper around the fixed div, and also tried margin-top for the div containing the text but no matter what I try the text flows under the fixed div.
Any help on what I'm doing wrong would be much appreciated! This is what I currently have:
html, body {
height: 100%;
width:100%;
}
.container {
width: 100%;
margin: 0 auto;
max-width: 700px;
}
.title-wrapper {
width: 100%;
position: fixed;
}
.title {
width:100%;
max-width: 700px;
}
.image {
width: 100%;
}
.image img {
width:100%;
}
.text {
text-align: center;
}
h2 {
text-align: center;
background-color: grey;
width: 100%;
}
h3 {
text-align: center;
background-color: green;
width: 100%;
max-width: 700px;
}
<body>
<div class="container">
<div class="title-wrapper">
<div class="title">
<h2>Planes</h2>
<div class="image">
<img src="https://images.pexels.com/photos/47044/aircraft-landing-reach-injection-47044.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" alt="Plane1">
<!-- <img src="https://images.pexels.com/photos/40753/military-raptor-jet-f-22-airplane-40753.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" alt="Plane2">
<img src="https://images.pexels.com/photos/164646/pexels-photo-164646.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" alt="Plane3"> -->
</div>
</div>
</div>
<div class="text">
<div>
<h3>TEXT 1</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium veniam consequuntur libero? Explicabo consectetur rerum odit? Qui ea dolore culpa. Provident, exercitationem reiciendis voluptatum nulla quo nihil iste? Non doloremque officia ex dicta, ea molestias corporis. Quisquam, tenetur! Consequatur totam quaerat ullam incidunt quas nostrum expedita, quidem iste tempora est blanditiis corrupti sunt id! Esse necessitatibus non harum, ad quisquam unde, eius placeat est explicabo ex repudiandae suscipit, ipsum tempora a quibusdam facere porro officia magnam dolorum fuga iste. Quam, consequatur provident reiciendis quis doloribus at hic itaque soluta maiores libero voluptas assumenda, ut alias mollitia corrupti nulla fuga autem sapiente recusandae, aspernatur ad sed quasi earum. Nostrum, alias veritatis est qui quae ratione. Dignissimos et eum modi, beatae odio porro totam, minus debitis eius expedita mollitia ea est veritatis, ut possimus delectus! Nesciunt, ad quos quasi soluta error cum veritatis aliquam, temporibus optio, commodi fuga perferendis aperiam dignissimos debitis?</p>
</div>
</div>
</div>
</body>
Use z-index to control the stacking context. You can also use planes image as background on .text div.
CSS for z-index below:
.title-wrapper {
width: 100%;
position: fixed;
z-index: 1;
}
.text {
text-align: center;
position: relative;
z-index: 10;
}
I need help aligning my button to the middle (horizontally and vertically) of my screen. The button is over an image. I know there are similar questions like this on here, but I tried every advice and nothing seemed to work. I think it might be because my button is on top of an image that is at 100% in width and height, in other words, the image is a fullscreen image that takes up the whole page.
My button is at the top left corner of the screen.
body {
width:100%;
height:100%;
background-image: url("space.jpg");
}
.button {
margin:auto;
display:block;
}
<div class="wrapper">
<button class="button">Button</button>
</div>
<img src="space.jpg">
Update:
Create a <div> with fixed dimensions and add your background to it.
Adjust the size of the <div> according to your needs.
Put your button inside that <div>
Position the button inside the <div> and give it position:absolute - in relation to its parent
Use the transformproperty as well as top / left / right / bottom
/* relevant starts here CSS */
.mycontent {
width: 100vw;
max-width: 100%
}
.button {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
background: #fff;
font-size: 1.2em;
border: 1px solid #777;
padding: 0 .6em;
color: #000;
opacity: .6;
}
.button:hover {
opacity: 1;
cursor: pointer;
}
.topcontent {
height: 100vh;
width: 2560px;
max-width: 100%;
background: url(http://supersocl.com/wp-content/uploads/2016/09/2560X1440-Wallpaper-Elegant-6G0.jpg);
background-size: cover;
}
.othercontent {
background: #010101;
padding: 20px 40px 20px 40px;
}
/* irrelevant starts here CSS */
body {
max-width: 100%;
padding: 0;
margin: 0 auto;
color: #999;
}
body::-webkit-scrollbar {
width: 0;
height: 0;
}
p {
margin: 0 auto;
padding: 20px;
text-align: justify;
text-justify: inter-word;
}
<body>
<div class="mycontent">
<div class="topcontent">
<button class="button">Menu</button>
</div>
<div class="othercontent">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem
ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>
<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt
mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas
assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et vo</p>
</div>
</div>
</body>
You can do that using CSS3 flex-box concept.
absolute center property
set parent (here it's wrapper): display:flex;
then set child (here it's button): margin:auto;
It will be positioned on absolute center. I've added the snippet below.
html,body {
height:100%;
width:100%;
}
.wrapper {
display:flex;
align-items:center;
width:100%;
height:100%;
background-image: url("https://i.stack.imgur.com/wwy2w.jpg");
background-repeat:no-repeat;
background-size:cover;
}
.button {
width:100px;
margin:auto;
}
<div class="wrapper">
<button class="button">Button</button>
</div>
please add this code into your css :
button {
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
top: 50%;
}
img {
width: 100%;
}
Hope it will work for you
Thanks
Try this one:
body {
width: 100%;
height: 100%;
position: relative;
}
img {
width: 100%;
}
button{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
background: #000;
padding: 6px 12px;
border: solid 1px #000;
border-radius: 5px;
color: #fff;
min-width: 150px;
}
Try this:
.wrapper {
width:100%;
height:100vh;
background-image: url("https://unsplash.it/800/400/");
background-repeat:no-repeat;
background-position:center;
background-size:cover;
display:block;
}
.button {
width:100px;
position: absolute;
bottom:50%;
left:50%;
}
<div class="wrapper">
<button class="button">Button</button>
</div>
Maybe I'm overlooking something I don't know hehe.. But the point is this I have two columns beside each other. One, the left, should be the master of the height of the columns wrap, the right, which contains an img, should not be counted in height for the wrap's height... I can't use fixed heights, not even with Jquery or something cause the layout should change if the user drags his browser window smaller.. Thanks!
So my code is like
<div class="column_wrap">
<div class="column">
Some text
</div>
<div class="column">
IMG
</div>
</div>
Example of what I want to achieve
If the image is not to contribute to the height/width it would need to be either a background image or absolutely positioned.
I've assumed that the two columns will have equal width for this scenario and I have used flexbox to ensure that the columns are also equal height.
Absolute Position
The image need an additional wrapper which is the same size as the second column like so:
* {
box-sizing: border-box;
}
.column_wrap {
display: flex;
margin: 10px auto;
bordeR: 1px solid grey;
}
.column {
flex: 0 0 50%;
position: relative;
overflow: hidden;
}
.imgwrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.imgwrap img {
max-width: 100%;
}
<div class="column_wrap">
<div class="column">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis rem, repudiandae dolores ea, exercitationem quod quos distinctio voluptate. Ratione doloribus fugiat quis eaque quia modi numquam laudantium temporibus veritatis praesentium aliquid expedita dolores, voluptates sequi, natus eum dolorum maxime. Earum iure quasi odit excepturi rerum, debitis repellat enim veniam impedit.
</div>
<div class="column">
<div class="imgwrap">
<img src="http://lorempixel.com/output/fashion-q-c-640-480-8.jpg" alt="" />
</div>
</div>
</div>
Codepen Demo
Background Image
* {
box-sizing: border-box;
}
.column_wrap {
display: flex;
margin: 10px auto;
bordeR:1px solid grey;
}
.column {
flex:0 0 50%;
position: relative;
overflow: hidden;
}
.column:nth-child(2) {
background-image: url(http://lorempixel.com/output/fashion-q-c-640-480-8.jpg);
background-size: cover;
}
<div class="column_wrap">
<div class="column">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis rem, repudiandae dolores ea, exercitationem quod quos distinctio voluptate. Ratione doloribus fugiat quis eaque quia modi numquam laudantium temporibus veritatis praesentium aliquid expedita
dolores, voluptates sequi, natus eum dolorum maxime. Earum iure quasi odit excepturi rerum, debitis repellat enim veniam impedit.
</div>
<div class="column">
</div>
</div>
Codepen Demo
So I have a full-width row and I want to have an image that extends a bit outside the top and bottom boundaries of the row, so as to look like a sticker holding a ribbon to the website. How do I achieve this "overlap" effect in CSS?
As far as I can tell, you can nest divs within each other or float them side-by-side, but you can't put a taller div on top of a thinner one and get this overlap effect to work. What am I missing?
I'm using Bootstrap... if there is some kind of grid-based solution to this that would be awesome.
EDIT: Code! Here's the HTML.
<div class="row-fluid redRibbon">
<div class="bodyContainer">
<img id="isocert" src="img/isocert.png">
</div>
</div>
And relevant CSS (row-fluid is a default class in Bootstrap):
.bodyContainer{
padding: 15px;
width: 800px;
margin: auto;
}
.redRibbon{
background-color: #AF002A;
color: white;
}
#isocert{
overflow: visible;
}
I would post a picture but I don't have enough reputation :(
Give your .row the style or CSS rule position: relative; and now give your image you want to overlap that row position: absolute; but keep it placed inside the row. Now it will be placed relative to your .row but you can adjust its position with the CSS attributes top, right, bottom, and left. Furthermore you can make it bigger than the row (via CSS or image attributes) and it will not influence the dimensions of your .row. Should it be cut by an other element you can give it an higher z-index. With this values you should be able to get your desired effect.
EDIT
So your code could look like something like this in the end:
.bodyContainer{
padding: 15px;
width: 800px;
margin: auto;
}
.redRibbon{
margin-top: 200px;
background-color: #AF002A;
color: white;
position: relative;
}
#isocert{
overflow: visible;
position: absolute;
top: -50px;
}
Here is a fiddle with an example: http://jsfiddle.net/L1wn66v8/
One option (in the absence of any supplied code) is to position the image with relative positioning.
div {
width: 50%;
border: 1px solid grey;
margin: 25px auto;
}
img {
float: left;
position: relative;
top: 50px;
left: -50px;
width: 100px;
border: 1px solid red;
}
<div>
<img src="http://www.clipartpal.com/_thumbs/pd/education/award_ribbon_blue_T.png" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus hic dicta dignissimos consequuntur mollitia enim fuga inventore tempore totam ad libero eveniet voluptatum iusto quis unde deleniti doloribus quos veniam perspiciatis rerum in cum
facilis maxime. Reiciendis corporis dolor tenetur at sunt quidem asperiores natus ad soluta fuga maiores expedita vero explicabo rem consequuntur accusantium similique alias odio cupiditate quaerat eligendi! Laborum illum earum pariatur minus sunt
eaque praesentium cum libero nihil voluptatibus dolorem eum. Eveniet nobis mollitia</p>
</div>
Note that the text continues to wrap around the image as though it was still in the same place. The element is only moved visually, any other elements will still treat it as though it had not been moved.
As an alternative, you could position it absolutely, but relative to the parent. In this case, the element is taken out of the flow and other elements will not react to it in the same way..
div {
width: 50%;
border: 1px solid grey;
margin: 25px auto;
position: relative;
}
img {
position: absolute;
top: 50px;
left: -50px;
width: 100px;
border: 1px solid red;
}
<div>
<img src="http://www.clipartpal.com/_thumbs/pd/education/award_ribbon_blue_T.png" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus hic dicta dignissimos consequuntur mollitia enim fuga inventore tempore totam ad libero eveniet voluptatum iusto quis unde deleniti doloribus quos veniam perspiciatis rerum in cum
facilis maxime. Reiciendis corporis dolor tenetur at sunt quidem asperiores natus ad soluta fuga maiores expedita vero explicabo rem consequuntur accusantium similique alias odio cupiditate quaerat eligendi! Laborum illum earum pariatur minus sunt
eaque praesentium cum libero nihil voluptatibus dolorem eum. Eveniet nobis mollitia</p>
</div