I'm trying to make a rectangular div that's 95% the width of the viewport and 20% high. But I want another rectangular div inside of that, that is vertically and horizontally centered with a slight2px margin.
.Outer {
border: 1px solid #ccc;
max-width: 95vw;
max-height: 20vh;
width: 95vw;
height: 20vh;
margin: auto;
display: block;
}
.Inner {
border: 1px solid hotpink;
width: 95%;
height: 95%;
margin: auto;
}
It depends upon requirements. But according to question, here is the answer. Please take a look and let me know in case of any issue
.Outer {
width: 95vw;
height: 20vh;
border: 1px solid #ccc;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.Inner {
border: 1px solid hotpink;
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
}
<div class="Outer">
<div class="Inner"></div>
</div>
Tried to use relative measuring units just in case you are dealing with a responsive design. The .outer box is display: table and the Inner is display: table-cell. They sit perfectly together and the 2px margin your requested is provided by a 2px padding from .Outer
html {
box-sizing: border-box;
font: 500 16px/1.428'Consolas';
height: 100vh;
width: 100vw;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
position: relative;
font-size: 1rem;
line-height: 1;
height: 100%;
width: 100%;
}
.Outer {
position: absolute;
top: 20%;
left: 3%;
outline: 1px solid #ccc;
max-width: 95vw;
max-height: 20vh;
width: 95vw;
height: 20vh;
margin: auto;
display: table;
padding: 2px;
}
.Inner {
border: 1px solid hotpink;
width: 95%;
height: 95%;
margin: auto;
display: table-cell;
}
<section class="Outer">
<section class="Inner"></section>
</section>
I'm not 100% this is what your looking for because this has Magic Numbers, but here is a JSFiddle of what I came up with using your provided code.
#Outer {
border: 1px solid #ccc;
max-width: 95vw;
max-height: 20vh;
width: 95vw;
height: 20vh;
margin: auto;
display: block;
position: relative;
}
#Inner {
border: 1px solid hotpink;
width: 95%;
height: 50%;
position: aboslute;
margin-top: 5vh;
margin-left: 2.5vw;
}
<div id=Outer>
<div id=Inner>
</div>
</div>
JSFiddle
Hopefully this helps and you could mess around with it to use percentages on the viewpoints instead of magic numbers.
When I want to center a div vertically, I have a couple classes that help me to do it.
.outer {
border: 1px solid #ccc;
max-width: 95vw;
max-height: 20vh;
width: 95vw;
height: 20vh;
margin: auto;
display: block;
}
.inner {
border: 1px solid hotpink;
width: 95%;
height: 90%;
margin: auto;
}
.valign-wrap {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.valign-wrap .valign {
display: block;
}
<div class="outer valign-wrap">
<div class="inner valign center"></div>
</div>
JSFiddle
I always recommend add these classes to your projects, they are very useful. Good luck!
Related
I need to make a border a little different in some cards for a component that I'm developing, but I'm not finding a good solution for a border like this, follow the need in the image below.
yes you can make it using before & after pseudos' in CSS
here is example: https://codepen.io/anoopkumarseth/pen/MWQNXWb
.image_outer {
border: 1px solid red;
padding: 50px 80px 50px 30px;
background: #f1f1f1;
width: max-content;
}
.image {
position: relative;
height: 600px;
width: 300px;
}
.image:before, .image:after {
content: "";
height: 100%;
width: 100%;
border: 5px solid;
display: block;
position: absolute;
top: 15px;
left: 30px;
}
.image:after {
top: 30px;
width: calc(100% + 30px);
}
.image img {
display: block;
position: relative;
z-index: 999;
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="image_outer">
<figure class="image">
<img src="https://images.unsplash.com/photo-1656004035327-593b0d1818ce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=742&q=80">
</figure>
</div>
I am creating a social site and people can upload images. When they upload those image it is inside of a div. How do I fill the whole div up so i don't see white spaces on the sides ?
This is how it looks now:
First Example
Second e.g
My code:
.postedImageDiv {
max-width: 500px;
overflow: hidden;
max-height: 400px;
border-radius: 10px;
border: 1px solid gray;
background: #fff;
margin-bottom: 1em;
}
.profilePostedImage img {
max-height: 450px;
max-width: 450px;
display: block;
margin: 5px auto;
}
.postedImage img {
align-self: center;
object-fit: contain;
max-height: 600px;
max-width: 600px;
display: block;
margin: 5px auto;
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
You might try these:
max-width: 100%;
max-height: 100%;
display: block;
.outside {
max-width: 500px;
overflow: hidden;
max-height: 400px;
border-radius: 10px;
border: 1px solid gray;
background: #fff;
margin-bottom: 1em;
}
.img-inside{
width: 100%;
height: 100%;
display: block;
}
<!-- vertical image example -->
<div class="outside">
<img class="img-inside" src="https://i.guim.co.uk/img/media/86c3481516dce247943ac2978b4f48d16a3ac265/0_170_5120_3074/master/5120.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=637dc5731d52754675ef36344a6af3c8">
</div>
<!-- landscape image example -->
<div class="outside">
<img class="img-inside" src="https://www.straight.com/files/v3/styles/gs_standard/public/images/15/03/shutterstock_grizzlybear_0.jpg?itok=vz6hpl50">
</div>
I know that fixed positioning does not work relative to the parent, only to the browser window and the solution is absolute, but I also have a problem with that.
In the div in which I need a scroll inside, I have to put the icon always visible in the bottom right corner.
My fiddle: https://jsfiddle.net/nck7o0jL/
Below is my code.
.big {
height: 600px;
width: 600px;
border: 2px solid black;
}
.small {
height: 300px;
width: 300px;
border: 2px solid red;
overflow: auto;
position: relative;
resize: both;
}
img {
width: 30px;
height: 30px;
position: absolute;
right: 15px;
bottom: 15px;
}
<div class="small"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-close-circled-128.png">
<div class="big">
</div>
</div>
As you can see, by stretching the div.small the icon is held, but during the scroll it is not.
Will someone give a helping hand?
You can approximate this using flexbox and position:sticky
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.big {
height: 600px;
width: 600px;
flex-shrink: 0;
}
.small {
height: 300px;
width: 300px;
border: 2px solid red;
overflow: auto;
resize: both;
display: flex;
}
img {
width: 30px;
height: 30px;
margin: auto 0 15px auto;
position: sticky;
order: 1;
right: 15px;
top: calc(100% - 45px);
}
<div class="small"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-close-circled-128.png">
<div class="big">
</div>
</div>
I want to make a website with div one below the another .How do i set the height of the responsive page .There is no content inside div .I want to make solid border rectangle .This is for practise purpose.
html,
body {
width: 100%;
min-height: 100%;
margin: 0px;
padding: 0px;
-webkit-text-size-adjust: none;
font-size: 62.5%;
background: #906aaf
}
.header {
width: 100%;
height: 10%;
background-color: #7e599e;
position: fixed;
z-index: 1;
top: 0
}
.one {
width: 50%;
height: 30%;
border: 10px solid black;
margin-left: auto;
margin-right: auto;
height: auto;
width: auto;
}
.two {
width: 50%;
height: 30%;
border: 10px solid black;
}
.three {
width: 50%;
height: 30%;
border: 10px solid black;
}
.four {
width: 50%;
height: 30%;
border: 10px solid black;
}
.five {
width: 50%;
height: 30%;
border: 10px solid black;
}
<div class="header"></div>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
If I understand your question correctly and you want to position the first div in the html to show on the web page AFTER those that come next in the html -
You can use css3 flexbox. Apply the display:flex on the body and then use order on the body's children to order them.
So in your example, add this to your css -
body {
display: flex;
flex-direction: column; //(Flexbox defaults to row, apply this to change back to column)
}
.one {
order: 5;
}
.two {
order: 1;
} ...
Have a look at this for more info.
use pixel instead of %
html,
body {
width: 100%;
min-height:800px;
margin: 0px;
padding: 0px;
-webkit-text-size-adjust: none;
font-size: 62.5%;
background: #906aaf
}
.header {
width: 100%;
height: 80px;
background-color: #7e599e;
position: fixed;
z-index: 1;
top: 0
}
.one {
width: 50%;
height: 240px;
border: 10px solid black;
margin-left: auto;
margin-right: auto;
height: auto;
width: auto;
}
.two {
width: 50%;
height: 240px;
border: 10px solid black;
}
.three {
width: 50%;
height: 240px;
border: 10px solid black;
}
.four {
width: 50%;
height: 240px;
border: 10px solid black;
}
.five {
width: 50%;
height: 240px;
border: 10px solid black;
}
<div class="header"></div>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
I have 4 divs, outer, inner, title, and content. I want to place inner div inside the outer, and title and content - inside the inner div, one on top of the other. I positioned outer and inner divs relative and the other 2 - absolute.
inner div fits right inside thew outer, but title and content overflow the inner div.
How can I fix my CSS here?
#outer {
width: 90%;
margin: 20px auto;
border: 2px solid red;
height: 500px;
position: relative;
}
#inner {
width: 100%;
border: 1px solid green;
height: 300px;
position: relative;
}
#inner .title {
width: 100%;
height: 63px;
padding-left: 1%;
padding-top: 5px;
border-radius: 2px;
float: left;
border: 1px solid blue;
background-color: lightblue;
position: absolute;
top: 0;
}
#inner .content {
padding: 2em 2em;
width: 100%;
height: 100%;
margin: 0 auto;
background: #FFF;
height: auto;
display: block;
float: left;
border: 2px solid orange;
position: absolute;
top: 20%;
}
<div id="outer">
<div id="inner">
<div class="title"></div>
<div class="content"></div>
</div>
</div>
#outer {
width: 90%;
margin: 20px auto;
border: 2px solid red;
height: 500px;
position: relative;
}
#inner {
max-width: 100%;
border: 1px solid green;
height: 300px;
position: relative;
padding: 0 5px;
}
#inner .title {
width: 100%;
height: 63px;
padding-top: 5px;
border-radius: 2px;
border: 1px solid blue;
background-color: lightblue;
}
#inner .content {
width: 100%;
height: 63px;
background: #FFF;
display: block;
border: 1px solid orange;
}
<div id="outer">
<div id="inner">
<div class="title"></div>
<div class="content"></div>
</div>
</div>
to prevent the title and content from overflow each other just assign a relative position to them and assign the absolute position to its parent . just like that
#outer {
width: 90%;
margin: 20px auto;
border: 2px solid red;
height: 500px;
position: relative;
}
#inner {
width: 90%;
border: 1px solid green;
height: 300px;
position: absolute;
}
#inner .title {
width: 100%;
height: 63px;
padding-left: 1%;
padding-top: 5px;
border-radius: 2px;
float: left;
border: 1px solid blue;
background-color: lightblue;
position: relative;
top: 0;
}
#inner .content {
padding: 2em 2em;
width: 100%;
height: 100%;
margin: 0 auto;
background: #FFF;
height: auto;
display: block;
float: left;
border: 2px solid orange;
position: relative;
top: 20%;
}
<div id="outer">
<div id="inner">
<div class="title"></div>
<div class="content"></div>
</div>
</div>