I have the following problem:
I want to create a website where 2 divs fill out the entire screen, no matter what size the screen is. Generally, it works but only if I don't use padding or margin. If I use either one of those the scrollbar shows because of the div's need more space.
I tried to lower the height percentage to accommodate the padding/margin at the top and the bottom. For example, if I had an original size of 70% and I wanted a 5% margin/padding I changed it to 60% but it still couldn't fit the screen.
I know I could just hide the scrollbar but I want the divs to be exact. Is there a way to do this?
In my case, I would like the div with the topper class to be 25% and the div with the lower class to be 75% of the screen.
index.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/css/stylesheet.css">
<title>Home - Planner</title>
</head>
<body>
<div class="container">
<div class="topper">
<div class="header">
<h1>HOME</h1>
<hr class="short-hr">
<h3>Planner</h3>
</div>
<hr class="wide-hr">
</div>
<div class="lower">
<div class="card left">
<h2>Einkaufsliste</h2>
</div>
<div class="card right">
<h2>Kalender</h2>
</div>
<div class="card left">
<h2>ToDo - List</h2>
</div>
<div class="card right">
<h2>Einstellungen</h2>
</div>
</div>
</div>
</body>
</html>
stylesheet.css:
html, body {
height: 100%;
margin: 0px;
}
* {
text-align: center;
margin: auto;
}
.container {
height: 100%;
}
.topper {
height: 25%;
}
.header {
width: 25%;
height: 100%;
}
.lower {
height: 75%;
}
.card {
height: 35%;
width: 40%;
margin: 2.5%;
border: 2.5pt solid #000000;
border-radius: 15pt;
}
.left {
float: left;
}
.right {
float: right;
}
What you're trying to do, is pretty easy to achieve. Simply change the css of your class .container. Remove thei height of 100% and give it an absolute position with top, bottom, left and right of 0.
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
with that CSS change, the container will take all available space. However note, that such use is a bad habbit as it will only be semi-responsive. you need to have plenty breakpoints to prevent an overflow with small screens.
* {
text-align: center;
margin: auto;
}
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.topper {
height: 25%;
}
.header {
width: 25%;
height: 100%;
}
.lower {
height: 75%;
}
.card {
height: 35%;
width: 40%;
margin: 2.5%;
border: 2.5pt solid #000000;
border-radius: 15pt;
}
.left {
float: left;
}
.right {
float: right;
}
<div class="container">
<div class="topper">
<div class="header">
<h1>HOME</h1>
<hr class="short-hr">
<h3>Planner</h3>
</div>
<hr class="wide-hr">
</div>
<div class="lower">
<div class="card left">
<h2>Einkaufsliste</h2>
</div>
<div class="card right">
<h2>Kalender</h2>
</div>
<div class="card left">
<h2>ToDo - List</h2>
</div>
<div class="card right">
<h2>Einstellungen</h2>
</div>
</div>
</div>
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>
.container {
max-width: 1170px;
margin: 0 auto;
}
.row::after {
display: block;;
content: "";
clear: both;
}
.col {
float: left;
}
.col-6 {
width: 50%;
}
.content {
font-size: 3em;
text-align: center;
color: #fff;
background-color: green;
width: 100%;
height: 300px
}
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col col-6">
<div class="content">Half of container width</div>
</div>
<div class="col col-6">
<div class="content green">The remaining part of the viewport
horizontally
</div>
</div>
</div>
</div>
</body>
</html>
I would like to achieve this effect where the first col-6 spans the first 50% of the container's width , and the second col-6 spans from 50% of the containers width to the end of the viewport. I'd like to put an image there, if it matters ( if absolute positioning must be used ).
Hopefully this is descriptive enough
You can try something with viewport units:
updated codepen
.container {
max-width: 1170px;
margin: 0 auto;
}
.row::after {
display: block;
;
content: "";
clear: both;
}
.col {
float: left;
}
.col-6 {
width: 50%;
}
.content {
font-size: 3em;
text-align: center;
color: #fff;
background-color: green;
width: 100%;
height: 300px
}
.half-vw .content {
width: 50vw;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col col-6">
<div class="content">Half of container width</div>
</div>
<div class="col col-6 half-vw">
<div class="content">The remaining part of the viewport horizontally
</div>
</div>
</div>
</div>
</body>
</html>
This is trivial to do with Flexbox.
Use flex-basis : 50% on the first child,
then flex-grow : 1 on the second child (Meaning, "Take whatever space is left").
.row {
display: flex;
height: 200px;
}
.row .first {
background:green;
flex-basis: 50%;
}
.row .second {
background: lightblue;
flex-grow: 1;
}
<div class="row">
<div class="first">First half</div>
<div class="second">Remaining space</div>
</div>
I am using bootstrap and I am attempting to make a Cell that is 100% height and width of its host container.
The title is 30% of that space and the value is 70%. There are upper and lower limits of the value that take up 20% each leaving 60% of the space for the actual value.
HTML:
<div class="container-fluid parameterContainer">
<div class="row paramHead">
<span class="virtAlignFix"></span>
<div class="centerText">
SPO2 (%)
</div>
</div>
<div class="row paramValWrapper">
<div class="row paramLimit">
<span class="virtAlignFix"></span>
<div class="centerText">
200
</div>
</div>
<div class="row paramValue">
<span class="virtAlignFix"></span>
<div class="centerText">
80
</div>
</div>
<div class="row paramLimit">
<span class="virtAlignFix"></span>
<div class="centerText">
40
</div>
</div>
</div>
CSS:
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
}
.virtAlignFix {
line-height: 100%;
}
.parameterContainer {
height: 100%;
width: 100%;
}
.paramValWrapper {
height: 70%;
width: 100%;
}
.paramLimit {
height: 20%;
width: 100%;
text-align:center
}
.paramHead {
height: 30%;
width: 100%;
text-align:center
}
.paramValue {
height: 80%;
width: 100%;
text-align:center
}
.centerText {
vertical-align:middle;
display:inline-block;
}
Fiddle of my attempt:
http://jsfiddle.net/WCBjN/1173/
EDIT: added height % to body and page.
Making text central is fairly trivial, the easiest approach is as follows. You can check out the jsFiddle too: https://jsfiddle.net/jL9bs0j7/
.text-container {
height:200px;
width:400px;
border: 1px solid #000;
text-align: center;
}
.text-container span {
display: block;
position: relative;
top: 50%;
transform: translateY(-50%);
}
<div class="text-container">
<span>Hello World</span>
</div>
I'm trying to layout my first site and I'm stuck on positioning two divs in the same line. I have posted an image below showing the layout I am trying to achieve.
This is the code that i have for the 2 divs at the moment.
<div class="full-width">
<div class="logo">
<img src="img/logo.png"/>
</div>
<div class="social">
<ul class="social-icons">
<li><img src="img/facebookSS.png"/></li>
<li><img src="img/twitter.png"/></li>
<li><img src="img/instagramSS.png"/></li>
</ul>
</div>
<div class="address">
<p>Address to go here</p>
</div>
</div>
I have been playing around with the CSS for a little while but just can't seem to get it right.
What I am looking to do is have all the above on one row, with the nav on the row underneath. Hope that makes sense. I am not using any framework like bootstrap so just using my own classes etc.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-size: 20px;
font-family: 'Open Sans', sans-serif;
color: #fff;
position: relative;
}
.logo {
width: 300px;
height: auto;
position: relative;
display: inline-block;
}
.logo img {
width: 100%;
height: auto;
}
.social {
display: inline-block;
float: right;
margin-right: 20%;
}
.social li {
display: inline-block;
}
.social li img {
width: 50px;
height: auto;
}
.full-width {
width: 100%;
margin: 0 auto;
position: relative;
text-align: center;
}
You need to create more containers for your div's. Here is a very basic example to explain:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<title></title>
</head>
<body>
<div class="container">
<div id="one"></div>
<div id="two">
<div id="three"></div>
<div id="four"></div>
</div>
</div>
</body>
</html>
The container class would take up the full width of the page and contain everything above your navbar. Div one would be your logo, than div two would be another container in which you could put more divs (three and four) that take up a percentage of the height of div two. Than inside of one of these divs, you would need put your social logos, and the address in the next one so it shows underneath. Here is the CSS:
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.container {
width: 100%;
}
#one {
height: 300px;
width: 300px;
background-color: green;
float: left;
margin-left: 25%;
}
#two {
height: 300px;
width: 500px;
float: left;
margin-left: 10%;
}
#three {
height: 30%;
width: 100%;
background-color: yellow;
}
#four {
height: 70%;
width: 100%;
background-color: blue;
}
This is just a very basic example, only to be used as a concept for your idea. Obviously remove the cheesy background colors and modify
Updated:
I created a div with the class .top that has a defined width, which allows you to center anything within it with margin:auto;. I created a section around your social icons and floated it right. This is a better example than my previous one because here the logo is centered.
I hope this helps: https://jsfiddle.net/0sptpx0j/3/
Hi guys thanks for all the advice, i decided after reading about absolute positioning to go down that route. this is what i have come up with.
<div class="full-width">
<div class="logo">
<img src="img/logo.png"/>
</div>
<div class="social">
<div class="social-list">
<ul class="icons">
<li><img src="img/facebookSS.png"/></li>
<li><img src="img/twitterSS.png"/></li>
<li><img src="img/instagramSS.png"/></li>
</ul>
</div>
<div class="address">
<p>Address goes in here</p>
</div>
</div>
</div>
.logo {
width: 300px;
height: auto;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.logo img{
width: 100%;
height: auto;
}
.social {
float: right;
width: 300px;
}
.social-list {
width: 100%;
}
.icons {
list-style: none;
padding: 0;
}
.icons li {
display: inline-block;
margin-right: 10px;
}
.icons img {
width: 50px;
height: auto;
}
.full-width {
width: 100%;
margin: 0 auto;
position: relative;
text-align: center;
}
I am using the bootstrap framework, So while constructing a div if I give a height as 32em. It does perfectly fit in one phone, but when chosen the bigger size. The div does not occupy the remaining height in the bottom. How to make it occupy the remaining height in the bottom if the phone is changed?
Note that div is under the fluid-container and is the last div in that container. And code is something like this.
<style>
.box{
height: 32em;
background: grey;
}
</style>
<div class="container-fluid">
<div class="row box"></div>
</div>
What about this demo
<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<body>
<div class="navbar navbar-fixed-top">
<!-- Rest of nav bar chopped from here -->
</div>
<div class="container fill">
<div id="map"></div> <!-- This one wants to be 100% height -->
</div>
</body>
#map {
width: 100%;
height: 100%;
min-height: 100%;
background: red;
display: block;
}
html, body {
height: 100%;
}
.fill {
min-height: 100%;
height: 100%;
}
Please, check the snippet below
.container-fluid {
height: 150px;
background-color: red;
width: 100%;
overflow: hidden;
}
.box {
height: 100%;
background-color: blue;
width: 50%;
display: block;
}
.small-box {
width: 75%;
height: 50px;
background-color: green;
}
<div class="container-fluid">
<div class="small-box"></div>
<div class="box"></div>
</div>
One more solution is here
html, body {
height: 100%;
margin: 0px;
}
.container-fluid {
display: table;
width: 100%;
height: 100%;
}
.row {
display: table-row;
width: 100%;
}
.box {
display: table-cell;
background: grey;
}
<div class="container-fluid">
<div class="row box">
</div>
</div>
You can also find this solution in myblog