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%;
}
Related
I have a button in a sidebar div which I want to position so half of it sticks out of the container. The problem is because the sidebar needs its own scrollbar this makes the button get cut off. Example here: http://jsfiddle.net/z5dy7t4x/19/
Why does the button get cut off when adding overflow-y: scroll; to the container?
Is it possible to show the button without modifying the HTML?
Couldn't figure out a CSS only solution. Solved it by adding an inner container and putting the scroll on that. Working example: http://jsfiddle.net/37ow2pqy/2/
<div class="sidebar">
<button class="close">
CLOSE
</button>
<div class="sidebar-content">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatum enim nulla incidunt illo, at consequuntur eaque distinctio, dolorem, nemo quam ipsum accusantium vitae! Nam rem, dolor quod quas nobis, dolorem veniam molestias laboriosam blanditiis autem sequi tenetur, dolore distinctio beatae voluptates doloremque excepturi officia ratione quisquam. Eveniet aperiam rerum iusto, odit excepturi saepe, ullam et quo sint, delectus vel velit repellat quibusdam aut earum architecto corrupti? Dignissimos ullam sit autem numquam nihil adipisci dicta non officiis, tenetur excepturi hic ex saepe corporis animi asperiores nesciunt quo, voluptate libero sapiente. Totam, modi quaerat! Exercitationem fuga autem magnam id repudiandae doloremque voluptatem?
</div>
</div>
.sidebar{
width: 300px;
border: 1px solid #000;
position: absolute;
right: 0;
}
.close {
position: absolute;
top: 20px;
left: -25px;
}
.sidebar-content {
overflow-y: scroll;
height: 300px;
}
You added position absolute for the button, that's why your button is hidden
#parent{
position: absolute;
right: 0;
}
#close {
background-color: red;
color: white;
position: absolute;
left: -50px;
}
#child{
border: solid 1px black;
width: 200px;
height: 200px;
overflow-y: scroll;
margin-left: auto;
margin-right: auto;
}
<div id=parent>
<button id=close>
abololute child
</button>
<div id=child>
This is the child
</div>
</div>
Error to be addressed first:
In your CSS, you have position: relative;, and also position: absolute;, the latter being the one I believe you are going for, you need to remove the position: relative;.
Your First Question
Why does the button get cut off when adding overflow-y: scroll; to the container?
Because, by default, overflow is set to overflow: visible;, so you are changing that (overflow-y of course, being part of overflow).
Your Second Question
Is it possible to show the button without modifying the HTML?
Well, if you want the button halfway outside the <div>'s box, I would guess that you don't want the button to scroll with the content. If this is the case, then you will need to put the <button>...</button> outside of the <div> that the content (Lorem ipsum, etc.) is in (and change its positioning).
(Another way is to just use position: fixed; instead, but I seriously doubt that that's what you want)
Here it is:
.box{
width: 300px;
border: 1px solid Black;
position: absolute;
right: 0;
}
#close {
position: absolute;
top: 20px;
left: -31px;
}
.content {
overflow-y: scroll;
height: 250px;
}
<div class="box">
<button id="close">
CLOSE
</button>
<div class="content">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatum enim nulla incidunt illo, at consequuntur eaque distinctio, dolorem, nemo quam ipsum accusantium vitae! Nam rem, dolor quod quas nobis, dolorem veniam molestias laboriosam blanditiis autem sequi tenetur, dolore distinctio beatae voluptates doloremque excepturi officia ratione quisquam. Eveniet aperiam rerum iusto, odit excepturi saepe, ullam et quo sint, delectus vel velit repellat quibusdam aut earum architecto corrupti? Dignissimos ullam sit autem numquam nihil adipisci dicta non officiis, tenetur excepturi hic ex saepe corporis animi asperiores nesciunt quo, voluptate libero sapiente. Totam, modi quaerat! Exercitationem fuga autem magnam id repudiandae doloremque voluptatem?
</div>
</div>
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;
}
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
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;
}