I tried to use transform and padding on my element, but it didn't work quite well when you resize your window. It sometimes even goes out of my window. I tried to transform one like 60% to the right and the other one 40%, but that didn't work too. So I want my element to be stuck together with an iframe.
#weertekst{
font-weight:bold;
}
#test {
background-color: #0032A1;
height: 515.5px;
width: 200px;
border-top-left-radius:20px ;
border-bottom-left-radius:20px ;
margin: 0px;
padding: 0px;
justify-content: center;
align-items: center;
/* Positioning */
position: static;
top: auto;
bottom: auto;
right: auto;
left: auto;
float: none;
display: flex;
clear: none;
z-index: auto;
}
#intest{
width: 180px;
height: 453px;
text-align: center;
display: flex;
flex-direction: column;
}
<div id="pad">
<div id="test">
<div id="intest">
<div id="dag-datum">
<div id="dag"><h3>Vandaag</h3></div>
<div class="datum"><span id="datum">...</span></div>
</div>
<div id="weer-logo"><img id="plaatje"></div>
<div id="weer-tekst"><span id="weertekst">...</span></div>
<div id="graden"><h3><!---Temp:---> <span id="temperatuur">...</span> ºC</h3></div>
<div id="directie"><h3 id="nbold">Windrichting:<br></h3> <h3><span id="winddir"></span></h3></div>
<div id="snelheid"><h3 id="nbold">Windsnelheid:<br></h3> <h3><span id="windspeed"></span></h3></div>
</div>
</div>
</div>
<div id="kaart">
<iframe id="radarbeeld" width=503.5 height=515.5>
</iframe>
</div>
Nest your code in a wrapper and use position: sticky;. Also, you were using a lot of padding which seemed unnecessary so I removed it. See the CSS changes I made below.
#pad {
float: left;
}
#kaart {
display: block;
transform: translateX(-30px);
text-align: center;
}
#weertekst{
font-weight:bold;
}
#test {
background-color: #0032A1;
height: 520px;
width: 200px;
border-top-left-radius:20px ;
border-bottom-left-radius:20px ;
margin: 0px;
padding: 0px;
margin-right: 1.8rem;
/* Positioning */
position: sticky;
top: auto;
bottom: auto;
right: auto;
left: auto;
float: none;
display: flex;
clear: none;
z-index: auto;
}
#intest{
width: 180px;
height: 453px;
text-align: center;
display: flex;
flex-direction: column;
}
.wrapper {
display: flex;
justify-content: center;
}
<div class="wrapper">
<div id="pad">
<div id="test">
<div id="intest">
<div id="dag-datum">
<div id="dag"><h3>Vandaag</h3></div>
<div class="datum"><span id="datum">...</span></div>
</div>
<div id="weer-logo"><img id="plaatje"></div>
<div id="weer-tekst"><span id="weertekst">...</span></div>
<div id="graden"><h3><!---Temp:---> <span id="temperatuur">...</span> ºC</h3></div>
<div id="directie"><h3 id="nbold">Windrichting:<br></h3> <h3><span id="winddir"></span></h3></div>
<div id="snelheid"><h3 id="nbold">Windsnelheid:<br></h3> <h3><span id="windspeed"></span></h3></div>
</div>
</div>
</div>
<div id="kaart">
<iframe id="radarbeeld" width=503.5 height=515.5>
</iframe>
</div>
</div>
In this application, a column covering 33.3% and 66.6% of a container was created using Bootstrap 5. The second column, occupying 66.6% of the space inside the container, was divided into two separate 40% and 60% columns. Application test image and developed solution are available below.
#pad {
float: left;
}
#weertekst {
font-weight: bold;
}
#test {
background-color: #0032A1;
height: 515.5px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
margin: 0px;
padding: 0px;
justify-content: center;
align-items: center;
/* Positioning */
position: static;
top: auto;
bottom: auto;
right: auto;
left: auto;
float: none;
display: flex;
clear: none;
z-index: auto;
}
#intest {
width: 180px;
height: 453px;
text-align: center;
display: flex;
flex-direction: column;
}
.specialColumn {
float: left;
}
.left {
width: 40%;
}
.right {
width: 60%;
}
.specialRow:after {
content: "";
display: table;
clear: both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div style="margin: 75px;">
<div class="row">
<div class="col-md-4" style="margin: 0px !important; padding: 0px !important;">
<div id="pad" style="width: 100% !important;">
<div id="test">
<div id="intest">
<div id="dag-datum">
<div id="dag">
<h3>Vandaag</h3>
</div>
<div class="datum"><span id="datum">...</span></div>
</div>
<div id="weer-logo"><img id="plaatje"></div>
<div id="weer-tekst"><span id="weertekst">...</span></div>
<div id="graden">
<h3>
<!---Temp:---> <span id="temperatuur">...</span> ºC</h3>
</div>
<div id="directie">
<h3 id="nbold">Windrichting:<br></h3>
<h3><span id="winddir"></span></h3>
</div>
<div id="snelheid">
<h3 id="nbold">Windsnelheid:<br></h3>
<h3><span id="windspeed"></span></h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8" style="margin: 0px !important; padding: 0px !important;">
<div class="specialRow">
<div class="specialColumn left" style="background-color:#aaa; height: 515px;">
<h1 class="text-center">%40</h1>
</div>
<div class="specialColumn right" style="background-color:#bbb; height: 515px;">
<h1 class="text-center">%60</h1>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
I am building a website and have come across an issue. The background color does not reach the position I would like it to be. It is only across half the screen instead of the full page. I need it to be a bit higher. I am not sure how to do this.
It is only across half the screen. How do I fix this? If you need more information, feel free to ask.
#aboit {
width: 100%;
height: 200vh;
background-color: lightgrey;
}
#aboit .block3 {
display: inline-block;
width: 225px;
height: 225px;
margin: 5px;
position: relative;
left: 300px;
bottom: 320px;
background-color: #FFE8F2;
}
#aboit .block4 {
display: inline-block;
width: 225px;
height: 225px;
margin: 5px;
position: relative;
left: 300px;
bottom: 320px;
background-color: #FFE8F2;
}
.container {
text-align: center;
}
#aboit .toixte {
position: relative;
bottom: 660px;
right: 300px;
font-size: 20px;
}
#aboit .toitle {
position: relative;
bottom: 660px;
right: 300px;
font-size: 20px;
font-weight: 50px;
}
<section id="aboit">
<div class="container">
<div class="block3"></div>
<div class="block3"></div>
</div>
<div class="container">
<div class="block4"></div>
<div class="block4"></div>
</div>
<div class="container">
<div class="toitle">
<p><b>About Us</b>
<p>
</div>
</div>
<div class="container">
<div class="toixte">
<p>We provide only the best cakes to our <br>customers. Each cake is made with love <br>and care, ensuring that our customers are <br>always taken care of. Our cakes are <br>available for pickup or, delivery applies if <br>you are in a certain area</p>
</div>
</div>
</p>
</p>
</div>
</div>
</section>
remove background-color: lightgrey; from #aboit and style in this way:
#aboit {
position:relative;
}
#aboit::before{
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60% // you can change to fit
background-color: lightgrey;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
width: 100%;
max-width: 1170px;
margin: 0 auto;
}
.about {
background: lightgray;
height: 100vh;
}
.all {
display: flex;
justify-content: space-between;
}
.about-description {
text-align: center;
margin: 150px;
}
.blocks {
display: grid;
grid-template-columns: auto auto;
margin-top: 50px;
}
.block {
background-color: #ffe4f1;
width: 225px;
height: 225px;
margin: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<section class="about">
<div class="container">
<div class="all">
<div class="about-description">
<h2>About Us</h2>
<p align="center">We provide only the best cakes to our <br>customers. Each cake is made with love <br>and care, ensuring that our customers are <br>always taken care of. Our cakes are <br>available for pickup or, delivery applies if <br>you are in a certain area</p>
</div>
<div class="blocks">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</div>
</div>
</section>
</body>
</html>
Problem I am facing is that I want my Cards container to expand until the end of screen.
https://i.stack.imgur.com/F6vp0.png
Notice the white space at the end. It is due to position:relative; right:16px;
How can I tell my flex box container to include right attribute that I have used while shrinking the container to fit the screen.
I know there must be some javascript hack around this. However I was hoping for an easier solution. If it is even possible.
Here is my entire code:
*{
box-sizing: border-box;
}
html body {
margin: 0px;
padding: 0px;
}
.CardHead {
display: flex;
width: 304px;
height: 304px;
font-size: 100%;
flex: 0 0 auto;
background-color:black;
}
.Card {
position: relative;
width: 304px;
height: 304px;
background-color: red;
color: white;
font-size: 1rem;
padding: 1rem 1rem;
flex: 0 0 auto;
}
.Cards {
display: flex;
overflow: auto;
flex: 0 1 auto;
position: relative;
right: 16px;
z-index: -1;
}
.Carousel {
display: flex;
}
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React App</title>
</head>
<body>
<div class="Carousel">
<div class="CardHead"></div>
<div class="Cards">
<div class="Card" style="background-color: yellow;"></div>
<div class="Card" style="background-color: green;"></div>
<div class="Card" style="background-color: purple;"></div>
<div class="Card" style="background-color: orange;"></div>
</div>
</div>
</body>
</html>
Apologies if my question or code isn't clear.
Replace right with margin-right
* {
box-sizing: border-box;
}
html body {
margin: 0px;
padding: 0px;
}
.CardHead {
display: flex;
width: 304px;
height: 304px;
font-size: 100%;
flex: 0 0 auto;
background-color: black;
}
.Card {
position: relative;
width: 304px;
height: 304px;
background-color: red;
color: white;
font-size: 1rem;
padding: 1rem 1rem;
flex: 0 0 auto;
}
.Cards {
display: flex;
overflow: auto;
flex: 0 1 auto;
position: relative;
margin-right: 16px;
z-index: -1;
}
.Carousel {
display: flex;
}
<div class="Carousel">
<div class="CardHead"></div>
<div class="Cards">
<div class="Card" style="background-color: yellow;"></div>
<div class="Card" style="background-color: green;"></div>
<div class="Card" style="background-color: purple;"></div>
<div class="Card" style="background-color: orange;"></div>
</div>
</div>
I try to set my box to the bottom part of the div, but it appears on the top part of the div even I have set bottom:0px;
Here is the link of my code : js fiddle
<div class="container">
<p class="box bottom0" style="background-color:grey">Category1</p>
<p class="box bottom0" style="background-color:red">Category2</p>
<p class="box bottom0" style="background-color:blue">Category3</p>
</div>
margin: 0 auto; height: 500px;
}
.bottom0{
bottom: 0px;
}
.box{
font-size: 15px;
color: white;
text-align: center;
padding: 10px;
margin-bottom: 0px;
margin-right: 30px;
width: auto;
height: auto;
float: left;
display:inline-block;
}
You can use flex on the container
.container {
display: flex;
align-items: flex-end;
}
or
.container {
display: flex;
}
.bottom0{
align-self: flex-end;
}
.container {
width: 960px;
margin: 0 auto;
height: 500px;
display: flex;
}
.bottom0{
align-self: flex-end;
}
.box{
font-size: 15px;
color: white;
text-align: center;
padding: 10px;
margin-bottom: 0px;
margin-right: 30px;
width: auto;
height: auto;
float: left;
display:inline-block;
}
<div class="container">
<p class="box bottom0" style="background-color:grey">Category1</p>
<p class="box bottom0" style="background-color:red">Category2</p>
<p class="box bottom0" style="background-color:blue">Category3</p>
</div>
the bottom property has no effect on statically positioned elements (elements have position: static by default)
you need to set a position: relative on the container and position: absolute on .box in order to see that property work.
You can try this -
<div class="container">
<div class="bottom0">
<p class="box" style="background-color:grey">Category1</p>
<p class="box" style="background-color:red">Category2</p>
<p class="box" style="background-color:blue">Category3</p>
</div>
</div>
and add position:absolute in bottom0 css
.bottom0{
bottom: 0px;
position: absolute;
}
I want to center vertically text, when the elements height is unknown?
html
<div class="table">
<div class="table-resp">
<div class="second-row">
<div class="col-md-5">
<div class="left-col-text">
Center vertically
</div>
</div>
<div class="col-md-7">
<div class="right-col-text">
<div class="example">Ex1</div>
<div class="example">Ex2</div>
<div class="example">Ex3</div>
</div>
</div>
</div>
</div>
</div>
css
/* CSS used here will be applied after bootstrap.css */
.table{
text-align: center;
padding-top: 70px;
padding-left: 0px;
padding-right: 35px;
}
.table-resp{
border: 1px solid green;
overflow-x: hidden;
}
.text1{
float: left;
display: inline-block;
}
.second-row{
line-height: 30px;
clear: left;
min-height: 30px;
overflow: auto;
}
.left-col-text{
height: 100%;
}
Elements "Ex1, Ex2" count is unknown, so, if there are more of those, obviously, the table row will get bigger in height. I need some solution, that would be responsive to this also...
https://www.codeply.com/go/bp/4ZEUS7Q7lm
Just add row-ht-eq class to row <div class="second-row">
CSS:
.row-ht-eq {
display: flex;
align-items: center;
}
position: absolute;
top: 50%;
transform: translateY(-50%);
Also you can play with:
display: table-cell;
vertical-align: middle;
Note: Use span Element as helper.
Html:
<div class="col-md-5">
<span class="helper"></span>
<div class="left-col-text">
Center vertically
</div>
</div>
Css:
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
Full Code:
.table{
text-align: center;
padding-top: 70px;
padding-left: 0px;
padding-right: 35px;
}
.table-resp{
border: 1px solid green;
overflow-x: hidden;
}
.text1{
float: left;
display: inline-block;
}
.second-row{
line-height: 30px;
clear: left;
min-height: 30px;
overflow: auto;
}
.left-col-text{
height: 100%;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="table">
<div class="table-resp">
<div class="second-row">
<div class="col-md-5">
<span class="helper"></span>
<div class="left-col-text">
Center vertically
</div>
</div>
<div class="col-md-7">
<div class="right-col-text">
<div class="example">Ex1</div>
<div class="example">Ex2</div>
<div class="example">Ex3</div>
</div>
</div>
</div>
</div>
</div>
Change your text class to:
.left-col-text {
margin:0 auto;
}
This will automatically decide equal distance from top to bottom.
I've been trying to figure how to achieve this without JavaScript and padding and so far it's been mission impossible. Does anyone know if there is any way with pure CSS and divs to achieve a simple layout:
http://jsfiddle.net/zLzg8v3s/1/
This is exactly what I'm trying to do but with divs and CSS:
http://jsfiddle.net/u0u7snh6/1/
HTML
<body class="table">
<div id="header" class="tableRow" id="top" role="banner">
<div class="tableCell">
<div>
This is the top banner
</div>
</div>
</div>
<div class="tableRow tableContent">
<div class="tableCell">
<div id="content">
This is the content
</div>
</div>
</div>
<div id="footer" class="tableRow" id="bottom">
<div class="tableCell">
<div>
This is the footer
</div>
</div>
</div>
</body>
CSS
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.table {
display: table;
height: 100%;
width: 100%;
}
.tableRow {
display: table-row;
text-align: center;
height: 1px;
}
.tableCell {
display: table-cell;
vertical-align: middle;
}
.tableCell div {
max-width: 400px;
margin: auto;
background-color: brown;
}
.tableContent {
height: 100%;
background-color: yellow;
vertical-align: middle;
}
.tableContent * {
height: 100%;
vertical-align: middle;
margin: auto;
}
.contentDiv {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
#header {
background-color: pink;
}
#footer {
background-color: orange;
}
This is as close as I can get to the layout... what I cannot fix:
1) The content inside the Content div should be vertically aligned middle (very important that the BG of the content cell also is 100% height so it connects to the header and footer)
2) There should not be any overflow: this is a IE8 behavior only (as far as I could tell), so it will be hard to see in JsFiddle... the full code below can be tested locally with IE8's emulation mode:
<!doctype html>
<html lang="en-CA" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>MOCKUP</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.table {
display: table;
height: 100%;
width: 100%;
}
.tableRow {
display: table-row;
text-align: center;
height: 1px;
}
.tableCell {
display: table-cell;
vertical-align: middle;
}
.tableCell div {
max-width: 1200px;
margin: auto;
background-color: brown;
}
.tableContent {
height: 100%;
background-color: yellow;
vertical-align: middle;
}
.tableContent * {
height: 100%;
vertical-align: middle;
margin: auto;
}
.contentDiv {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
#header {
background-color: pink;
}
#footer {
background-color: orange;
}
</style>
</head>
<body class="table">
<div id="header" class="tableRow" id="top" role="banner">
<div class="tableCell">
<div>
This is the top banner
</div>
</div>
</div>
<div class="tableRow tableContent">
<div class="tableCell">
<div id="content">
This is the content
</div>
</div>
</div>
<div id="footer" class="tableRow" id="bottom">
<div class="tableCell">
<div>
This is the footer
</div>
</div>
</div>
</body>
</html>
Okay found the problem in your code: http://jsfiddle.net/zLzg8v3s/9/
For IE8 testing : http://jsfiddle.net/zLzg8v3s/9/show/
CSS:
#content{
margin: 0 auto;
}
Remove this from your css:
.tableContent * {
height: 100%;
vertical-align: middle;
margin: auto;
}
Removing the asterisk fixed everything.
Solution: 2 JSFIDDLE: http://jsfiddle.net/p1bbyfqa/2/
HTML:
<div id="container">
<div class="header">
<h4>This is header</h4>
</div>
<div class="row">
<div class="content">
<div class="left">Left Col</div>
<div class="middle">Middle Col<br />
Middle Col<br />
Middle Col<br />
Middle Col<br />
Middle Col<br />
</div>
<div class="right">Right Col</div>
</div>
</div>
<div class="footer">
<h4>This is footer</h4>
</div>
</div>
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#container {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.row {
display: table-row;
width:100%;
height: 100%;
}
.header, .footer{
background: pink;
display:table-row;
text-align: center;
vertical-align: middle;
}
.content {
display: table;
background: brown;
width:100%;
height: 100%;
overflow: auto;
}
.left, .right{
background: green;
display: table-cell;
width:10%;
vertical-align: middle;
}
.middle{
background: brown;
display: table-cell;
vertical-align: middle;
}