I am currently learning by doing with css/html can anyone explain to me why the main content of the page(which I am yet to style) is intruding upon my header? code is below:
body{
height: 100%;
margin: 0;
}
#wrapper {
width: 95%;
height: 100%;
background-color: #bbb;
padding: 0;
margin: 0 auto;
font-family: monospace;
font-size: 14px;
}
a{
text-decoration: none;
color: #000;
}
/*-----------Start Header-----------*/
header{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 200px;
padding: 1%;
margin: 1%;
}
header>img{
width: 30%;
height: 70%;
float: left;
}
header>h1{
width: 70%;
height: 70%;
float: right;
}
/*----------Start Nav-----------*/
#horznav {
width: 100%;
height: 30%;
display: flex;
text-align: center;
}
#horznav>a{
width: 20%;
margin: 1%;
padding: 1%;
border: 1px solid white;
font-size: 1.75vw;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
#horznav>a:hover{
border-radius: 10px;
background-color: #fff;
}
/*------------End Nav----------------------*/
/*----------- End Header --------------------*/
And here is the html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Project 1</title>
<link rel="stylesheet" href="Styles/style.css">
<script src="script.js"></script>
</head>
<body>
<div id="wrapper">
<header>
<img src="http://www.clipartbest.com/cliparts/yik/e79/yike79brT.png" alt="Lorem ipsum dolor sit amet.">
<h1>Lorem ipsum dolor sit amet.</h1>
<nav id="horznav">
<a class= 'navitems nav1' href="">Home</a>
<a class= 'navitems nav2' href="">About</a>
<a class= 'navitems nav3' href="">Contact</a>
<a class= 'navitems nav4' href="">Affiliates</a>
<a class= 'navitems nav5' href="">Coming Soon</a>
</nav>
</header>
<main id="content">
<section class="part">
<article id="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro at vero esse error eius laborum illum magni qui natus quisquam culpa, quaerat, ullam impedit. Nobis, repellendus itaque commodi! Iure, distinctio.</article>
<article id="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil aut quis mollitia, voluptates alias odit amet ullam praesentium molestias sapiente ex est. Repudiandae expedita cupiditate illo quis veritatis nemo, voluptates architecto incidunt ratione in, voluptate neque amet quaerat eligendi ipsum earum aliquid dolorum inventore non natus. Autem dignissimos similique at possimus voluptatum, hic vel sunt velit. Rerum blanditiis voluptate animi molestias, hic ab natus vitae, cum labore facere harum, placeat ea illum officia magni quis. Earum atque illum sit voluptate, veritatis asperiores, facere velit ipsam laborum hic iusto blanditiis possimus, molestias maxime sed! Excepturi nemo, rem quisquam quae, dolore magni.</article>
</section>
<section class="part">
<article id="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro at vero esse error eius laborum illum magni qui natus quisquam culpa, quaerat, ullam impedit. Nobis, repellendus itaque commodi! Iure, distinctio.</article>
<article id="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil aut quis mollitia, voluptates alias odit amet ullam praesentium molestias sapiente ex est. Repudiandae expedita cupiditate illo quis veritatis nemo, voluptates architecto incidunt ratione in, voluptate neque amet quaerat eligendi ipsum earum aliquid dolorum inventore non natus. Autem dignissimos similique at possimus voluptatum, hic vel sunt velit. Rerum blanditiis voluptate animi molestias, hic ab natus vitae, cum labore facere harum, placeat ea illum officia magni quis. Earum atque illum sit voluptate, veritatis asperiores, facere velit ipsam laborum hic iusto blanditiis possimus, molestias maxime sed! Excepturi nemo, rem quisquam quae, dolore magni.</article>
</section>
<section class="part">
<article id="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro at vero esse error eius laborum illum magni qui natus quisquam culpa, quaerat, ullam impedit. Nobis, repellendus itaque commodi! Iure, distinctio.</article>
<article id="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil aut quis mollitia, voluptates alias odit amet ullam praesentium molestias sapiente ex est. Repudiandae expedita cupiditate illo quis veritatis nemo, voluptates architecto incidunt ratione in, voluptate neque amet quaerat eligendi ipsum earum aliquid dolorum inventore non natus. Autem dignissimos similique at possimus voluptatum, hic vel sunt velit. Rerum blanditiis voluptate animi molestias, hic ab natus vitae, cum labore facere harum, placeat ea illum officia magni quis. Earum atque illum sit voluptate, veritatis asperiores, facere velit ipsam laborum hic iusto blanditiis possimus, molestias maxime sed! Excepturi nemo, rem quisquam quae, dolore magni.</article>
</section>
</main>
<footer>
<section id="left">
<p id="left">Lorem ipsum dolor sit amet, consectetur.</p>
<p id="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur modi, quia consequuntur.</p>
</section>
<section id="right">
<img src="http://iconion.com/posts/images/social-icons.jpg" alt="Lorem ipsum dolor." id="socialmedia">
</section>
</footer>
</div>
</body>
</html>
I hope this is an easy fix, please explain the reason for this happening.
Thank You All.
Because you are applying height which means if the contents inside have larger height than it will overflow. Please use min-height so it can expand if it needs to be.
P.S. You need to write more respectable code. It's very bad practice to use % everywhere.
body{
height: 100%;
margin: 0;
}
#wrapper {
width: 95%;
height: 100%;
background-color: #bbb;
padding: 0;
margin: 0 auto;
font-family: monospace;
font-size: 14px;
}
a{
text-decoration: none;
color: #000;
}
/*-----------Start Header-----------*/
header{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
min-height: 200px;
padding: 1%;
margin: 1%;
}
header>img{
width: 30%;
height: 70%;
float: left;
}
header>h1{
width: 70%;
height: 70%;
float: right;
}
/*----------Start Nav-----------*/
#horznav {
width: 100%;
min-height: 30%;
display: flex;
text-align: center;
}
#horznav>a{
width: 20%;
margin: 1%;
padding: 1%;
border: 1px solid white;
font-size: 1.75vw;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
#horznav>a:hover{
border-radius: 10px;
background-color: #fff;
}
/*------------End Nav----------------------*/
/*----------- End Header --------------------*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="wrapper">
<header>
<img src="http://www.clipartbest.com/cliparts/yik/e79/yike79brT.png" alt="Lorem ipsum dolor sit amet.">
<h1>Lorem ipsum dolor sit amet.</h1>
<nav id="horznav">
<a class= 'navitems nav1' href="">Home</a>
<a class= 'navitems nav2' href="">About</a>
<a class= 'navitems nav3' href="">Contact</a>
<a class= 'navitems nav4' href="">Affiliates</a>
<a class= 'navitems nav5' href="">Coming Soon</a>
</nav>
</header>
<main id="content">
<section class="part">
<article id="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro at vero esse error eius laborum illum magni qui natus quisquam culpa, quaerat, ullam impedit. Nobis, repellendus itaque commodi! Iure, distinctio.</article>
<article id="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil aut quis mollitia, voluptates alias odit amet ullam praesentium molestias sapiente ex est. Repudiandae expedita cupiditate illo quis veritatis nemo, voluptates architecto incidunt ratione in, voluptate neque amet quaerat eligendi ipsum earum aliquid dolorum inventore non natus. Autem dignissimos similique at possimus voluptatum, hic vel sunt velit. Rerum blanditiis voluptate animi molestias, hic ab natus vitae, cum labore facere harum, placeat ea illum officia magni quis. Earum atque illum sit voluptate, veritatis asperiores, facere velit ipsam laborum hic iusto blanditiis possimus, molestias maxime sed! Excepturi nemo, rem quisquam quae, dolore magni.</article>
</section>
<section class="part">
<article id="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro at vero esse error eius laborum illum magni qui natus quisquam culpa, quaerat, ullam impedit. Nobis, repellendus itaque commodi! Iure, distinctio.</article>
<article id="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil aut quis mollitia, voluptates alias odit amet ullam praesentium molestias sapiente ex est. Repudiandae expedita cupiditate illo quis veritatis nemo, voluptates architecto incidunt ratione in, voluptate neque amet quaerat eligendi ipsum earum aliquid dolorum inventore non natus. Autem dignissimos similique at possimus voluptatum, hic vel sunt velit. Rerum blanditiis voluptate animi molestias, hic ab natus vitae, cum labore facere harum, placeat ea illum officia magni quis. Earum atque illum sit voluptate, veritatis asperiores, facere velit ipsam laborum hic iusto blanditiis possimus, molestias maxime sed! Excepturi nemo, rem quisquam quae, dolore magni.</article>
</section>
<section class="part">
<article id="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro at vero esse error eius laborum illum magni qui natus quisquam culpa, quaerat, ullam impedit. Nobis, repellendus itaque commodi! Iure, distinctio.</article>
<article id="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil aut quis mollitia, voluptates alias odit amet ullam praesentium molestias sapiente ex est. Repudiandae expedita cupiditate illo quis veritatis nemo, voluptates architecto incidunt ratione in, voluptate neque amet quaerat eligendi ipsum earum aliquid dolorum inventore non natus. Autem dignissimos similique at possimus voluptatum, hic vel sunt velit. Rerum blanditiis voluptate animi molestias, hic ab natus vitae, cum labore facere harum, placeat ea illum officia magni quis. Earum atque illum sit voluptate, veritatis asperiores, facere velit ipsam laborum hic iusto blanditiis possimus, molestias maxime sed! Excepturi nemo, rem quisquam quae, dolore magni.</article>
</section>
</main>
<footer>
<section id="left">
<p id="left">Lorem ipsum dolor sit amet, consectetur.</p>
<p id="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur modi, quia consequuntur.</p>
</section>
<section id="right">
<img src="http://iconion.com/posts/images/social-icons.jpg" alt="Lorem ipsum dolor." id="socialmedia">
</section>
</footer>
</div>
</body>
</html>
Try adding overflow:hidden to header. Because you are floating the elements inside header, the header is collapsing. Add border to header to see what I mean. If you use float to an element you need to overflow:hidden its parent to prevent this from happening.
Hope it helps
You can replace height in header:
Replease this:
header {
height: 200px;
}
With this css:
header {
height: auto;
}
See Fiddle Demo
Using float in your header elements is causing it to collapse with your content.
Since float usually creates unexpected results, I recommend you to use a flexbox, a new layout that is starting to work on most browsers. This is a summary of what it does extracted from MDN:
The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container's margins collapse with the margins of its contents.
If you are interested in using it
here is the full tutorial from MDN.
You have added
header>h1{
width: 70%;
height: 70%;
float: right;
}
and the
header{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 200px;
padding: 1%;
margin: 1%;
}
so header height is 200 px and you have kept the height of h1 as 70% of that so change the header>h1 selector as per your liking and it will work
Hope this helps
Take care and happy coding
Related
I made a website but I want to improve the layout.
I wrapped all the div elements from the website inside <div class="wrapper">. I want to keep the height of div wrapper 95% by default. The problem is that if I add text to div element which is below, it will exit outside div. How to keep "div wrapper" at stable height even if other div below is empty? and later when I add text it should extend automatically so I could scroll it in the browser. Look at the picture.
<style>
body {
background-color: black;
}
.wrapper {
background-color: blue;
width: 90%;
margin: 0 auto;
}
.menu {
/* background-color: red;*/
width: 800px;
height: 100px;
}
.maintext {
border: dashed 2px black;
color: white;
}
</style>
and here's the HTML:
</head>
<body>
<div class="wrapper">
<div class="menu">
<h1>This is my little menu</h1>
</div>
<div class="maintext">
<h2>You can write here what you want</h2>
<p>Ok I will start now
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam rem officia dolor dicta. Voluptatum, sunt! Atque animi cupiditate quasi. Modi accusamus consequuntur esse quis suscipit, velit obcaecati cumque reprehenderit perferendis.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque odio tenetur, rem dolorum nesciunt voluptas quia ex alias corrupti, ullam consequatur distinctio cupiditate voluptate praesentium. Rem perspiciatis totam cumque officia.
nde amet saepe optio obcaecati blanditiis sed sequi nostrum quaerat voluptatibus, est libero culpa nemo! Quaerat, eaque.
</p>
</p>
</div>
</div>
</body>
</html>
you can use overflow: auto property on your wrapper with fixed height if you need to scroll vertically
body {
background-color: black;
}
.wrapper {
background-color: blue;
/* width: 90%; */
height:400px; /*+++*/
overflow: auto; /*+++*/
margin: 0 auto;
}
.menu {
/* background-color: red;*/
width: 800px;
height: 100px;
}
.maintext {
border: dashed 2px black;
color: white;
}
<div class="wrapper">
<div class="menu">
<h1>This is my little menu</h1>
</div>
<div class="maintext">
<h2>You can write here what you want</h2>
<p>Ok I will start now
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam rem officia dolor dicta. Voluptatum, sunt! Atque animi cupiditate quasi. Modi accusamus consequuntur esse quis suscipit, velit obcaecati cumque reprehenderit perferendis.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque odio tenetur, rem dolorum nesciunt voluptas quia ex alias corrupti, ullam consequatur distinctio cupiditate voluptate praesentium. Rem perspiciatis totam cumque officia.
nde amet saepe optio obcaecati blanditiis sed sequi nostrum quaerat voluptatibus, est libero culpa nemo! Quaerat, eaque.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis ratione, amet doloremque nulla iste atque reiciendis, autem, delectus fugiat sequi beatae praesentium molestias minima. Nostrum, consectetur, possimus provident facere, iusto officia tempore esse sapiente obcaecati quis dolorum fugiat blanditiis! Minus, sunt ex soluta eveniet odio sit nobis vero dolorem pariatur.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente repellat placeat dignissimos provident commodi est quasi dolorem optio iusto officia earum facilis quae, magnam expedita mollitia vitae consectetur laborum quas in nam temporibus repudiandae fugit! A saepe obcaecati sapiente ullam ut labore odio. Voluptates quaerat, natus aspernatur vero debitis commodi perferendis laboriosam ut est sit nisi iste quisquam nostrum nam dolor exercitationem quos ipsum molestias eius veritatis fugit dolorem aliquid voluptate! Nam corporis fugiat nulla magnam, cupiditate maxime dolorem facilis quaerat laboriosam aspernatur illum in possimus doloribus voluptas porro voluptatem soluta, adipisci inventore, et commodi est odit nisi delectus? Rerum?
</p>
</p>
</div>
</div>
I have a requirement to Print a document in A4 sheet, in such a way that first part need to be printed in first half( i.e A5 sheet measurement) and that too with 90degree rotation and second part in next A5 sheet in normal way. I could do that by randomly fine tuning the margins.( This is having problem with different devices, Android phones and tab, where something working fine , is not working in other phone) I am sure there will be a right way to do that. here is my html code.Appreciate your help on this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 210mm X 296 mm */
.A5 {
height: 148mm;
border: 2px red solid;
}
.rotate {
transform: rotate(90deg);
border: 2px magenta solid;
margin-left: 50mm;
margin-top: -75mm;
min-height: 296mm;
max-width: 148mm;
}
</style>
</head>
<div class="A5">
<div class="rotate">
***START: Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, alias molestias possimus perferendis, quia eos quod laborum sapiente consequatur accusamus culpa iure quae maiores.
Nesciunt, dignissimos unde! Animi, voluptates ullam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia accusantium laborum neque in numquam sit similique dolores unde. Nulla, tenetur
reiciendis quam recusandae delectus dolore voluptas dolorem maxime quidem iure culpa iste sint similique ab veniam quis optio pariatur maiores eos! Beatae, repellat sed velit molestias ad
voluptates deleniti. Odio!***END**
</div>
</div>
<div class="A5">
***START: Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, alias molestias possimus perferendis, quia eos quod laborum sapiente consequatur accusamus culpa iure quae maiores. Nesciunt,
dignissimos unde! Animi, voluptates ullam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia accusantium laborum neque in numquam sit similique dolores unde. Nulla, tenetur reiciendis
quam recusandae delectus dolore voluptas dolorem maxime quidem iure culpa iste sint similique ab veniam quis optio pariatur maiores eos! Beatae, repellat sed velit molestias ad voluptates
deleniti. Odio!***END**
</div>
</html>
This is the solution I could use
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
:root {
--page-width: 210mm;
--page-height: 296mm;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.A5 {
margin: 0px;
border: 2px black solid;
/* Note: height and width interchanged because of rotation */
width: var(--page-height);
height: var(--page-width);
display: flex;
justify-content: center;
align-items: center;
}
.rotate {
transform: rotate(90deg);
height: var(--page-height);
width: var(--page-width);
border: 2px magenta solid;
}
.al {
align-items: flex-start;
}
</style>
</head>
<div class="A5">
<div class="rotate">***START: Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, alias molestias possimus perferendis, quia eos quod laborum sapiente consequatur accusamus culpa iure quae maiores. Nesciunt, dignissimos unde! Animi, voluptates ullam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia accusantium laborum neque in numquam sit similique dolores unde. Nulla, tenetur reiciendis quam recusandae delectus dolore voluptas dolorem maxime quidem iure culpa iste sint similique ab veniam quis optio pariatur maiores eos! Beatae, repellat sed velit molestias ad voluptates deleniti. Odio!***END**</div>
</div>
<div class="A5 al">***START: Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, alias molestias possimus perferendis, quia eos quod laborum sapiente consequatur accusamus culpa iure quae maiores. Nesciunt, dignissimos unde! Animi, voluptates ullam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia accusantium laborum neque in numquam sit similique dolores unde. Nulla, tenetur reiciendis quam recusandae delectus dolore voluptas dolorem maxime quidem iure culpa iste sint similique ab veniam quis optio pariatur maiores eos! Beatae, repellat sed velit molestias ad voluptates deleniti. Odio!***END**</div>
</html>
I have started learning HTML/css about 2 weeks ago and (among others) this is one of the pages I came up with, but I can't make the image to resize when I shrink down the window. Most of the lessons until now have been about HTML and CSS only and how to make the document easy to read for screen readers and I wanted to do some practice with whatever knowledge I had. Any ideas why the image doesn't shrink down along with the text and why?
Thank you very much!
HTML:
#import url('https://fonts.googleapis.com/css?family=Kelly+Slab&display=swap');
body {
margin: 0;
padding: 0;
background-color: #d89cf6;
}
.top {
position: relative;
padding: 1em 2em 1em 2em;
height: 3em;
background-color: #3e206d;
margin: auto;
overflow: hidden;
border-top: solid 6px;
border-bottom: solid 1px;
}
.top h1 {
position: absolute;
display: flex;
float: left;
margin: 0;
padding: 0;
margin-top: .3em;
font-family: 'Kelly Slab', cursive;
font-size: 2.4em;
color: #f0e3ff;
}
.top ul {
list-style-type: none;
display: flex;
float: right;
margin: 0;
padding: 0;
margin-top: 1.43em;
}
.top li {
padding: 0 0.3em;
margin: auto;
margin-top: .5em;
position: relative;
}
.top a {
text-decoration: none;
color: #f0e3ff;
font-family: 'Kelly Slab', cursive;
font-size: 1.2em;
}
.main {
padding: 1.5em 4.7em 2em;
color: #000000;
font-family: 'Kelly Slab', cursive;
}
.main h2 {
font-size: 1.8rem;
}
.main p {
font-size: 1.3rem;
}
.main img {
min-width: auto;
width: auto;
max-height: 29em;
min-height: 25%;
}
.text_picture {
float:right;
width: auto;
margin: auto;
}
.thank_you {
padding: 1.5em 4.7em 2em;
color: #000000;
font-family: 'Kelly Slab', cursive;
}
footer {
font-size: 1.2rem;
margin: auto;
text-align: center;
padding: 1.5em 4.7em 2em;
color: #000000;
font-family: 'Kelly Slab', cursive;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Skeleton</title>
<link rel="stylesheet" href="style/main.css" type="text/css">
</head>
<body>
<header>
<div class="top">
<h1>Arghhhh</h1>
<nav class="internal_nav">
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<section class="main">
<article>
<h2>Lorem, ipsum</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi dolore vero natus libero labore! Voluptas, culpa cum animi, explicabo laudantium fuga rem hic fugiat deleniti eveniet ad dignissimos minus! Nisi cumque dolore illo corrupti quo recusandae possimus aliquam officiis blanditiis, inventore veritatis. Cum itaque molestiae iusto dolorem esse illo saepe ipsam dolor cupiditate neque velit, dolore error earum eveniet tempora!
</p>
<div id="text_picture_container">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit ab magni officiis eos rem in aperiam tenetur quidem maiores, tempore enim, id sapiente velit pariatur ducimus. Velit vero consequuntur possimus quam culpa voluptatum officia est voluptate eum, labore facilis assumenda rerum harum ipsam facere quas cupiditate. Itaque facilis voluptas cupiditate eos? Commodi odit tempore nihil blanditiis, excepturi quidem vero. Nam nesciunt corporis minima alias aperiam voluptate neque quidem consequatur ab sed, mollitia nulla labore expedita? Laboriosam atque error, similique temporibus eius, sunt quaerat nobis vero maxime corrupti quis ipsam. Aliquam rem id harum culpa nesciunt facere sit atque provident neque!
</p>
<div class="text_picture">
<figure>
<img src="images/wallpaper-364615676716148alamn2ffq.jpg" alt="lone tree in a field with a orange/magenta sunset in the background">
<br>
<figcaption>A lonely tree in the middle of a field, with a really colorful sunset background.
</figcaption>
</figure>
</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt earum assumenda praesentium dolor et veritatis libero. Eveniet quasi fugiat, consectetur error possimus natus? Quasi explicabo deserunt quisquam necessitatibus hic aspernatur totam tenetur eveniet accusamus! Voluptate reprehenderit sunt repellat aut adipisci temporibus provident vitae amet cum doloribus dolorum tempora, perferendis voluptas aperiam libero similique distinctio quam corrupti consequatur vero magnam commodi. Enim, consequuntur. Quod maiores laudantium nesciunt doloremque, voluptatem dolorum amet. Tempore, vel dignissimos, veniam magni recusandae saepe ab labore itaque eum officiis, quaerat quae eveniet? Placeat nemo aperiam similique earum, tempore dicta totam atque. Perspiciatis, aut. Ea distinctio iure minima, id doloremque quisquam quidem expedita nemo. Facere dignissimos, architecto similique repellendus aliquid dicta deserunt et esse voluptate nulla ipsum quod earum voluptas nobis consectetur expedita quas, non itaque. Optio incidunt dolor distinctio, ducimus beatae doloribus magni ut aliquam a facere laborum ipsam ratione voluptatem. Dolore modi error nemo impedit recusandae?
</p>
<div class="first_survey">
<form class="survey">
<fieldset>
<legend>Chose what impressed you the most:</legend>
<label for="style">The styling</label>
<input type="checkbox" id="style" name="survey_choice" value="style">
<label for="writing">The writing</label>
<input type="checkbox" id="writing" name="survey_choice" value="writing">
<label for="pictures">The pictures</label>
<input type="checkbox" id="writing" name="survey_choice" value="pictures">
<div class="button">
<button type="submit">Submit</button>
</div>
</fieldset>
</form>
</section>
<div href="#" class="thank_you">
<h2>Thank you for taking your time to browse my webpage!
</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt quisquam commodi sapiente quos ut unde consectetur alias culpa veniam, quasi perspiciatis expedita esse accusantium quas enim quam soluta, quibusdam sit? Quisquam placeat, iure possimus cupiditate libero non esse quasi facere deserunt debitis delectus reiciendis aliquid magnam a blanditiis, eaque officia.
<p>
</div>
</article>
</body>
<footer>
<h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, dolore?</h6>
</footer>
</html>
You can always use VH unit which stands for viewport width.
Responsive Text
However, I suggest using REM and EM units instead, of course, this depends on your needs.
REM and EM units
Feel free to read this article which explains this topic in depth.
CSS Font Sizing: Pixels vs Em vs Rem vs Percent vs Viewport Units
Now, regarding responsive image sizing, you can simply add a class with these properties and set it to the image you want.
.responsive {
width: 100%;
height: auto;
}
As I said before, read the Medium article, you can use REM, EM, PX, % units on images as well.
How would I make the header full width? And I would like the content class to the right, and the skills class to the right 30% to 70%. If you are able to understand the issue I wasn't able to figure out please tell me what you did to get it to work. Thanks.
I couldn't find any info on how to make the header full width, and move the content to other spots...
* {
box-sizing: border-box;
overflow: hidden;
padding: 10px;
margin: 0px;
}
body {
background-image: url("coder.jpeg");
background-size: cover;
}
.wrapper {
display:grid;
grid-template-columns: 70% 30%;
grid-template-rows: ;
grid-gap: 10px;
}
.header {
background-color: rgba(153, 153, 153, 0.99);
text-align: center;
border-radius: 10px;
font-size: 20px;
}
.skills {
background-color: rgba(153, 153, 153, 0.99);
border-radius: 10px;
}
.content {
background-color: rgba(153, 153, 153, 0.99);
border-radius: 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Cl32</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="wrapper">
<div class="header">
<header>
<h1>Cdad</h1>
</header>
</div>
<div class="skills">
<aside>
<h2>Skills</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla fuga asperiores iusto eveniet aliquid nobis aliquam ducimus, tempora consequatur neque earum molestiae unde porro, quis numquam error illum temporibus, incidunt autem. Temporibus maxime esse magnam inventore odit vero in quae sit quo laboriosam? Architecto saepe repudiandae ducimus possimus magni numquam?</p>
</aside>
</div>
<div class="content">
<h2>yuyuyggoggo</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum mollitia sunt at aliquid unde vel sapiente quas sequi repudiandae, quam facere inventore suscipit sed nam quae possimus reprehenderit doloremque. Reprehenderit nisi architecto vel molestiae placeat necessitatibus deleniti laborum facere unde itaque magnam amet ut aspernatur distinctio atque ad perspiciatis nam beatae fugiat illum error veritatis, cupiditate odit? Deserunt earum magni id animi, temporibus sit obcaecati ipsum. Blanditiis, expedita? Fugit dicta ex dignissimos, esse totam voluptas illo maxime minus quae nisi velit nemo sequi nulla et omnis deserunt nam sed ducimus. Minima animi dolor vitae architecto suscipit ipsa eaque autem incidunt.</p>
</div>
</div>
<!--warpper class ends-->
</body>
</html>
Don't know if I understand your question correctly but if you add grid-column: 1 / span 2;to your header class it will give you full width.
I have absolute positioned block which should grow down if its content growth but not go outside of the screen (create scroller on the inner content block).
How to do this?
UPD: header block can also has variable height, so I can't use its fixed height. But I don't want it to have scroll.
(Please, update the title of the question, I'm not sure about it)
.wrapper {
width: 200px;
border: 4px solid #000;
position: absolute;
top: 10px;
left: 10px;
}
.header {
height: 100px;
margin-bottom: 10px;
background-color: pink;
}
.article {
background-color: silver;
overflow: auto;
position: relative;
width: 100%;
}
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, eligendi amet a dolores laboriosam illo temporibus voluptatibus. Inventore voluptate, tenetur nobis architecto aut, veritatis suscipit itaque corrupti, optio totam sapiente.</div>
<div class="wrapper">
<div class="header">footer</div>
<div class="article">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea fugit voluptatibus ipsum molestiae incidunt voluptates in accusamus minus iure amet, voluptatum neque laborum est ducimus eius illo eligendi veritatis voluptas!</div>
<div>Fugiat dolores blanditiis illo, odio eligendi quam dolor odit asperiores dignissimos reiciendis cupiditate. Maiores, soluta. Possimus error nam ipsum eaque dolor voluptatibus autem, animi quas, sed, eveniet vitae repellat unde!</div>
<div>Officia nemo quas at facere eum esse cum aliquid quibusdam, magni quasi. Voluptas, ad odit possimus accusantium dolorem fuga voluptatum vero consequuntur ullam itaque laborum aut reprehenderit, facilis, commodi unde.</div>
<div>Iusto saepe quaerat corporis. Exercitationem ipsum aliquam nisi nemo dolor libero at quam dolorum rerum, praesentium, sequi fugit, eius mollitia provident inventore recusandae. Atque nesciunt suscipit rem tempora harum quos.</div>
</div>
</div>
<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam quos molestiae soluta laborum amet explicabo magnam. Consectetur quod quae ex commodi vel, aspernatur repellat sunt sequi reiciendis, qui, a temporibus.</div>
I think flex-box could help you here:
.wrapper {
width: 200px;
border: 4px solid #000;
position: absolute;
top: 10px;
left: 10px;
display: flex;
flex-direction: column;
max-height: calc(100vh - 20px); /* screen height - 10px margin top and bottom */
}
.header {
background-color: pink;
flex-grow: 1;
}
.article {
background-color: silver;
overflow: auto;
width: 100%;
flex-grow: 1; /* allow to grow as needed */
}
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, eligendi amet a dolores laboriosam illo temporibus voluptatibus. Inventore voluptate, tenetur nobis architecto aut, veritatis suscipit itaque corrupti, optio totam sapiente.</div>
<div class="wrapper">
<div class="header">footer</div>
<div class="article">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea fugit voluptatibus ipsum molestiae incidunt voluptates in accusamus minus iure amet, voluptatum neque laborum est ducimus eius illo eligendi veritatis voluptas!</div>
<div>Fugiat dolores blanditiis illo, odio eligendi quam dolor odit asperiores dignissimos reiciendis cupiditate. Maiores, soluta. Possimus error nam ipsum eaque dolor voluptatibus autem, animi quas, sed, eveniet vitae repellat unde!</div>
<div>Officia nemo quas at facere eum esse cum aliquid quibusdam, magni quasi. Voluptas, ad odit possimus accusantium dolorem fuga voluptatum vero consequuntur ullam itaque laborum aut reprehenderit, facilis, commodi unde.</div>
<div>Iusto saepe quaerat corporis. Exercitationem ipsum aliquam nisi nemo dolor libero at quam dolorum rerum, praesentium, sequi fugit, eius mollitia provident inventore recusandae. Atque nesciunt suscipit rem tempora harum quos.</div>
</div>
</div>
<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam quos molestiae soluta laborum amet explicabo magnam. Consectetur quod quae ex commodi vel, aspernatur repellat sunt sequi reiciendis, qui, a temporibus.</div>
Here is a version with less text to show how it would behave:
.wrapper {
width: 200px;
border: 4px solid #000;
position: absolute;
top: 10px;
left: 10px;
display: flex;
flex-direction: column;
max-height: calc(100vh - 20px);
}
.header {
background-color: pink;
flex-grow: 0;
}
.article {
background-color: silver;
overflow: auto;
width: 100%;
flex-grow: 1;
}
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, eligendi amet a dolores laboriosam illo temporibus voluptatibus. Inventore voluptate, tenetur nobis architecto aut, veritatis suscipit itaque corrupti, optio totam sapiente.</div>
<div class="wrapper">
<div class="header">footer</div>
<div class="article">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea fugit voluptatibus ipsum molestiae incidunt voluptates in accusamus </div>
</div>
</div>
<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam quos molestiae soluta laborum amet explicabo magnam. Consectetur quod quae ex commodi vel, aspernatur repellat sunt sequi reiciendis, qui, a temporibus.</div>