Really not sure why this is happening, but it's very annoying as I can't seem to find the cause of it.
If I take the below HTML and add a P element inside the class="comments" div then it'll push down the entire class="ratingComments" div that it's inside. Even if I turn off margins and padding it'll still do it, why is this?
It'll probably make more sense to look at this fiddle: https://jsfiddle.net/sz4fodqj/
I want the two divs in the center to be inline, but the P tag prevents this.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Nrthrn</title>
<link rel="icon" href="./res/icon.png">
<link rel="stylesheet" type="text/css" href="960styling.css" id="stylesheet">
</head>
<div id="wrapper">
<body>
<div class="headerBar">
<img id="logo" src="./res/logo.png"/>
<ul class="menu">
<li>Home</li>
<li>Events</li>
<li>Past Events</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<a id="loginLink" href="login.html">Login</a>
</div> <!-- end headerBar -->
<div class="promoArea">
<img id="bigLogo" src="./res/bigLogo.png"/>
</div>
<div class="eventsSearchBar">
<p>Order By: </p>
<select required="required" name="field4" class="selectfield">
<option value="Advertise">Closest Date</option>
<option value="Partnership">Furthest Date</option>
<option value="General Question">Rating: High to Low</option>
<option value="General Question">Rating: Low to High</option>
</select>
</div>
<div class="pastEventsContentArea">
<div class="pastEventRowContainer">
<div class="pastEventContainer">
<div class="dateWrapper">
<span class="day"><p id="daytext"><b>23rd</b></p></span>
<span class="month"><p id="monthtext"><b>May</b></p></span>
</div>
<div class="textWrapper">
<div class="title"><p id="eventTitle">ODESZA</p></div>
<div class="location"><p>Location</p></div>
</div>
<div class="buttonWrapper">
<button id="moreInfoButton">Info</button>
<button id="moreInfoButton">Tickets</button>
</div>
</div>
<div class="ratingComment">
<div class="rating">
</div>
<div class="comments"><!--P CLASS HERE MAKES WEIRD THINGS HAPPEN--></div>
</div>
</div>
</div>
<div class="footerBar">
<div class="footerLeft">
<ul>
<li>Home</li>
<li>Events</li>
<li>Past Events</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
<div class="footerRight">
<img src="./res/facebook.png"/>
<img src="./res/twitter.png"/>
<img src="./res/instagram.png"/>
</div>
</div>
<p id="copyright">Copyright 2017</p>
</body>
</div>
</html>
CSS
.pastEventsContentArea{
width: 95%;
margin: 50px auto 50px auto; /*top right bottom left */
padding-top: 20px;
/* background-color: #ff6464;*/
text-align: center;
}
.pastEventContainer{
/*width: 45%;
height: 30%;*/
/* width: 55%;*/
height: 120px;
/* background-color: rgba(0, 0, 0, 0.2);*/
background-color: #ffffff;
margin-left: 5%;
margin-right: 0%;
/* margin-bottom: 10px;*/
/* margin-right: 10px;*/
display: inline-block;
min-width: 500px;
max-width: 500px;
color: black;
border-style: solid;
border-color: #363636;
border-width: 1px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.pastEventContainer .dateWrapper{
width: 20%;
/*background-color: rgba(0, 0, 0, 0.4);*/
height: 100%;
float: left;
font-family: opensans;
color: black;
}
.pastEventContainer .textWrapper{
width: 45%;
/* background-color: rgba(0, 0, 0, 0.6);*/
height: 100%;
float: left;
color: black;
font-family: opensans;
margin-left: 10px;
}
.pastEventContainer .buttonWrapper{
width: 30%;
/* background-color: rgba(0, 0, 0, 0.8);*/
height: 100%;
float: left;
}
.pastEventContainer .dateWrapper .day{
display: inline-block;
width: 100%;
height: 60%;
/* background-color: red;*/
font-size: 25px;
font-family: opensans;
}
.pastEventContainer .dateWrapper .month{
display: inline-block;
width: 100%;
height: 40%;
/* background-color: indianred;*/
font-size: 24px;
}
.pastEventContainer .dateWrapper #daytext{
margin-top: 30%;
}
.pastEventContainer .dateWrapper #monthtext{
margin-top: -10%;
}
.pastEventContainer .textWrapper .title{
/* background-color: aqua;*/
height: 50%;
margin: 0;
margin-top: 30px;
font-size: 20px;
overflow: hidden;
}
.pastEventContainer .textWrapper .location{
/* background-color: blue;*/
margin-top: -20px;;
font-size: 14px;
max-height: 30px;
min-height: 30px;
overflow: hidden;
}
.pastEventContainer .textWrapper p{
margin: 0;
text-align: left;
}
.pastEventContainer .buttonWrapper #moreInfoButton{
display: block;
margin-left: auto;
margin-right: auto;
font-family: Porter;
text-transform: uppercase;
background-color: #242424;
height: 30%;
color: white;
outline: 0;
width: 75%;
border: 0;
padding: 10px;
font-size: 15px;
/*box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);*/
box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.2);
cursor: pointer;
margin-top: 10%;
}
.pastEventRowContainer .ratingComment{
display: inline-block;
height: 120px;
background-color: white;
width: 30%;
margin: 0;
margin-left: 50px;
padding: 0;
border-style: solid;
border-color: #363636;
border-width: 1px;
max-width: 300px;
}
.pastEventRowContainer .ratingComment .rating{
/* background-color: red;*/
height: 50%;
display: block;
margin: 0;
}
.pastEventRowContainer .ratingComment .comments{
/* background-color: aqua;*/
height: 50%;
display: block;
text-align: center;
color: black;
font-family: opensans;
font-size: 20px;
position: relative;
}
.pastEventRowContainer .ratingComment a{
display: block;
margin: 0;
padding: 0;
position: absolute;
left: 60px;
top: 15px;
text-decoration: none;
}
p is block level element by default. You can use span instead or change the display properties of .comments in your css. This really depends on what you want to add in the div.
see
https://www.w3schools.com/html/html_blocks.asp
I think that the reason is that .ratingComment has display: inline-block;. That forces the elements to change so that whatever elements you put inside .comments to be inline with the .pastEventContainer. Look at this for example https://jsfiddle.net/sz4fodqj/4/ where the div contains more text, still it's inline with the first div.
Related
I need my work done soon, but I don't have access to my bigger monitor. I assume the teacher also has a big monitor where he'll look at my work, so it shouldn't be a problem.
But my site only looks normal on 70% and I'm having a big headache trying to make it work so I have to work on 70%.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
}
header {
display: flex;
width: 50%;
height: 8vh;
margin: auto;
align-items: center;
}
.nav-links,
.search-container {
display: flex;
}
nav {
position: relative;
flex: 1;
}
.nav-links {
justify-content: space-evenly;
max-width: 300px;
list-style: none;
}
.nav-link {
color: #ffffff;
font-size: 18px;
text-decoration: none;
}
.search-container {
flex: 1;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
}
#justdance {
display: flex;
width: 50%;
margin: auto;
align-items: top;
}
.about {
background-color: #c4c4c4;
display: flex;
width: 50%;
height: 30vh;
margin: auto;
flex-direction: column;
align-items: flex-start;
}
.quote {
text-align: center;
display: block;
border-radius: 10px;
border-style: solid;
box-shadow: rgba(0, 0, 0, 0.42) 0px 2px 2px 0px;
width: 500px;
height: 30px;
margin: 20px auto 0 auto;
}
.description {
margin: 30px auto 0 auto;
text-align: justify;
width: 70%;
font-size: 13px;
}
.sideimage {
position: absolute;
right: 640px;
top: 390px;
}
.polygon {
position: absolute;
right: 960px;
bottom: 260px;
width: 0;
height: 0;
border-top-width: 82px;
border-top-style: solid;
border-top-color: transparent;
border-right-width: 90px;
border-right-style: solid;
border-right-color: #c4c4c4;
transform: rotate(-180deg);
}
.piirkonnad {
background-color: #222222;
display: flex;
width: 50%;
height: 29vh;
margin: auto;
flex-direction: column;
align-items: flex-start;
}
.piirkonnad p {
position: absolute;
left: 554px;
bottom: 270px;
font-family: Roboto;
font-style: italic;
font-weight: 300;
font-size: 20px;
line-height: 23px;
color: #FFFFFF;
}
.copyright p {
position: absolute;
right: 803px;
bottom: 24px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 13px;
line-height: 12px;
color: #FFFFFF;
}
.social {
position: absolute;
right: 550px;
bottom: -2px;
}
.fa {
padding: 15px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa-instagram {
background: #c4c4c4;
color: black;
}
.fa-twitter {
background: #c4c4c4;
color: black;
}
.fa-facebook {
background: #c4c4c4;
color: black;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<title>Just Dance</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
body {
background-color: #000000;
}
</style>
<body>
<header>
<nav>
<ul class="nav-links">
<li><a class="nav-link" href="#">Avaleht</a></li>
<li><a class="nav-link" href="#">Meist</a></li>
<li><a class="nav-link" href="#">Login</a></li>
</ul>
<div class="search-container">
<input type="text" placeholder="Otsing" name="search">
</div>
</nav>
</header>
<main>
<img src="header.jpg" alt="Just Dance" id="justdance" ;>
<div class="about">
<div class="quote">“Dance is the hidden language of the soul” - Marta Graham</div>
<div class="description">
<div class="text">
<p>Kunagi pole liiga hilja alustada. Just Dance veebilehelt leiad<br>
tantsukursusi üle Eesti.</p>
<br>
<p>Sulle sobiva kursuse leidmine on imelihtne - vali piirkond või<br>
tantsustiil ning sulle avaneb loetelu kursustest.</p>
<br>
<p>Ka tantsukaaslaste leidmine on imelihtne. Kirjuta sulle sobiva<br>
kursuse kommentaaridesse oma kaaslaseotsingust ning jää<br>
ootama vastust. Ehk leiad juba homme oma unelmate partneri?<br>
Kursuste kommenteerimiseks registreeru "Just Dance" kasutajaks.</p>
</div>
<div class="sideimage">
<img src="dancers.png" alt="Dancers" id="dancer" ;>
</div>
<div class="polygon"></div>
</div>
</main>
<section>
<div class="piirkonnad">
<p>Piirkonnad</p>
</div>
<div class="row1">
<img src="1.jpg" alt="Harjumaa" width="170" height="100">
</div>
</section>
<footer>
<div class="copyright">
<p>Just Dance © Noor Meister Kõik õigused kaitstud</p>
</div>
<div class="social">
</div>
</footer>
</body>
</html>
I've heard about responsive design already, but I can't figure it out. I'm not the greatest at coding and it was hard to achieve what I have so help is appreciated a ton.
Your code has some mistakes on it, you have ; on your img element and your style element should be in the head tag, and the reason why your website is not responsive is because you are using position:absolute, keep your website simple, or if you really want to still use position:absolute, then that div should be contained on another div but set it it to position:relative.
Anyways, I fixed it and now totally responsive, here it is:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
padding-top:20px;
}
header{
display:flex;
justify-content:space-evenly;
width: 50%;
margin: auto;
flex-wrap:wrap;
}
.nav-links{
display: flex;
}
.nav-links{
justify-content: space-evenly;
max-width: 300px;
list-style: none;
}
.nav-link{
color: #ffffff;
font-size: 18px;
padding:10px;
text-decoration: none;
}
#justdance {
display: flex;
width: 50%;
margin: auto;
align-items: top;
}
.about {
padding:10px;
background-color: #c4c4c4;
width: 50%;
margin: auto;
}
.search-container{
min-width:30px
}
.quote {
text-align: center;
display: block;
border-radius: 10px;
border-style: solid;
box-shadow: rgba(0, 0, 0, 0.42) 0px 2px 2px 0px;
padding:5px;
margin: 10px auto 0 auto;
}
.description {
margin: 30px auto 0 auto;
width: 70%;
font-size: 13px;
}
.polygon {
height: 0;
border-top-width: 82px;
border-top-style: solid;
border-top-color: transparent;
border-right-width: 90px;
border-right-style: solid;
border-right-color: #c4c4c4;
transform: rotate(-180deg);
}
.piirkonnad {
position:relative;
display:flex;
background-color: #222222;
display: flex;
width: 50%;
padding-top:30px;
height: 29vh;
margin: auto;
justify-content:space-evenly;
}
.piirkonnad p {
text-align:center;
font-family: Roboto;
font-style: italic;
font-weight: 300;
font-size: 20px;
line-height: 23px;
color: #FFFFFF;
}
footer{
margin-top:1em;
}
.copyright p {
text-align:center;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 13px;
line-height: 12px;
color: #FFFFFF;
}
.social {
display:flex;
justify-content:center;
}
.fa {
padding: 15px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa-instagram {
background: #c4c4c4;
color: black;
}
.fa-twitter {
background: #c4c4c4;
color: black;
}
.fa-facebook {
background: #c4c4c4;
color: black;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<title>Just Dance</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
background-color: #000000;
}
</style>
</head>
<body>
<header>
<nav>
<ul class="nav-links">
<li><a class="nav-link" href="#">Avaleht</a></li>
<li><a class="nav-link" href="#">Meist</a></li>
<li><a class="nav-link" href="#">Login</a></li>
</ul>
</nav>
<div class="search-container">
<input type="text" placeholder="Otsing" name="search">
</div>
</header>
<main>
<img src="header.jpg" alt="Just Dance" id="justdance">
<div class="about">
<div class="quote">“Dance is the hidden language of the soul” - Marta Graham</div>
<div class="description">
<div class="text">
<p>Kunagi pole liiga hilja alustada. Just Dance veebilehelt leiad<br>
tantsukursusi üle Eesti.</p>
<br>
<p>Sulle sobiva kursuse leidmine on imelihtne - vali piirkond või<br>
tantsustiil ning sulle avaneb loetelu kursustest.</p>
<br>
<p>Ka tantsukaaslaste leidmine on imelihtne. Kirjuta sulle sobiva<br>
kursuse kommentaaridesse oma kaaslaseotsingust ning jää<br>
ootama vastust. Ehk leiad juba homme oma unelmate partneri?<br>
Kursuste kommenteerimiseks registreeru "Just Dance" kasutajaks.</p>
</div>
</div>
</div>
<section>
<div class="piirkonnad">
<div class="polygon"></div>
<p>Piirkonnad</p>
<div class="sideimage">
<img src="dancers.png" alt="Dancers" id="dancer">
</div>
</div>
<div class="row1">
<img src="1.jpg" alt="Harjumaa" width="170" height="100">
</div>
</section>
</main>
<footer>
<div class="copyright">
<p>Just Dance © Noor Meister Kõik õigused kaitstud</p>
</div>
<div class="social">
</div>
</footer>
</body>
</html>
For make a website responsive you need to avoid px and use %, vw (viewport width) or vh (viewport height).
After in your css you need to declare #media only screen and (max-width: screenSizepx) and inside make the responsive layout for each screen.
Usually i make this with:
#media only screen and (max-width: 1000)
#media only screen and (max-width: 550px)
#media only screen and (max-width: 400px)
I am having an issue with resizing and a div. When I resize the browser, then scroll over to the right, I see that the bottom div is not extending all the way despite my width at 100% I have tried position and width tags and am at a loss. Any ideas? The form is moving into the white space and not sticking to the background div area.
https://codepen.io/CaptainMattyP/pen/mdJRKpo
body {
width: 100%;
margin: 0px;
background-image: url("https://wallpaperplay.com/walls/full/d/8/b/329997.jpg");
background-attachment: fixed;
font-family: 'Ubuntu Condensed';
right: 0px;
}
h1 {
text-align: center;
padding: 200px 0px 0px 1320px;
position: absolute;
white-space: nowrap;
}
#navbar {
height: 50px;
width: 100%;
background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
background-color: rgb(80, 80, 86);
border-bottom: solid;
border-width: 1px;
border-color: black;
position: fixed;
top: 0px;
z-index: 5
}
a,
.white {
text-decoration: none;
color: white;
}
a:hover {
color: limegreen;
}
ul {
padding: 0px 0px 0px 1160px;
white-space: nowrap;
}
li {
color: white;
display: inline;
padding: 40px;
}
#welcome-section {
height: 800px;
}
.picture {
margin: 300px 0px 0px 1340px;
border-radius: 50%;
position: absolute;
z-index: 1;
box-shadow: 10px 10px 10px grey;
border-style: solid;
border-width: 1px;
}
#footer {
height: 230px;
background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
background-size: auto;
border-top: solid;
bottom: 0px;
right: 0px;
border-width: 1px;
}
#footer-info1 {
color: white;
padding: 80px 0px 0px 150px;
positon: absolute;
}
#copyright {
color: white;
padding: 0px 0px 0px 900px;
positon: absolute;
}
#contact-info {
padding: 20px 10vw 0px 1600px;
position: absolute;
}
.block {
display: block;
}
#media (max-height: 100%) {
#welcome-section {
height: 800px;
}
}
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Condensed&display=swap" rel="stylesheet">
<main>
<nav id="navbar">
<ul>
<li>About</li>
<li>Skills</li>
<li>Projects</li>
<li>Contact</li>
<li>FCC Profile</li>
</ul>
</nav>
<h1>Hi, I'm Matt. <br>Future Front-End Developer.</h1>
<div id="welcome-section">
<img class="picture" src="https://i.ibb.co/71rD5ND/picture.png">
</div>
<section id="footer">
<form style="display: block" id="contact-info">
<label for="email" class="white">E-mail Address:
<input id="email" type="email" name="emailaddress" class="block">
</label>
<label for="inquiry" class="white">Comments or Inquiries:
<textarea rows="8" cols="25" style="resize: none" class="block">
</textarea>
</label>
<button type="submit">Submit</button>
</form>
<div id="footer-info1">
Matthew Paciello <br><br> 561-305-5761
<br> Boca Raton, FL<br> mpaciell#gmail.com
</div>
<div id="copyright">
#Matthew Paciello
</div>
</section>
</main>
I'm going to take a guess here that you have a very wide monitor that you are doing most of your work on. You have hard coded almost all of the padding and margins used in your code to place the different items on the page. This is the root of your problem. When you put something to width: 100% what is actually occurring is you are telling the browser to give a width of 100% of the current screen size. This means it will be subjective to the size of the browser that is displaying the page. The rest of your padding and margins though are set to a hard pixel value. Combine these two different display styles together and you can have a page that displays different portions off of the initial screen.
I think you might want something closer to this. I do still use hard coded padding values, but they are padding based on dynamic values instead of absolute values so it allows for easier reflowing and resizing of the page so it looks better for more screen sizes.
body {
width: 100%;
margin: 0px;
background-image: url("https://wallpaperplay.com/walls/full/d/8/b/329997.jpg");
background-attachment: fixed;
font-family: 'Ubuntu Condensed';
right: 0px;
}
h1 {
text-align: center;
white-space: nowrap;
}
#navbar {
height: 50px;
width: 100%;
background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
background-color: rgb(80, 80, 86);
border-bottom: solid;
border-width: 1px;
border-color: black;
top: 0px;
z-index: 5
}
a,
.white {
text-decoration: none;
color: white;
}
a:hover {
color: limegreen;
}
ul {
white-space: nowrap;
text-align: right;
padding-right: 10px;
padding-top: 10px;
margin: 0px;
}
li {
color: white;
display: inline;
padding-left: 10px;
}
#welcome-section {
padding-bottom: 40px;
text-align: center;
}
.picture {
border-radius: 50%;
z-index: 1;
box-shadow: 10px 10px 10px grey;
border-style: solid;
border-width: 1px;
}
#footer {
background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
background-size: auto;
border-top: solid;
bottom: 0px;
right: 0px;
border-width: 1px;
overflow: auto;
}
#footer-info1 {
color: white;
text-align: right;
padding-right: 10px;
float: right;
}
#email-section {
float: left;
padding-bottom: 10px;
padding-left: 10px;
}
.block {
display: block;
}
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Condensed&display=swap" rel="stylesheet">
<main>
<nav id="navbar">
<ul>
<li>About</li>
<li>Skills</li>
<li>Projects</li>
<li>Contact</li>
<li>FCC Profile</li>
</ul>
</nav>
<h1>Hi, I'm Matt. <br>Future Front-End Developer.</h1>
<div id="welcome-section">
<img class="picture" src="https://i.ibb.co/71rD5ND/picture.png">
</div>
<section id="footer">
<div id="email-section">
<form style="display: block" id="contact-info">
<label for="email" class="white">E-mail Address:
<input id="email" type="email" name="emailaddress" class="block">
</label>
<label for="inquiry" class="white">Comments or Inquiries:
<textarea rows="8" cols="25" style="resize: none" class="block">
</textarea>
</label>
<button type="submit">Submit</button>
</form>
</div>
<div id="footer-info1">
Matthew Paciello <br><br> 561-305-5761
<br> Boca Raton, FL<br> mpaciell#gmail.com
<div id="copyright">
#Matthew Paciello
</div>
</div>
</section>
</main>
If I'm reading this right, I suggest adjusting the bottom area and use a flex like so:
body {
width: 100%;
margin: 0px;
background-image: url("https://wallpaperplay.com/walls/full/d/8/b/329997.jpg");
background-attachment: fixed;
font-family: 'Ubuntu Condensed';
right: 0px;
}
h1 {
text-align: center;
padding: 200px 0px 0px 1320px;
position: absolute;
white-space: nowrap;
}
#navbar {
height: 50px;
width: 100%;
background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
background-color: rgb(80, 80, 86);
border-bottom: solid;
border-width: 1px;
border-color: black;
position: fixed;
top: 0px;
z-index: 5
}
a,
.white {
text-decoration: none;
color: white;
}
a:hover {
color: limegreen;
}
ul {
padding: 0px 0px 0px 1160px;
white-space: nowrap;
}
li {
color: white;
display: inline;
padding: 40px;
}
#welcome-section {
height: 800px;
}
.picture {
margin: 300px 0px 0px 1340px;
border-radius: 50%;
position: absolute;
z-index: 1;
box-shadow: 10px 10px 10px grey;
border-style: solid;
border-width: 1px;
}
#footer {
height: 230px;
background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
background-size: auto;
border-top: solid;
bottom: 0px;
right: 0px;
border-width: 1px;
display:flex;
flex-direction:row;
justify-content: space-between;
align-items: center;
}
#footer-info1 {
color: white;
}
#copyright {
color: white;
}
#contact-info {
}
.block {
display: block;
}
#media (max-height: 100%) {
#welcome-section {
height: 800px;
}
}
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Condensed&display=swap" rel="stylesheet">
<main>
<nav id="navbar">
<ul>
<li>About</li>
<li>Skills</li>
<li>Projects</li>
<li>Contact</li>
<li>FCC Profile</li>
</ul>
</nav>
<h1>Hi, I'm Matt. <br>Future Front-End Developer.</h1>
<div id="welcome-section">
<img class="picture" src="https://i.ibb.co/71rD5ND/picture.png">
</div>
<section id="footer">
<div id="footer-info1">
Matthew Paciello <br><br> 561-305-5761
<br> Boca Raton, FL<br> mpaciell#gmail.com
</div>
<div id="copyright">
#Matthew Paciello
</div>
<form style="display: block" id="contact-info">
<label for="email" class="white">E-mail Address:
<input id="email" type="email" name="emailaddress" class="block">
</label>
<label for="inquiry" class="white">Comments or Inquiries:
<textarea rows="8" cols="25" style="resize: none" class="block">
</textarea>
</label>
<button type="submit">Submit</button>
</form>
</section>
</main>
Your footer is 100% but:
The form in your footer have a 10vw padding-right which make the page horizontally scrollabe. And that white space on your right. either bring the form more to the left by reducing the padding-left or padding-right.
The position of the image is set by margin-top and margin-left which also plays a roll in making the page horizontally off, and scrollable. You can bring the image closer to the left by reducing margin-left of it. Or use other methods to center the image, if necessary.
Fiddle: https://jsfiddle.net/uatzust3/
Here is the fiddle for my problem, you'll observe that the children are not staying inside the parent div card and also I want the divs to take full width of parent which they are not taking.
Also, where should I be learning best practices? I am new to the community. Thanks in advance.
The left div(black_container) is short of content but should arrange the height according to the width of the right div(content_container) all the while staying inside the card div.
.card {
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.30), 0 15px 15px rgba(0, 0, 0, 0.22);
max-width: 800px;
margin: auto;
position: relative;
}
.black_container {
height: inherit;
background: #333;
display: inline-block;
vertical-align: top;
padding: 3%;
font-family: 'Nunito', sans-serif;
}
.content_container {
display: inline-block;
padding: 3%;
/* position: absolute;
top:0;
bottom: 0; */
}
.small_bar {
padding: 3px;
width: 30px;
margin: 0 auto;
background: #e4e4e4;
margin-top: 35px;
}
.name {
color: #fff;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 5px;
margin: 30px auto 5px auto;
text-align: center;
font-weight: 800;
}
.designation {
font-size: 10px;
margin: 0 auto;
}
.qrcode_container {
float: right;
}
.qr_container {
overflow: auto;
width: 100%;
}
.qr_text {
display: inline-block;
list-style-type: none;
}
.qr_text>li {
font-size: 18px;
font-weight: 600;
letter-spacing: 2.5px;
color: #9a9a9a;
}
.bars {
display: inline-block;
position: relative;
top: 10px;
}
.bars .small_bar {
width: 15px;
background: #777;
}
.bar {
position: absolute;
top: -80px;
}
.qr_code {
display: inline-block;
height: inherit;
border: 1px solid #e4e4e4;
padding: 5px;
}
.button {
width: 150px;
letter-spacing: 1;
text-transform: uppercase;
font-weight: 600;
color: #fff;
text-align: center;
background: #333;
padding: 5px 10px;
}
<div class="card">
<div class="black_container">
<div class="circular">
</div>
<p class="small_bar"></p>
<p class="name">wow</p>
<p class="name designation">Front-End Designer</p>
</div>
<div class="content_container">
<!-- qr code container ends -->
<div class="qr_container">
<div class="qrcode_container">
<ul class="qr_text">
<li>LOREM</li>
<li>IPSUM</li>
<li>DPOLER</li>
</ul>
<div class="bars">
<div class="small_bar bar"></div>
<div class="small_bar"></div>
</div>
<div class="qr_code"></div>
</div>
</div>
<!-- qr code container ends -->
<div class="card_content">
<p>Hello!</p>
<p>My name is lorem</p>
<p>I am a web designer</p>
<p>Im stuck</span>
</p>
<div class="button">button</div>
</div>
<div class="card_footer"></div>
</div>
</div>
A parent cannot take the height of a direct child if the child is absolute because the absolute elements are removed from the document flow(like floats), so in this case "card" doesn't even know "content_container" even exists .
https://jsfiddle.net/OmarIsComing/eq4L86g9/1/
update:
solution with flexbox: https://jsfiddle.net/OmarIsComing/eq4L86g9/2/
solution without flexbox: https://jsfiddle.net/OmarIsComing/eq4L86g9/3/
If flexbox is an option, this is easy :
Add display: flex to your card
Add flex: 1 to the content-container
See demo below:
.card {
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.30), 0 15px 15px rgba(0, 0, 0, 0.22);
max-width: 800px;
margin: auto;
position: relative;
display: flex;
}
.black_container {
height: inherit;
background: #333;
display: inline-block;
vertical-align: top;
padding: 3%;
font-family: 'Nunito', sans-serif;
}
.content_container {
display: inline-block;
padding: 3%;
/* position: absolute;
top:0;
bottom: 0; */
flex: 1;
}
.small_bar {
padding: 3px;
width: 30px;
margin: 0 auto;
background: #e4e4e4;
margin-top: 35px;
}
.name {
color: #fff;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 5px;
margin: 30px auto 5px auto;
text-align: center;
font-weight: 800;
}
.designation {
font-size: 10px;
margin: 0 auto;
}
.qrcode_container {
float: right;
}
.qr_container {
overflow: auto;
width: 100%;
}
.qr_text {
display: inline-block;
list-style-type: none;
}
.qr_text>li {
font-size: 18px;
font-weight: 600;
letter-spacing: 2.5px;
color: #9a9a9a;
}
.bars {
display: inline-block;
position: relative;
top: 10px;
}
.bars .small_bar {
width: 15px;
background: #777;
}
.bar {
position: absolute;
top: -80px;
}
.qr_code {
display: inline-block;
height: inherit;
border: 1px solid #e4e4e4;
padding: 5px;
}
.button {
width: 150px;
letter-spacing: 1;
text-transform: uppercase;
font-weight: 600;
color: #fff;
text-align: center;
background: #333;
padding: 5px 10px;
}
<div class="card">
<div class="black_container">
<div class="circular">
</div>
<p class="small_bar"></p>
<p class="name">wow</p>
<p class="name designation">Front-End Designer</p>
</div>
<div class="content_container">
<!-- qr code container ends -->
<div class="qr_container">
<div class="qrcode_container">
<ul class="qr_text">
<li>LOREM</li>
<li>IPSUM</li>
<li>DPOLER</li>
</ul>
<div class="bars">
<div class="small_bar bar"></div>
<div class="small_bar"></div>
</div>
<div class="qr_code"></div>
</div>
</div>
<!-- qr code container ends -->
<div class="card_content">
<p>Hello!</p>
<p>My name is lorem</p>
<p>I am a web designer</p>
<p>Im stuck</span>
</p>
<div class="button">button</div>
</div>
<div class="card_footer"></div>
</div>
</div>
Use the class card-body, this will keep the contents inside of the card.
<div class="card border-success">
<div class="card-header border-success">
<h3 class="card-title">Card Title</h3>
</div>
<div class="card-body border-success">
<dl>
<dt>
Stuff
</dt>
<dd>
Stuff Details
</dd>
</dl>
</div>
</div>
replace the .content_container css with:
.content_container {
display: inline-block;
padding: 3%;
vertical-align: top;
}
I think the CSS attribute position: absolute; is causing this issue. In short, absolute position removes the element from the flow of other elements; therefore, its height is simply ignored, and never counted in your .card container.
Why is my div moving to right whenever I specify overflow-y: scroll on the .messages element?
Even when I use margin-left: -10px;, it doesn't move to the left!
#import url(http://fonts.googleapis.com/css?family=Roboto:300,400,900);
#import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
* {
box-sizing: border-box;
margin: 0;
}
body {
background: #BDC1C6;
font-family: 'Roboto';
}
p {
font-weight: 300;
}
.chat {
width: 300px;
background: #fff;
margin: 0 auto;
}
header {
background: #35323C;
height: 50px;
padding: 5px 10px;
}
.menu-icon {
background: #2F2E33;
padding: 5px 10px;
float: left;
font-size: 3em;
line-height: 0.5em;
color: #fff;
border-radius: 3px;
}
.menu-icon:hover {
background: #39caad;
cursor: pointer;
}
h1 {
float: right;
color: #fff;
margin: 5px;
font-weight: 300;
font-size: 1.3em;
}
.menulist {
background: #39caad;
color: #fff;
text-align: center;
padding: 10px;
}
.menulist:hover {
cursor: pointer;
background: rgb(255, 0, 0);
text-align: center;
padding: 20px;
}
.openchat {
background: #39caad;
color: #fff;
text-align: center;
padding: 5px;
}
.new {
background: rgb(57, 202, 173);
color: #fff;
text-align: center;
padding: 20px;
}
.new:hover {
cursor: pointer;
background: rgba(57, 202, 173, 0.9);
}
.messages {
padding: 10px;
overflow-y: scroll;
height: 300px;
}
.message {
float: left;
width: 100%;
margin: 10px 0;
border-bottom: 1px solid #ccc;
}
.message p {
font-size: 0.8em;
width: 90%;
margin: 5px 0;
}
.message:hover {
background: #39caad;
cursor: pointer;
}
.messageSender {
text-align: right;
float: right;
width: 100%;
margin: 10px 0;
border-bottom: 1px solid #ccc;
}
.messageSender p {
font-size: 0.8em;
width: 90%;
margin: 5px 0;
}
.messageReceiver {
float: left;
width: 100%;
margin: 10px 0;
border-bottom: 1px solid #ccc;
}
.messageReceiver p {
font-size: 0.8em;
width: 90%;
margin: 5px 0;
}
img {
border-radius: 100%;
float: left;
margin: 0 10px 15px 0;
}
img.sender {
border-radius: 100%;
float: right !important;
margin: 0 10px 15px 0;
width: 35px;
height: 35px;
}
img.receiver {
border-radius: 100%;
float: left;
margin: 0 10px 15px 0;
width: 35px;
height: 35px;
}
p.time {
color: rgba(0, 0, 0, 0.5);
font-weight: 400;
}
p.chattime {
color: rgba(0, 0, 0, 0.5);
font-weight: 400;
font-size: 10px;
}
h2 {
font-size: 1em;
font-weight: 400;
}
h2:after {
content: '';
display: inline-block;
height: 10px;
width: 10px;
background: #39caad;
border-radius: 100%;
margin-left: 5px;
}
h2.send:before {
content: '';
display: inline-block;
height: 10px;
width: 10px;
background: #39caad;
border-radius: 100%;
margin-left: 5px;
}
h2.send:after {
content: '';
height: 0px;
width: 0px;
border-radius: 00%;
margin-right: 5px;
}
footer {
width: 100%;
background: #fff;
padding: 10px;
text-align: center;
font-size: 0.8em;
}
footer p:before,
footer p:after {
content: ' - ';
}
<div class="chat">
<header>
<div class="menu-icon" id="menubutton"><span class="entypo-menu"></span>
</div>
<h1>Chats</h1>
</header>
<?php include( "menu.php"); ?>
<div class="openchat" id="openchat">
<img style="width:35px; height: 35px;" src="http://dtechnomist.com/clients/chat/assets/users/2.jpg" />
<h2>XYZ</h2>
<p class="time">Online</p>
</div>
<section class="messages" id="chatBox">
<div class="messageReceiver">
<img class="receiver" src="assets/users/1.jpg">
<h2 class="receive">Admin 1</h2>
<p class="chattime">12:00:00 AM, 3rd Jan16</p>
<p>There ?</p>
</div>
<br>
<br>
<div class="messageSender">
<img class="sender" src="assets/users/2.jpg">
<h2 class="send"> You</h2>
<p class="chattime">12:00:00 AM, 4th Jan16</p>
<p>Yes</p>
</div>
<br>
<br>
<div class="messageReceiver">
<img class="receiver" src="http://dtechnomist.com/clients/chat/assets/users/1.jpg">
<h2 class="receive">Admin 1</h2>
<p class="chattime">08:59:33 PM, 4th Jan16</p>
<p></p>
</div>
<div class="messageReceiver">
<img class="receiver" src="assets/users/1.jpg">
<h2 class="receive">Admin 1</h2>
<p class="chattime">09:05:55 PM, 4th Jan16</p>
<p>hi</p>
</div>
<br>
<br>
<div class="messageReceiver">
<img class="receiver" src="http://dtechnomist.com/clients/chat/assets/users/1.jpg">
<h2 class="receive">Admin 1</h2>
<p class="chattime">09:06:02 PM, 4th Jan16</p>
<p>ok</p>
</div>
<br>
<br>
<div class="messageSender">
<img class="sender" src="http://dtechnomist.com/clients/chat/assets/users/2.jpg">
<h2 class="send"> You</h2>
<p class="chattime">09:06:58 PM, 4th Jan16</p>
<p>hello</p>
</div>
<br>
<br>
<div class="messageSender">
<img class="sender" src="http://dtechnomist.com/clients/chat/assets/users/2.jpg">
<h2 class="send"> You</h2>
<p class="chattime">09:07:08 PM, 4th Jan16</p>
<p>hi</p>
</div>
<br>
<br>
<div class="messageSender">
<img class="sender" src="http://dtechnomist.com/clients/chat/assets/users/2.jpg">
<h2 class="send"> You</h2>
<p class="chattime">09:07:31 PM, 4th Jan16</p>
<p>asd</p>
</div>
</section>
<section class="write">
<textarea type="text" name="msg" id="msg" style="width:85%; height: 30px; margin: 0px 0px 0px 2%; resize: none" placeholder="Type your message here..."></textarea>
<button name="send" id="sendMsg" style="width: 9%;"><span class="entypo-plus"></span>Send</button>
</section>
<footer>
<p>Designed by Kashan Shah
</p>
</footer>
</div>
You're seeing this behavior due to collapsing margins.
When you add overflow-y: scroll to the element, a new block formatting context is established, which means that the .openchat element's vertical margin no longer collapses with the .messages element. Since the margins no longer collapse, the element is shifted to the right.
Margins of elements that establish new block formatting contexts (such as floats and elements with overflow other than visible) do not collapse with their in-flow children.
To resolve this issue, you could either add overflow: hidden to the .openchat element in order hide the overflowing margin (which essentially prevents the margin from adjoining):
Updated Example
.openchat {
background: #39caad;
color: #fff;
text-align: center;
padding: 5px;
overflow: hidden;
}
Alternatively, you could also just remove the margin-bottom from the child img element:
Updated Example
.openchat img {
margin-bottom: 0;
}
I have two different sections with exactly the same CSS code but if you look at the image below, you can see at the width the screen is set to, that the images are all already moved onto a new line (which is what I want) but the categories underneath are still on the same line and get more "squashed" together. How can I make it so the categories move onto a new line like the images do? Thanks in advance.
Image of problem - http://i.imgur.com/u6GnTa1.png
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Lakeside Books</title>
<link rel="stylesheet" type="text/css" href="masterstyle.css">
<meta name="viewsize" content="width-device-width,initial-scale=1.0">
<!--[if IE]>
<script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<nav id="nav">
<h3 id="welcometext">Welcome To<br>Lakeside Books</h3>
<div id="searchbar">
<form action="http://www.example.com/search.php">
<input type="text" name="search" placeholder=" ...Search Book Title" class="searchstyle"/>
</form>
</div>
<ul>
<li style="background-color: #333">
<a href="1Index.html" class="link">
Home
</a>
</li>
<li>
<a href="2Catgeories.html" class="link">
Categories
</a>
</li>
<li>
<a href="http://example.com" class="link">
Bestsellers
</a>
</li>
<li>
<a href="http://example.com" class="link">
Find Us
</a>
</li>
<li>
<a href="http://example.com" class="link">
Contact
</a>
</li>
</ul>
</nav>
</div>
<div id="sectionone">
<div id="containerone">
<div id="header">
<div id="logo">
<h1>LAKESIDE BOOKS</h1>
<p>KERRYS LOCAL BOOKSTORE</p>
</div>
</div>
</div>
</div>
<div id="sectiontwo">
<div id="containertwo">
<h2 class="sectionhead">Best Selling Books</h2>
<div id="bestsellerimages">
<figure>
<img src="Images/4.jpg" alt="book1" height="200" width="131" class="imgbot">
<figcaption>The Girl On The Train <br>
<span style="font-style: italic; font-size: 0.9em">Paula Hawkins</span></figcaption>
</figure>
<figure>
<img src="Images/3.jpg" alt="book2" height="200" width="131" class="imgbot">
<figcaption>Meet Me In Manhattan <br>
<span style="font-style: italic; font-size: 0.9em">Claudia Carroll</span></figcaption>
</figure>
<figure>
<img src="Images/5.jpg" alt="book1" height="200" width="131" class="imgbot">
<figcaption>The Pointless Book 2 <br>
<span style="font-style: italic; font-size: 0.9em">Alfie Deyes</span></figcaption>
</figure>
</div>
<h3 class="secfooter">Mere Bestsellers <span style="color: #ed786a;"><strong>Here</strong></span></h3>
</div>
</div>
<div id="sectionthree">
<div id="containerthree">
<h2 class="sectionhead">Popular Categories</h2>
<div class="categories">
<h3>Fiction</h3>
<p>New Releases</p>
<p>Australian Fiction</p>
<p>Crime & Mystery</p>
<p>Childrens</p>
<p>Fantasy</p>
</div>
<div class="categories">
<h3>Fiction</h3>
<p>New Releases</p>
<p>Australian Fiction</p>
<p>Crime & Mystery</p>
<p>Childrens</p>
<p>Fantasy</p>
</div>
<div class="categories">
<h3>Fiction</h3>
<p>New Releases</p>
<p>Australian Fiction</p>
<p>Crime & Mystery</p>
<p>Childrens</p>
<p>Fantasy</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
html, body { /* ### */
margin:0;
padding:0;
height:100%;
width:100%;
}
body {
background-color: #fdfdfd;
font-family: Arial, "Open Sans", sans-serif-light, sans-serif, "Segoe UI";
}
#wrapper {
width: 100%;
height: 100%;
margin:0 0 0 20%; /* ### */
}
#sidebar {
background-color: #212528;
position: fixed;
width: 20%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.1);
}
#nav {
color: #DADADA;
display: block;
max-width: 100%;
}
#nav ul {
padding-left: 0;
}
#nav li {
list-style-type: none;
margin: 0;
padding: 0.75em 0 0.75em 0;
text-align: center;
max-width: 100%;
}
#nav li:hover {
background:#333;
}
#nav li a {
display: block;
padding: 0.5em 0;
}
.link {
text-align: right;
margin-right: 25%;
letter-spacing: 1px;
display: block;
}
a:link, a:visited, a:hover, a:active{
color: #DADADA;
text-decoration: none;
}
#welcometext {
text-align: center;
/*font-style: italic;*/
text-transform: uppercase;
font-size: 1em;
margin-top: 2em;
}
#searchbar {
width: 70%;
margin-left: auto;
margin-right: auto;
padding: 1em 1em 0.5em 1em;
text-align: right;
}
#searchbar .searchstyle{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#searchbar input {
max-width: 95%;
}
#sectionone {
/*position: fixed;*/
top: 0;
right: 0;
width: 80%;
}
#containerone {
margin-top: 0;
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
border-bottom: 2px solid #DADADA;
box-shadow: inset 0 -6px 0 0 #fdfdfd, inset 0 -8px 0 0 #DADADA;
}
#header {
margin: 6em 0 6em 0;
}
#logo h1 {
color: #ed786a;
text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.1);
letter-spacing: 13px;
}
#logo p {
margin-top: -0.6em;
color: #888888;
letter-spacing: 4px;
font-size: 0.85em;
}
#sectiontwo {
width: 80%;
top: 0;
right: 0;
}
#containertwo {
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
color: #888888;
padding: 0 0 2em 0;
border-bottom: 2px solid #DADADA;
box-shadow: inset 0 -6px 0 0 #fdfdfd, inset 0 -8px 0 0 #DADADA;
}
.sectionhead{
margin: 2em 0 2em 0;
color: #888888;
text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.1);
}
#bestsellerimages{
float: left;
display: inline-block;
width: 100%;
max-width: 100%;
margin: 0 0 2em 0;
}
#bestsellerimages img{
padding: 0;
}
#bestsellerimages figure{
display: inline-block;
width: 131px;
}
#bestsellerimages figcaption{
font-size: 1.2em;
}
#bestsellerimages figure .imgbot{
margin: 0 0 0.5em 0;
}
#sectionthree {
width: 80%;
top: 0;
right: 0;
}
#containerthree {
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
color: #888888;
padding: 0 0 2em 0;
border-bottom: 2px solid #DADADA;
box-shadow: inset 0 -6px 0 0 #fdfdfd, inset 0 -8px 0 0 #DADADA;
}
.secfooter{
color: #888888;
letter-spacing: 2px;
font-size: 0.85em;
}
.categories{
max-width: 100%;
width: 20%;
padding: 0 1em 0 1em;
display: inline-block;
}
The issue is that your categories divs are set to width: 20% with display: inline-block causing them to remain in columns. First, if you want them to stack on top of each other you either change the width to 100% and/or display to block:
.categories{
display: block;
width: 100%;
}
This will affect the design on desktop so if you're building this responsively you would actually just add:
#media only screen and (max-width: 568px) {
.categories{
display: block;
width: 100%;
}
}