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.
Related
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 want to align this text ZENZZEX in the first grid. Perfectlly vertical and horizontal, I already aligned it horizontal.
body{
margin: 0;;
}
.navGrid {
display: grid;
grid-template-columns: repeat(6, 1fr);
height: 40px;
position: fixed;
width: 100%;
top:0;
background-color: white;
box-shadow: 0px 5px 10px rgba(0,0,0,0.3);
}
.span-col-4{
grid-column: span 4 / auto;
}
.navGrid .first{
color: black;
text-align: center;
font-family: 'Dosis', sans-serif;
font-size: 1.2em;
font-weight: 800;
position: relative;
top: 20%;
}
.navGrid .first:hover{
cursor: pointer;
font-size: 1.28em;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
</head>
<body>
<div class="navGrid">
<div class="first">ZENZZEX </div>
<div class="span-col-4 second">Item 2</div>
<div class="third">Item 3</div>
</div>
<div class="content"><h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam hic, adipisci quasi eius nesciunt veniam exercitationem dolorem aperiam id vero perferendis voluptatum ab ad laborum quaerat? Minus exercitationem iure assumenda perspiciatis dolorem ullam? Dolorum accusamus, possimus culpa molestias ipsum sequi animi numquam omnis delectus odio magni id. Obcaecati quo, reiciendis id explicabo veritatis qui excepturi distinctio autem voluptate quaerat dolorem?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla iure ullam, ad nisi distinctio cumque molestiae vitae porro ex nihil facere harum delectus in laborum fugiat corporis maiores deserunt reiciendis laboriosam alias rerum. Nisi corrupti nostrum esse perferendis labore animi iure, nam aut laborum tenetur officia veniam consectetur odio, maxime consequatur deleniti illum harum et dicta quibusdam numquam sit commodi id libero. Facilis, incidunt reprehenderit ad beatae omnis obcaecati adipisci impedit, non quo porro deserunt nemo! Sed quo non reprehenderit! Voluptatibus aspernatur, praesentium harum, quod incidunt fugiat quidem adipisci, itaque pariatur minima deserunt porro velit? Laboriosam, minus! Sit, neque quibusdam.</h1></div>
</body>
</html>
You can do this using flexbox:
.navGrid .first {
color: black;
text-align: center;
font-family: 'Dosis', sans-serif;
font-size: 1.2em;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
}
I have this 2 columns layout where the content is fluid, while the right sidebar has a fixed width.
In the example below I have also used Bootstrap, mainly for aesthetic reasons:
.fluid-fixed {
position: relative;
}
.content-wrapper {
float: left;
width: 100%;
}
.content,
.sidebar {
padding: 10px;
border: 1px solid #ccc;
margin-top: 10px;
}
.content {
margin-right: 342px;
clear: both;
overflow: auto;
}
.sidebar {
position: relative;
width: 322px;
margin-left: -322px;
float: right;
overflow: hidden;
background: #fff;
}
main p {
text-align: justify;
}
main .img-thumbnail.float-left {
margin-right: 10px;
}
#media only screen and (max-width: 768px) {
.container {
max-width: 100%;
}
.sidebar {
display: none;
}
.content {
margin-right: 0;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container fluid-fixed">
<div class="content-wrapper">
<main class="content">
<h2>Lorem ipsum dolor sit consectetur adipisicing elit</h2>
<p><img src="//lorempixel.com/200/150" class="img-thumbnail float-left" />Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic esse quo, dolorum officia placeat, earum eveniet ipsum? Asperiores magnam laboriosam autem quis, voluptatem eos
explicabo enim quo inventore dolorem modi!</p>
<p>Cupiditate dicta distinctio tempore reiciendis ut? Blanditiis cumque officiis, eius mollitia, ut voluptates incidunt asperiores, vel, ratione adipisci tempora harum. Cum quas ratione animi culpa ipsum quasi eaque architecto tempore!</p>
<p>Vero ullam voluptate quis itaque assumenda a, culpa necessitatibus illo! Porro dignissimos, quidem velit odio laudantium quia excepturi fuga harum veritatis sapiente saepe exercitationem animi eos, at a quaerat praesentium.</p>
<p>Velit asperiores dolorum, saepe iusto, dolor quisquam quaerat numquam ab nesciunt dignissimos ad exercitationem veritatis, repudiandae accusantium placeat nostrum similique quas! Iste labore iusto incidunt a fuga ducimus dolores laudantium.</p>
<p>Ipsum amet facilis beatae ex dicta, eligendi deserunt est sapiente inventore vitae ipsam commodi harum. Quisquam reiciendis dolorem facilis. Repellat temporibus pariatur explicabo quod obcaecati aliquid! Dignissimos, at dolor animi.</p>
</main>
</div>
<aside class="sidebar">
<p>Ipsum amet facilis beatae ex dicta, eligendi deserunt est sapiente inventore vitae ipsam commodi harum. Quisquam reiciendis dolorem facilis. Repellat temporibus pariatur explicabo quod obcaecati aliquid! Dignissimos, at dolor animi.</p>
</aside>
</div>
What I have not been able to achieve is make the 2 columns equal in height. Adding height: 100%; to the sidebar did not work.
What is missing?
You don't need the extra .fixed-fluid class. Use the Bootstrap 4 d-flex class for display: flex;.
<div class="container d-flex">
https://www.codeply.com/go/rplszaWQRF
Flexbox can do that:
.fluid-fixed {
display: flex;
}
.content,
.sidebar {
padding: 10px;
border: 1px solid #ccc;
margin-top: 10px;
}
.content {
clear: both;
overflow: auto;
}
.sidebar {
overflow: hidden;
background: #fff;
}
.sidebar img {
max-width: 100%;
}
main p {
text-align: justify;
}
main .img-thumbnail.float-left {
margin-right: 10px;
}
#media only screen and (max-width: 768px) {
.container {
max-width: 100%;
}
.sidebar {
display: none;
}
.content {
margin-right: 0;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container fluid-fixed">
<div class="content-wrapper">
<main class="content">
<h2>Lorem ipsum dolor sit consectetur adipisicing elit</h2>
<p><img src="//lorempixel.com/200/150" class="img-thumbnail float-left" />Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic esse quo, dolorum officia placeat, earum eveniet ipsum? Asperiores magnam laboriosam autem quis, voluptatem eos
explicabo enim quo inventore dolorem modi!</p>
<p>Cupiditate dicta distinctio tempore reiciendis ut? Blanditiis cumque officiis, eius mollitia, ut voluptates incidunt asperiores, vel, ratione adipisci tempora harum. Cum quas ratione animi culpa ipsum quasi eaque architecto tempore!</p>
<p>Vero ullam voluptate quis itaque assumenda a, culpa necessitatibus illo! Porro dignissimos, quidem velit odio laudantium quia excepturi fuga harum veritatis sapiente saepe exercitationem animi eos, at a quaerat praesentium.</p>
<p>Velit asperiores dolorum, saepe iusto, dolor quisquam quaerat numquam ab nesciunt dignissimos ad exercitationem veritatis, repudiandae accusantium placeat nostrum similique quas! Iste labore iusto incidunt a fuga ducimus dolores laudantium.</p>
<p>Ipsum amet facilis beatae ex dicta, eligendi deserunt est sapiente inventore vitae ipsam commodi harum. Quisquam reiciendis dolorem facilis. Repellat temporibus pariatur explicabo quod obcaecati aliquid! Dignissimos, at dolor animi.</p>
</main>
</div>
<aside class="sidebar">
<img src="https://ppc.news/wp-content/uploads/2017/08/Medium-Rectangle-300x250.jpg" alt="banner">
</aside>
</div>
Using display: flex; instead of position: relative; for the <div class="container fluid-fixed"> element did the job.
.fluid-fixed {
display: flex;
}
.content-wrapper {
width: 100%;
}
.content,
.sidebar {
padding: 10px;
border: 1px solid #ccc;
margin-top: 10px;
}
.content {
margin-right: 342px;
clear: both;
overflow: auto;
}
.sidebar {
width: 322px;
margin-left: -322px;
float: right;
overflow: hidden;
background: #fff;
}
main p {
text-align: justify;
}
main .img-thumbnail.float-left {
margin-right: 10px;
}
#media only screen and (min-width: 1280px) {
max-width: 1200px !important;
}
#media only screen and (max-width: 768px) {
.container {
max-width: 100%;
}
.sidebar {
display: none;
}
.content {
margin-right: 0;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container fluid-fixed">
<div class="content-wrapper">
<main class="content">
<h2>Lorem ipsum dolor sit consectetur adipisicing elit</h2>
<p><img src="//lorempixel.com/200/150" class="img-thumbnail float-left" />Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic esse quo, dolorum officia placeat, earum eveniet ipsum? Asperiores magnam laboriosam autem quis, voluptatem eos
explicabo enim quo inventore dolorem modi!</p>
<p>Cupiditate dicta distinctio tempore reiciendis ut? Blanditiis cumque officiis, eius mollitia, ut voluptates incidunt asperiores, vel, ratione adipisci tempora harum. Cum quas ratione animi culpa ipsum quasi eaque architecto tempore!</p>
<p>Vero ullam voluptate quis itaque assumenda a, culpa necessitatibus illo! Porro dignissimos, quidem velit odio laudantium quia excepturi fuga harum veritatis sapiente saepe exercitationem animi eos, at a quaerat praesentium.</p>
<p>Velit asperiores dolorum, saepe iusto, dolor quisquam quaerat numquam ab nesciunt dignissimos ad exercitationem veritatis, repudiandae accusantium placeat nostrum similique quas! Iste labore iusto incidunt a fuga ducimus dolores laudantium.</p>
<p>Ipsum amet facilis beatae ex dicta, eligendi deserunt est sapiente inventore vitae ipsam commodi harum. Quisquam reiciendis dolorem facilis. Repellat temporibus pariatur explicabo quod obcaecati aliquid! Dignissimos, at dolor animi.</p>
</main>
</div>
<aside class="sidebar">
<img src="https://ppc.news/wp-content/uploads/2017/08/Medium-Rectangle-300x250.jpg" alt="banner">
</aside>
</div>
I want to wrap text in oval shape arround an image but the text keep overlapping over the image. I tried changind the border-radius, width and height properties etc. of the wraping element (i.e image) but it doesn't work. Below is my html and css code:
Html:
<div id="circular-shape">
<img src="blackberries-basket.jpg" class="curve">
<p>/*...text to wrap around circle side...*/
</p>
</div>
CSS:
#circular-shape {
font-family: Open Sans, sans-serif;
margin: 2rem;
}
#circular-shape p {
line-height: 1.8;
}
#circular-shape .curve {
width: 33%;
height: 33%;
min-width: 250px;
float: left;
border-radius: 50%;
-webkit-shape-outside:circle();
shape-outside:circle();
}
How can I stop the text from touching/overlapping the image at the left.Please help.
Just add margin:
img {
float: left;
margin: .5em;
border-radius: 50%;
-webkit-shape-outside: circle(50%);
shape-outside: circle(50%);
}
<div class="wrap">
<img src="http://www.fillmurray.com/g/100/100" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ipsam harum enim omnis, iure laboriosam perferendis neque minima aspernatur culpa recusandae sunt quae minus, est quo ipsum ipsa laborum aperiam itaque facere sequi similique dignissimos
repellendus excepturi! Doloribus, voluptate! Voluptatibus facere nisi nesciunt aliquid maxime vitae soluta earum sint quis distinctio, molestias quod dicta deleniti debitis accusantium at fugiat illum voluptatum dignissimos dolore temporibus obcaecati
sunt non. Amet, et? Consequatur iusto nihil blanditiis amet placeat deleniti perspiciatis odit esse officia, dolor molestiae illum quo maiores quia nam delectus ut libero temporibus eveniet aperiam, nemo cupiditate, similique porro reprehenderit.
Molestiae, perspiciatis!</p>
</div>
Add this to your CSS
p {
position: relative;
left: 35px;
}
Increase the pixels if you want to.
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