This question already has answers here:
What is a clearfix?
(10 answers)
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Fill remaining vertical space with CSS using display:flex
(6 answers)
Closed 2 years ago.
I have seen many answers but none seem to work for me...
My footer has come right next to the paragraphs. How can I get them to down of the page... Also how to make the whole page be seen at the same time without needing to scroll down?
Below is my code:
body {
margin: 0;
padding: 0;
background: #85dcb8;
}
header {
background: coral;
padding: 1px;
margin: 0px;
text-align: center;
border-bottom: black 4px solid;
float: center;
}
header h1 {
margin: 0px;
}
header p {
border-bottom: solid 5px black;
display: inline-block;
padding-bottom: 10px;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
text-align: center;
width: 70%;
margin-left: 20%;
}
.side-bar {
grid-gap: 2px;
padding-left: 10px;
float: left;
}
.links {
display: block;
width: 100%;
padding: 10px 20px;
border-bottom: 1px solid black;
}
a {
text-decoration: none;
color: red;
}
a:hover {
color: blue;
text-decoration: underline;
}
footer {
background-color: #000000;
color: #fff;
line-height: normal;
word-spacing: 2px;
text-align: center;
padding: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Web Page</title>
</head>
<body>
<header>
<h1>Welcome to my web page</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, ab!
</p>
</header>
<aside>
<div class="side-bar">
<div class="links">Page 1</div>
<div class="links">Page 2</div>
<div class="links">Page 3</div>
<div class="links">Page 4 </div>
<div class="links">Page 5</div>
<div class="links">Page 6</div>
<div class="links">Page 7</div>
<div class="links">Page 8</div>
<div class="links">Page 9</div>
<div class="links">Page 10</div>
</div>
</aside>
<section>
<div class="container">
<div>
<h2>Heading 1</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 2</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 3</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 4</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 5</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 6</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
</div>
</section>
<footer>
This webpage officialy belongs to Anirudh. Copyrights since 2020 ©
</footer>
</body>
</html>
Adding a margin and giving it a particular value makes it hard in math...So I would prefer some easier method with simple CSS.
Image of how it looks for me.
Also any mistakes in my code that can be improved to make it more efficient?
Thanks.
EDIT: Adding an empty div helped me...Empty div with the class of clr and using clear:both; for the clr class in CSS works..
body {
margin: 0;
padding: 0;
background: #85dcb8;
}
header {
background: coral;
padding: 1px;
margin: 0px;
text-align: center;
border-bottom: black 4px solid;
float: center;
}
header h1 {
margin: 0px;
}
header p {
border-bottom: solid 5px black;
display: inline-block;
padding-bottom: 10px;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
text-align: center;
width: 70%;
margin-left: 20%;
}
.side-bar {
grid-gap: 2px;
padding-left: 10px;
float: left;
}
.links {
display: block;
width: 100%;
padding: 10px 20px;
border-bottom: 1px solid black;
}
a {
text-decoration: none;
color: red;
}
a:hover {
color: blue;
text-decoration: underline;
}
footer {
background-color: #000000;
color: #fff;
line-height: normal;
word-spacing: 2px;
text-align: center;
padding: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Web Page</title>
</head>
<body>
<header>
<h1>Welcome to my web page</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, ab!
</p>
</header>
<aside>
<div class="side-bar">
<div class="links">Page 1</div>
<div class="links">Page 2</div>
<div class="links">Page 3</div>
<div class="links">Page 4 </div>
<div class="links">Page 5</div>
<div class="links">Page 6</div>
<div class="links">Page 7</div>
<div class="links">Page 8</div>
<div class="links">Page 9</div>
<div class="links">Page 10</div>
</div>
</aside>
<section>
<div class="container">
<div>
<h2>Heading 1</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 2</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 3</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 4</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 5</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 6</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 4</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 5</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 6</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
</div>
</section>
<footer>
This webpage officialy belongs to Anirudh. Copyrights since 2020 ©
</footer>
</body>
</html>
It's working...
body {
margin: 0;
padding: 0;
background: #85dcb8;
}
header {
background: coral;
padding: 1px;
margin: 0px;
text-align: center;
border-bottom: black 4px solid;
float: center;
}
header h1 {
margin: 0px;
}
header p {
border-bottom: solid 5px black;
display: inline-block;
padding-bottom: 10px;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
text-align: center;
width: 70%;
margin-left: 20%;
}
.side-bar {
grid-gap: 2px;
padding-left: 10px;
float: left;
}
.links {
display: block;
width: 100%;
padding: 10px 20px;
border-bottom: 1px solid black;
}
a {
text-decoration: none;
color: red;
}
a:hover {
color: blue;
text-decoration: underline;
}
footer {
background-color: #000000;
color: #fff;
line-height: normal;
word-spacing: 2px;
text-align: center;
padding: 50px;
clear: both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Web Page</title>
</head>
<body>
<header>
<h1>Welcome to my web page</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, ab!
</p>
</header>
<aside>
<div class="side-bar">
<div class="links">Page 1</div>
<div class="links">Page 2</div>
<div class="links">Page 3</div>
<div class="links">Page 4 </div>
<div class="links">Page 5</div>
<div class="links">Page 6</div>
<div class="links">Page 7</div>
<div class="links">Page 8</div>
<div class="links">Page 9</div>
<div class="links">Page 10</div>
<div class="links">Page 7</div>
<div class="links">Page 8</div>
<div class="links">Page 9</div>
<div class="links">Page 10</div>
</div>
</aside>
<section>
<div class="container">
<div>
<h2>Heading 1</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 2</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 3</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 4</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 5</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 6</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 4</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 5</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 6</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
</div>
</section>
<footer>
This webpage officialy belongs to Anirudh. Copyrights since 2020 ©
</footer>
</body>
</html>
You can check now... it's working
section, aside {
min-height: calc(100vh - 100px);
/* here, replace 100px with the size of your header and footer */
}
This makes it so the main content is, at a minimum, the size of the screen minus the header and the footer size, thus pushing the footer to the bottom of the page.
As for the rest of your code, it looks fine to me.
body {
margin: 0;
padding: 0;
background: #85dcb8;
}
header {
background: coral;
padding: 1px;
margin: 0px;
text-align: center;
border-bottom: black 4px solid;
float: center;
}
header h1 {
margin: 0px;
}
header p {
border-bottom: solid 5px black;
display: inline-block;
padding-bottom: 10px;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
text-align: center;
width: 70%;
margin-left: 20%;
}
.side-bar {
grid-gap: 2px;
padding-left: 10px;
float: left;
}
.links {
display: block;
width: 100%;
padding: 10px 20px;
border-bottom: 1px solid black;
}
a {
text-decoration: none;
color: red;
}
a:hover {
color: blue;
text-decoration: underline;
}
footer {
background-color: #000000;
color: #fff;
line-height: normal;
word-spacing: 2px;
text-align: center;
padding: 50px;
clear: both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Web Page</title>
</head>
<body>
<header>
<h1>Welcome to my web page</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, ab!
</p>
</header>
<aside>
<div class="side-bar">
<div class="links">Page 1</div>
<div class="links">Page 2</div>
<div class="links">Page 3</div>
<div class="links">Page 4 </div>
<div class="links">Page 5</div>
<div class="links">Page 6</div>
<div class="links">Page 7</div>
<div class="links">Page 8</div>
<div class="links">Page 9</div>
<div class="links">Page 10</div>
<div class="links">Page 7</div>
<div class="links">Page 8</div>
<div class="links">Page 9</div>
<div class="links">Page 10</div>
</div>
</aside>
<section>
<div class="container">
<div>
<h2>Heading 1</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 2</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 3</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 4</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 5</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 6</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
</div>
</section>
<footer>
This webpage officialy belongs to Anirudh. Copyrights since 2020 ©
</footer>
</body>
</html>
Related
I'm writing an HTML page that has 3 divs in it. and each div has a heading and a para. currently, the para is getting aligned as per the heading content height. How can I make sure that the paras in all the divs start at the same position irrespective of the h2 content?
Here is my current code.
.parent{
display: flex;
}
.child{
border: 1px solid black;
margin: 1em;
padding: 1em;
}
.child h2{
border-bottom: 1px solid;
min-height: max-content;
}
<div class="parent">
<div class="child">
<h2>Proper heading with more co</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam,</p>
</div>
<div class="child">
<h2>large heading that is bigger than proper heading</h2>
<p>labore odio minima cumque molestiae amet vitae! Voluptatum</p>
</div>
<div class="child">
<h2>small</h2>
<p>
cupiditate unde vel culpa veritatis eius dicta, quia, quas dolores
similique hic! Iure.
</p>
</div>
</div>
if you set the height of h2 to a specific value, it will be right!
for example:
.parent{
display: flex;
}
.child{
border: 1px solid black;
margin: 1em;
padding: 1em;
}
.child h2{
border-bottom: 1px solid;
height: 60px;
}
<div class="parent">
<div class="child">
<h2>Proper heading with more co</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam,</p>
</div>
<div class="child">
<h2>large heading that is bigger than proper heading</h2>
<p>labore odio minima cumque molestiae amet vitae! Voluptatum</p>
</div>
<div class="child">
<h2>small</h2>
<p>
cupiditate unde vel culpa veritatis eius dicta, quia, quas dolores
similique hic! Iure.
</p>
</div>
</div>
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 1 year ago.
I'm trying to learn HTML and CSS. However, I was doing an exercise, and now I'm stuck because those 4 articles in <section id="news"> don't display side by side, and I wasn't able to figure out what was happening.
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #1A4575;
}
header {
background-color: #2F5075;
width: 600px;
text-align: center;
margin: 10px;
}
nav {
display: inline-block;
}
nav>a {
text-decoration: none;
background-color: #2B71C2;
color: white;
}
nav>a:hover {
color: #80B7F7;
}
header>h1 {
display: inline-block;
}
section#breaking>article {
width: 700px;
background-color: rgba(172, 35, 35, 0.719);
color: white;
font-size: 20px;
margin: 5px;
padding: 3.5px;
}
section#news {
background-color: #2B88C2;
}
section#news>article {
width: 400px;
height: 250px;
display: inline-block;
background-color: white;
color: black;
border: 3px solid black;
margin: 5px 5px 5px 5px;
padding: 5px 5px;
}
section#news>h1 {
text-align: center;
padding: 5px;
}
aside {
background-color: #1A4575;
color: white;
}
footer {
background-color: #2F5075;
text-align: center;
color: #368FF5;
}
<header>
<h1>Menu</h1>
<nav>
a
b
c
d
e
</nav>
</header>
<main>
<section id="breaking">
<article>
<h2>Breaking news</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda culpa asperiores voluptate. Eius pariatur vero, at repellendus sunt sequi ad qui doloribus excepturi provident ipsam, libero deleniti culpa nihil et.</p>
<aside>
<p>Written by João Marcelo</p>
</aside>
</article>
</section>
<section id="news">
<h1>Daily News</h1>
<article>
<h2>Title 1</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit amet facilis officia ex eos quae possimus nisi, nostrum saepe, debitis obcaecati ea doloribus adipisci, soluta veritatis! Deserunt quam molestias ut.
</p>
<aside>
<p>Written by Pedro Henrique Vasconcelos</p>
</aside>
</article>
<article>
<h2>Title 2</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi asperiores quo omnis fugit error ipsum provident aut libero consequatur minima illo, distinctio sed, culpa temporibus deserunt obcaecati quidem. Quia, assumenda.
</p>
<aside>
<p>Written by Leonardo Alves de Paiva</p>
</aside>
</article>
<article>
<h2>Title 3</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi asperiores quo omnis fugit error ipsum provident aut libero consequatur minima illo, distinctio sed, culpa temporibus deserunt obcaecati quidem. Quia, assumenda.
</p>
<aside>
<p>Written by Beatriz halfd</p>
</aside>
</article>
<article>
<h2>Title 4</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi asperiores quo omnis fugit error ipsum provident aut libero consequatur minima illo, distinctio sed, culpa temporibus deserunt obcaecati quidem. Quia, assumenda.
</p>
<aside>
<p>Written by Joana Bohemia</p>
</aside>
</article>
</section>
</main>
<footer>
<p>Developed by Leonardo</p>
</footer>
Set the vertical align to top on the articles. The default is baseline.
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #1A4575;
}
header {
background-color: #2F5075;
width: 600px;
text-align: center;
margin: 10px;
}
nav {
display: inline-block;
}
nav>a {
text-decoration: none;
background-color: #2B71C2;
color: white;
}
nav>a:hover {
color: #80B7F7;
}
header>h1 {
display: inline-block;
}
section#breaking>article {
width: 700px;
background-color: rgba(172, 35, 35, 0.719);
color: white;
font-size: 20px;
margin: 5px;
padding: 3.5px;
}
section#news {
background-color: #2B88C2;
}
section#news>article {
width: 400px;
height: 250px;
display: inline-block;
background-color: white;
color: black;
border: 3px solid black;
margin: 5px 5px 5px 5px;
padding: 5px 5px;
vertical-align:top;
}
section#news>h1 {
text-align: center;
padding: 5px;
}
aside {
background-color: #1A4575;
color: white;
}
footer {
background-color: #2F5075;
text-align: center;
color: #368FF5;
}
<header>
<h1>Menu</h1>
<nav>
a
b
c
d
e
</nav>
</header>
<main>
<section id="breaking">
<article>
<h2>Breaking news</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda culpa asperiores voluptate. Eius pariatur vero, at repellendus sunt sequi ad qui doloribus excepturi provident ipsam, libero deleniti culpa nihil et.</p>
<aside>
<p>Written by João Marcelo</p>
</aside>
</article>
</section>
<section id="news">
<h1>Daily News</h1>
<article>
<h2>Title 1</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit amet facilis officia ex eos quae possimus nisi, nostrum saepe, debitis obcaecati ea doloribus adipisci, soluta veritatis! Deserunt quam molestias ut.
</p>
<aside>
<p>Written by Pedro Henrique Vasconcelos</p>
</aside>
</article>
<article>
<h2>Title 2</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi asperiores quo omnis fugit error ipsum provident aut libero consequatur minima illo, distinctio sed, culpa temporibus deserunt obcaecati quidem. Quia, assumenda.
</p>
<aside>
<p>Written by Leonardo Alves de Paiva</p>
</aside>
</article>
<article>
<h2>Title 3</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi asperiores quo omnis fugit error ipsum provident aut libero consequatur minima illo, distinctio sed, culpa temporibus deserunt obcaecati quidem. Quia, assumenda.
</p>
<aside>
<p>Written by Beatriz halfd</p>
</aside>
</article>
<article>
<h2>Title 4</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi asperiores quo omnis fugit error ipsum provident aut libero consequatur minima illo, distinctio sed, culpa temporibus deserunt obcaecati quidem. Quia, assumenda.
</p>
<aside>
<p>Written by Joana Bohemia</p>
</aside>
</article>
</section>
</main>
<footer>
<p>Developed by Leonardo</p>
</footer>
I have an element with an image and some text next to it, The content is centered inside the parent.
When I try to add more elements after the image and the text, As you see the green text with red border overflows the parent .about and goes to the next parent .contact-us
Here is a fiddle to view and edit the code:
https://jsfiddle.net/04rmefx7/
Here is the code:
body,
html {
height: 100%;
}
.inline-block {
display: inline-block;
}
/* Start about */
.about {
background-color: #dad04a;
position: relative;
height: 100%
}
.about img {
height: 100px;
}
p{
border: 4px solid red;
color: green;
font-weight: bold;
}
/* End about */
/* Start contact-us */
.contact-us {
background-color: #eeb03c;
}
/* End contact-us -->
<link href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Start about -->
<div class="about text-center">
<div class="inline-block">
<img class="pull-left" src="https://placehold.it/600">
<div class="pull-left text-left">
<h4 class="inline-block">Heading</h4>
<span>Lorem ipsum dolor sit amet</span>
<br>
<span>Lorem ipsum dolor sit amet</span>
<br>
<span>Lorem ipsum dolor sit amet</span>
<br>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
<br>
<span>Lorem ipsum dolor sit amet</span>
</div>
<div class="clearfix"></div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et velit officia alias harum nam illum pariatur deleniti reprehenderit, aliquam, commodi iure modi, facilis error dolorum doloribus. Porro, hic explicabo dolores. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Dolore dolor explicabo quas, est, iure non repellendus eaque, nemo eum repudiandae voluptatem rem quos iste a. Non nisi aliquid consequuntur. Libero!</p>
</div>
<!-- End about -->
<!-- Start contact-us -->
<div class="contact-us text-center">
<h2>Contact us</h2>
</div>
<!-- End contact-us -->
Does it work for you to remove height: 100% from .about?
I'm trying to achieve a layout similar to this:
Where:
Each content block has multiple elements inside of it
Content blocks and sidebar height is variable
Not using javascript
The closest I've got is this (but notice how the articles before the sidebar ends occupy much more space than desired, and buttons in the 3rd article occupy 100% of the page while the rest of the article's content occupy less):
.page {
width: 1000px;
margin: auto;
}
.sidebar {
float: right;
width: 300px;
height: 410px;
background: red;
}
.content {
padding-right: 20px;
}
article {
background: #cdcdcd;
padding: 15px;
margin-bottom: 20px;
h3 { margin: 0; }
}
.buttons {
display: flex;
justify-content: space-between;
}
<div class="page">
<div class="sidebar"></div>
<div class="content">
<article>
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
<div class="buttons">
<button>btn1</button>
<button>btn2</button>
</div>
</article>
<article>
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
<div class="buttons">
<button>btn1</button>
<button>btn2</button>
</div>
</article>
<article>
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
<div class="buttons">
<button>btn1</button>
<button>btn2</button>
</div>
</article>
<article>
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
<div class="buttons">
<button>btn1</button>
<button>btn2</button>
</div>
</article>
<article>
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
<div class="buttons">
<button>btn1</button>
<button>btn2</button>
</div>
</article>
<article>
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
<div class="buttons">
<button>btn1</button>
<button>btn2</button>
</div>
</article>
</div>
</div>
Please let me know if I'm not being clear.
You need to define width for first 3 article divs.
.page {
width: 1000px;
margin: auto;
}
.sidebar {
float: right;
width: 300px;
height: 527px;
background: red;
}
.content {
padding-right: 20px;
}
article {
background: #cdcdcd;
padding: 15px;
margin-bottom: 20px;
h3 { margin: 0; }
}
.buttons {
display: flex;
justify-content: space-between;
}
.small-box-content{
width: 67%;
display: inline-block;
}
<div class="page">
<div class="sidebar"></div>
<div class="content">
<article class="small-box-content">
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
<div class="buttons">
<button>btn1</button>
<button>btn2</button>
</div>
</article>
<article class="small-box-content">
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
<div class="buttons">
<button>btn1</button>
<button>btn2</button>
</div>
</article>
<article class="small-box-content">
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
<div class="buttons">
<button>btn1</button>
<button>btn2</button>
</div>
</article>
<article>
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
<div class="buttons">
<button>btn1</button>
<button>btn2</button>
</div>
</article>
<article>
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
<div class="buttons">
<button>btn1</button>
<button>btn2</button>
</div>
</article>
<article>
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
<div class="buttons">
<button>btn1</button>
<button>btn2</button>
</div>
</article>
</div>
</div>
please let me know this is what you want Just added new div class for three article .side_left
.page {
width: 1000px;
margin: auto;
}
.side_left{
width:650px;
}
.sidebar {
float: right;
width: 300px;
height: 420px;
margin-top:20px;
background: red;
}
.content {
padding-right: 20px;
}
article {
background: #cdcdcd;
padding: 15px;
width:100%;
margin-bottom: 20px;
}
h3 { margin: 0; }
.buttons {
display: flex;
justify-content: space-between;
}
<div class="page">
<div class="sidebar"></div>
<div class="content">
<div class="side_left">
<article>
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
<div class="buttons">
<button>btn1</button>
<button>btn2</button>
</div>
</article>
<article>
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
<div class="buttons">
<button>btn1</button>
<button>btn2</button>
</div>
</article>
<article>
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
<div class="buttons">
<button>btn1</button>
<button>btn2</button>
</div>
</article>
</div>
<article>
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
<div class="buttons">
<button>btn1</button>
<button>btn2</button>
</div>
</article>
<article>
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
<div class="buttons">
<button>btn1</button>
<button>btn2</button>
</div>
</article>
<article>
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos non nostrum distinctio officia aliquid maxime doloremque harum id consequuntur quo.</p>
<div class="buttons">
<button>btn1</button>
<button>btn2</button>
</div>
</article>
</div>
</div>
I have to implement some media queries into my code & use col's.
I've managed to fix most of it, however when it comes to my tablet solution I can't figure out what to do.
The thing is, the col-4 & col-8 is supposed to be for tablet, and in the product box the picture is supposed to be on the right, and the text on the left (all inside the box).
This is my HTML code first, and then CSS bottom.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ZENFERIER.NO</title>
<link rel="stylesheet" type="text/css" href="css/meyersReset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab" rel="stylesheet">
</head>
<body>
<div id="container">
<!-- Header område, inkluderer header, banner og nav -->
<header id="mainPageHeader"> <a id="logo" href="#ng">Zenferier.no</a>
<ul>
<li> Hjem </li>
<li> Om Oss </li>
<li> Reisetips </li>
<li> Kontakt Oss </li>
</ul>
<div id="mainPageBanner" class="img-responsive">
<div id="tekstBanner">Book din ferie hos oss!</div>
</div>
</header>
<!-- slutt header område -->
<!-- hovedområde med produktbokser -->
<main id="mainContent">
<article class="product-box col-screen1-4 col-screen1-5 col-tablet-4 col-tablet-8">
<div class="product-content-box"> <img src="img/tenerife.jpg" alt="Bilde Tenerife" class="img-responsive"> </div>
<div class="product-content-box">
<h2>Tenerife</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quidem enim accusamus necessitatibus placeat repellendus iusto, ex doloremque culpa libero architecto neque recusandae quaerat dicta sit amet. Maiores, officia, excepturi.</p>
</div>
</article>
<article class="product-box col-screen1-4 col-screen1-5 col-tablet-4 col-tablet-8">
<div class="product-content-box"> <img src="img/kyoto.jpg" alt="Bilde Kyoto" class="img-responsive"> </div>
<div class="product-content-box">
<h2>Kyoto</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quidem enim accusamus necessitatibus placeat repellendus iusto, ex doloremque culpa libero architecto neque recusandae quaerat dicta sit amet. Maiores, officia, excepturi.</p>
</div>
</article>
<article class="product-box col-screen1-4 col-screen1-5 col-tablet-4 col-tablet-8">
<div class="product-content-box"> <img src="img/barcelona.jpg" alt="Bilde Barcelona" class="img-responsive"> </div>
<div class="product-content-box">
<h2>Barcelona</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quidem enim accusamus necessitatibus placeat repellendus iusto, ex doloremque culpa libero architecto neque recusandae quaerat dicta sit amet. Maiores, officia, excepturi.</p>
</div>
</article>
<article class="product-box col-screen1-4 col-screen1-5 col-tablet-4 col-tablet-8">
<div class="product-content-box"> <img src="img/lasvegas.jpg" alt="Bilde Las Vegas" class="img-responsive"> </div>
<div class="product-content-box">
<h2>Las Vegas</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quidem enim accusamus necessitatibus placeat repellendus iusto, ex doloremque culpa libero architecto neque recusandae quaerat dicta sit amet. Maiores, officia, excepturi.</p>
</div>
</article>
<article class="product-box col-screen1-4 col-screen1-5 col-tablet-4 col-tablet-8">
<div class="product-content-box"> <img src="img/london.jpg" alt="Bilde London" class="img-responsive"> </div>
<div class="product-content-box">
<h2>London</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quidem enim accusamus necessitatibus placeat repellendus iusto, ex doloremque culpa libero architecto neque recusandae quaerat dicta sit amet. Maiores, officia, excepturi.</p>
</div>
</article>
<article class="product-box col-screen1-4 col-screen1-5 col-tablet-4 col-tablet-8">
<div class="product-content-box"> <img src="img/tokyo.jpg" alt="Bilde Tokyo" class="img-responsive"> </div>
<div class="product-content-box">
<h2>Tokyo</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quidem enim accusamus necessitatibus placeat repellendus iusto, ex doloremque culpa libero architecto neque recusandae quaerat dicta sit amet. Maiores, officia, excepturi.</p>
</div>
</article>
<article class="product-box col-screen1-4 col-screen1-5 col-tablet-4 col-tablet-8">
<div class="product-content-box"> <img src="img/paris.jpg" alt="Bilde Paris" class="img-responsive"> </div>
<div class="product-content-box">
<h2>Paris</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quidem enim accusamus necessitatibus placeat repellendus iusto, ex doloremque culpa libero architecto neque recusandae quaerat dicta sit amet. Maiores, officia, excepturi.</p>
</div>
</article>
<article class="product-box col-screen1-4 col-screen1-5 col-tablet-4 col-tablet-8">
<div class="product-content-box"> <img src="img/berlin.jpg" alt="Bilde Berlin" class="img-responsive"> </div>
<div class="product-content-box">
<h2>Berlin</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quidem enim accusamus necessitatibus placeat repellendus iusto, ex doloremque culpa libero architecto neque recusandae quaerat dicta sit amet. Maiores, officia, excepturi.</p>
</div>
</article>
<article class="product-box col-screen1-4 col-screen1-5 col-tablet-4 col-tablet-8">
<div class="product-content-box"> <img src="img/oslo.jpg" alt="Bilde Oslo" class="img-responsive"></div>
<div class="product-content-box">
<h2>Oslo</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quidem enim accusamus necessitatibus placeat repellendus iusto, ex doloremque culpa libero architecto neque recusandae quaerat dicta sit amet. Maiores, officia, excepturi.</p>
</div>
</article>
</main>
<!-- slutt hovedområde -->
</div>
</body>
</html>
CSS:
#charset "utf-8";
body {
margin: 0;
}
#container {
max-width: 80%;
min-height: 100%;
margin: auto;
}
/*-- mainPageHeader --*/
#mainPageHeader {
background-color: #797067;
max-width: 100%;
}
#logo {
color: #FFFDF6;
text-decoration: none;
font-size: 2em;
font-family: 'Roboto Slab', serif;
display: inline-block;
padding-top: 0.25em;
padding-bottom: 0.25em;
}
/*-- end mainPageHeader --*/
/*-- mainPageNav --*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4D8FAB;
}
li {
float: left;
}
li a {
display: block;
color: #FFFDF6;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #C4B197;
}
/*-- mainPageBanner --*/
#mainPageBanner {
height: 250px;
background-color: #4D8FAB;
/*blå*/
background-image: url(../img/banner1.jpg);
background-size: 100%;
background-position: 0px 0px;
display: none;
}
/*-- end mainPageBanner --*/
/*-- tekst på banner --*/
#tekstBanner {
font-size: 2em;
font-family: 'Roboto Slab', serif;
background-color: #EBDBAE;
color: #4D8FAB;
width: 35%;
height: 30%;
padding: 10px;
padding-bottom: 0px;
margin-left: 50px;
margin-top: 90px;
display: inline-block;
}
/*-- mainPageFooter --*/
#mainPageFooter {
background-color: #797067;
bottom: 0;
height: 30px;
padding: 20px;
}
/*-- diverse kode --*/
.img-responsive {
width: 100%;
}
.product-box {
margin-left: 0.25em;
margin-right: 0.25em;
}
#mainContent {
margin-top: 10px;
}
h1 {
font-family: 'Roboto Slab', serif;
font-size: 30px;
}
h2 {
font-family: 'Roboto Slab', serif;
font-size: 25px;
color: black;
}
p {
font-family: 'Roboto', sans-serif;
}
/*-- media query tablet --*/
#media screen and (min-width:768px){
.product-box {
margin: 0;
margin-bottom: 30px;
}
.product-content-box {
background-color: #C4B197;
margin-left: 10px;
margin-right: 10px;
padding: 15px;
}
.col-tablet-4 {
width: 33,33;
float: left;
}
.col-tablet-8 {
width: 66,66%;
float: left;
}
}
/*-- end media query tablet --*/
/*-- media query screen 1024++ --*/
#media screen and (min-width:1024px){
.col-screen1-4 {
width: 33.33%;
}
#mainPageBanner {
display: block;
}
}
#media screen and (min-width:1240px){
.col-screen1-5 {
width: 25%;
}
#mainPageBanner {
display: block;
}
}
/*-- end media query screen 1024++ --*/
Try reversing the order of the media queries. Put the tablet one below the screen one. It may be overriding it. I hope that helps. :-).
I believe you must use the . as the decimal separator in CSS - for the first media query, you've set the width for .col-tablet-4 and .col-tablet-8 using a comma , as the decimal separator. You have also omitted the % on the width of .col-tablet-4.
replace the media query
#media screen and (min-width:768px){}
to
#media screen and (max-width:768px){}