I'm trying to make a div with some children inside always fit to the parent div which covers the whole page. It already works that the child div's width fits into the parent's. But the height should also fit inside the parent div. I want to avoid using overflow: auto because then the user will have to scroll in some cases. The child div (with it's children inside) should always fit in the parent's height and width.
How can I make this in CSS?
<div class="parent">
<div class="child">
<button>Toggle</button>
<img />
<p>Some text here...</p>
</div>
</div>
The <div class="parent"> covers the whole page. The <div class="child"> should scale into the <div class="parent"> width and height.
You can try this. You would need a media query for mobile but does what I think you are asking...
<html>
<head>
<style>
body {
font-weight: 400;
background-color: black;
color: white;
font-family: sans-serif;
margin: 0;
}
.grid {
min-height: 100%;
grid-column: 1 / -1;
grid-gap: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(33%, 1fr));
}
.grid>span {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.image {
background-image: url('https://live.staticflickr.com/7206/6859864719_5d68aedbd7.jpg');
background: cover;
background-position: center center;
background-repeat: no-repeat;
}
.toggle {
background: #4096C0;
border-radius: 2px;
padding: 12px 24px;
color: white;
width: auto;
text-align: center;
cursor: pointer;
}
.toggle:hover {
background: #00537C;
}
.text {
background: #40B6C0;
padding: 72px;
color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="grid">
<span class="toggle">TOGGLE</span>
<span class="image"></span>
<span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu fermentum dolor. Cras aliquet tempus elit ut eleifend. In commodo malesuada nisi non vulputate.</span>
</div>
</div>
</body>
</html>
Related
I'm trying to make rectangular inside the circle on the left , when im resizing the screen of the website the shapes moving out and the texts checking out from the shapes , any ways to make texts and shapes responsive to all screens
The code : https://codepen.io/enespro/pen/rNWmLvP
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="circle">
<h3 class="mt-4">Bzns Monster School<br><span style="font-size: 20px; color: #DDDD;">From Zero To Hero</span></h3>
</div>
<div class='rect-box'>
</div>
<div class='rect-content'>
<div class="content">
<span>Lorem ipsum dolor sit amet, consetetur<br> sadipscing elitr, sed diam nonumy eirmod<br> tempor invidunt ut labore et dolore magna.</span>
</div>
</div>
<button class="btn btn-outline-secondary ml-1">Read More</button>
</div>
I see in your code there's a lot of position absolute that will just drive you crazy in long term to maintain that code. What about using the magic of flex, instead? :)
I rewrote your code here below. Check it clicking on "Run Code Snippet" to see it in action.
I suggest on the mobile to separate the banner from the circle to make it responsive and readable.
Enjoy!
.wrapper {
position: relative;
display: flex;
align-items: center;
min-height: 300px;
flex-direction: column;
}
.circle {
border-radius: 50%;
background-color: #000;
min-width: 200px;
min-height: 200px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.circle span {
color: #fff;
}
.rectangle {
width: 100%;
padding: 10px;
text-align: center;
background-color: #eee;
}
#media screen and (min-width: 600px) {
.circle {
position: absolute;
}
.rectangle {
padding: 30px 0 30px 220px;
}
.wrapper {
flex-direction: row;
}
}
<div class='wrapper'>
<div class='circle'><span>Lorem Ipsum</span></div>
<div class='rectangle'>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
</div>
I have to create a div over which there is a 3px border, and this boundary is positioned over the content in the div, how can I do this without knowing the size of the block?
An example is in the image below:
My code: https://codepen.io/pen/yLObXvv
HTML:
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-4">
<div class="case-study">
<div class="case-study-image">
<img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" class="img-fluid" alt="Intro image"/>
</div>
<div class="case-study-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
</div>
CSS:
body {
background-color: #04142d;
}
.case-study {
color: #fff;
display: flex;
margin-top: 2rem;
flex-direction: row;
background-color: #0E53DD;
border-radius: 1rem;
overflow: hidden;
}
.case-study-image {
flex: 0 0 50%;
width: 50%;
}
.case-study-image img {
height: 100%;
max-height: 20rem;
object-fit: cover;
oject-position: 0 0;
}
.case-study-content {
flex: 0 0 50%;
padding: 1rem;
}
Please Use CSS ::after Selector with position: absolute
The coordinates of an absolute positioned element are relative to its parent. It is positioned automatically to the starting point (top-left corner) of its parent element.
body {
background-color: #04142d;
}
.case-study {
color: #fff;
display: flex;
margin-top: 2rem;
flex-direction: row;
background-color: #0E53DD;
border-radius: 1rem;
position:relative;
max-width:500px;
}
img {
max-width:100%;
}
.case-study-image {
flex: 0 0 50%;
width: 50%;
}
.case-study-image img {
height: 100%;
max-height: 20rem;
object-fit: cover;
oject-position: 0 0;
}
.case-study-content {
flex: 0 0 50%;
padding: 1rem;
}
.case-study:after {
content: '';
border: 3px solid yellow;
position: absolute;
width: calc(100% - 6px);
height: calc(100% - 6px);
border-radius: 5px;
right: -10px;
top: -10px;
}
<div class="case-study">
<div class="case-study-image"> <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" class="img-fluid" alt="Intro image"/> </div>
<div class="case-study-content">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<title>style</title>
<style>
div {
width: 200px;
height: 200px
background-color:white;
}
.move {
transform: (30px, 180px)
background: transparent;
border: 3px solid red;
}
</style>
</head>
<body>
<div class="move"></div>
<div></div>
</body>
</html>
you can use this and try to style it the way you want
I'm working on the sidebar where we have a logo at the top and some bottom div. The middle div "content" has overflow: scroll and contains paragraph(s). So what I need... If I have only one paragraph (or two p) the button div should be positioned absolutely at the bottom of the content and if I have more paragraphs which have a bigger height than "content" div so then the button div will have position static (so will be scrollable).
And I need it only by CSS. Is it possible?
We need IE11+ support.
<div class="sidebar">
<div class="logo">logo</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tempor egestas ornare. Suspendisse potenti. Integer non euismod nulla. Quisque pretium est sit amet congue rhoncus.</p>
<div class="button">
Button
</div>
</div>
<div class="bottom"></div>
</div>
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 300px;
background-color: grey;
}
.logo {
position: absolute;
width: 100%;
height: 55px;
background-color: red;
}
.bottom {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background-color: green;
}
.content {
position: absolute;
top: 55px;
bottom: 100px;
overflow-y: scroll;
}
.button {
display: inline-block;
padding: 1em 0 1em;
text-align: center;
width: 100%;
border-radius: 50px;
background-color: white;
}
You can use flexbox. Add this to your CSS:
.content {
display:flex;
flex-wrap: wrap;
}
.button {
align-self: flex-end;
}
That will render the button always at the end of the content div.
I'm trying to create a fixed header at the top of my page that has 3 "columns". The first is left justified on the left side, the second is centered relative to the whole page - regardless of the other two column sizes, and the third is right justified, stuck on the right. I want all of the content centered vertically.
Floats didn't really work because then the middle column was not properly centered. So I used two position: absolute div's for the left and right, and just left one div in the middle.
My problem is that I can't get the header to expand to contain the left div, which is taller, and I can't get the content to center vertically.
What am I doing wrong? Thanks!
Here is my code:
.header {
z-index: 8;
top: 0;
left: 0;
position: fixed;
padding-top: 1rem;
padding-bottom: 1rem;
width: 100%;
background: white;
z-index: 8;
border-bottom: 1px solid black;
text-align: center;
}
.left {
position: absolute;
top: 1rem;
left: 1rem;
border: 1px solid gray;
background: red;
padding: 1rem;
height: 10rem;
}
.right {
position: absolute;
right: 1rem;
top: 1rem;
background: yellow;
border: 1px solid gray;
}
.middle {
background: green;
border: 1px solid gray;
}
<div class="header">
<div class="left">Left</div>
<div class="middle">MIDDLE......</div>
<div class="right">Right</div>
</div>
Here is the link to my fiddle.
I would suggest using a flexbox for the vertical alignment.
header {
display: flex;
justify-content: space-between;
align-items: center;
}
header>div {
padding: 1rem; /* To improve visibility */
width: calc(100% / 3);
}
.col1 {
text-align: left;
}
.col2 {
text-align: center;
}
.col3 {
text-align: right;
}
<header>
<div class="col1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="col2">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</div>
<div class="col3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</header>
Instead of the css that you have written, you can finish the above in just 8 lines. You just need to write the following:
.header{
display:flex;
}
.left, .middle, .right{
width: calc(100% / 3);
text-align:center;
}
and you can add the following class to check if everything is according what you planned to do:
*{
border: 1px solid red;
}
Here is the link to the fiddle displaying the result of the above code.
Check the result in the following stack overflow snippet:
* {
border: 1px solid red;
}
.header {
display: flex;
}
.left,
.middle,
.right {
width: calc(100% / 3);
text-align: center;
}
<div class="header">
<div class="left">Left</div>
<div class="middle">MIDDLE......</div>
<div class="right">Right</div>
</div>
I am struggling with a layout problem and I hope to find some help to solve it.
I am designing a page with row/lane based content.
Each row has multiple div elements with some content.
So it has to be possible to scroll through the rows vertically as well as horizontally.
Now the problem is, that the first div element inside every row is kind of like the row header, which provides some description about the content of that row.
I want this div element to always stay visible during horizontal scrolling.
Position: fixed is not a option since it would prevent the "row-header" to scroll with its content during a vertical scroll.
What it should look like during a horizontal scroll
Here's the fiddle with my code: https://jsfiddle.net/rco56cbp/
html,
body {
font-family: 'Arial', sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
header {
background: #F7F7F7;
box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.50);
/**/
width: 100%;
height: 90px;
/**/
display: flex;
align-items: center;
justify-content: center;
position: fixed;
z-index: 55;
top: 0;
}
/* Left Sidebar */
.side-bar-bg {
width: 130px;
height: 100vh;
z-index: -1;
position: fixed;
background: #F7F7F7;
border: 1px solid #E0E0E0;
box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.50);
}
/* Wrapper around main content */
.content-container {
margin-top: 110px;
height:100%;
position:absolute;
width:100%;
}
/* Content elements*/
.lane,
.lane-head,
.phase,
.lane-content {
display: flex;
}
.lane {
margin-bottom: 1.25em;
//flex-direction: row;
align-items: center;
}
.lane-head {
min-width: 130px;
background-color: #ffffff;
box-shadow:0px 0px 0px 1px #BFC0C2 inset;
/* Flex & Layout */
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-self: stretch;
/**/
margin-right: 1em;
}
.lane-label {
font-weight: 500;
font-size: 13px;
color: rgba(82,94,106,0.65);
line-height: 22px;
margin-left: 1em;
margin-right: 1em;
text-align: center;
}
.lane-content {
z-index: -3;
}
/* Grid System */
.col-1 { min-width: 200px; max-width: 200px; }
.col-2 { min-width: 420px; max-width: 420px; }
.col-3 { min-width: 640px; max-width: 640px; }
.col-1, .col-2, .col-3 { margin-right: 20px; }
.textbox {
padding: 0.7em 1em 1.5em 1em;
color: #FFFFFF;
min-width: 200px;
max-width: 200px;
background-color: #78BE20;
}
.phase {
background: #005691;
align-self: stretch;
align-items: center;
padding: 0.6em 1em;
}
/* Typo */
.phase {
font-weight: 500;
font-size: 16px;
color: #FFFFFF;
}
.textbox h3 {
font-weight: bold;
font-size: 16px;
margin: 0 0 0.3em 0;
}
.textbox p {
font-weight: normal;
font-size: 13px;
margin: 0 0;
}
<header>
<h1>Header</h1>
</header>
<div class="side-bar-bg"></div>
<!------ CONTENT ------>
<div class="content-container">
<div class="lane">
<div class="lane-head"><span class="lane-label">Small Boxes</span></div>
<div class="lane-content">
<div class="phase col-2">Lorem Ipsum</div>
<div class="phase col-3">Bacon Ipsum</div>
<div class="phase col-2">Egg Ipsum</div>
</div>
</div>
<div class="lane">
<div class="lane-head"><span class="lane-label">Bigger Boxes</span></div>
<div class="lane-content">
<div class="textbox col-1">
<h3>Aenean commodo</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<div class="textbox col-1">
<h3>Consequat</h3>
<p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
</div>
<div class="textbox col-1">
<h3>Consequat</h3>
<p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
</div>
<div class="textbox col-1">
<h3>Consequat</h3>
<p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
</div>
<div class="textbox col-1">
<h3>Consequat</h3>
<p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
</div>
<div class="textbox col-1">
<h3>Consequat</h3>
<p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
</div>
<div class="textbox col-1">
<h3>Consequat</h3>
<p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
</div>
</div>
</div>
</div>
The fixed left sidebar shall serve as a background to the "lane-headers".
The reason I want the lane-headers and the lane-content to be inside one div container is that later the whole canvas becomes dynamic and interactive. The content will be generated dynamically and the user will be able to interact with the canvas with drag-drop and so on.
I would appreciate your help very much, thanks in advance!
Hi you need to use javascript as well, once you scroll down or up add a class say posi_stat which will be position:static.and when you do horizontal scrolling just remove the class. In default case it will be position :fixed .
Something like this , you need to remove the class , and add on scrolldown too
$(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
//your code , what should be done//
}
});
});
Similarly to it for .scrollBottom(); .scrollRight(); .scrollLeft();
Okay I kind of found a solution to it thanks to this: Fixed position in only one direction in future releases of CSS?
Although the javascript solution did not work for me (I still can't figure out why), the CSS solution works pretty good.
By adding the following lines to the .lane-head class the problem was solved:
left: 0;
position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky;
position: -ms-sticky;
position: sticky;
Using the new "position: sticky" property you can perfectly stick any element basically anywhere you want.
Unfortunately Chrome still does not support this yet, but Safari and Firefox do.