Pretty new to CSS and just having quite a bit of trouble, I've tried everything, searched here, but can't seem to make it work.
Right now my header/body are both 70% of the screen. However I want my top header (.mainheader) to be 100% of the screen, but have the text remain in the same place (so aka filling in the sides with the same background colour) But can't even seem to get the header to stretch to 100% no matter what i do.
Please help me! My code for both index.html and stylesheet.css is below:
INDEX.HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title> Computer Company </title>
<meta charset="utf-8" />
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<header class="mainheader">
<nav><ul>
<li class="active">Home</li>
<li>Solutions & Services
<ul>
<li>Internet</li>
<li>Networking</li>
<li>Website</li>
<li>Home Computers</li>
<li>Servers</li>
</ul>
</li>
<li>Team
<ul>
<li>Founder</li>
<li>Graphics</li>
</ul></li>
<li>Contact</li>
</ul>
<p class="mainheader-phone"> Call Joel at <b>0400000000</b> </p> </nav>
</header>
<body class="body">
<header class="images">
<img class="first-image" src="images/logo.jpg">
<img class="second-image" src="images/logo.jpg">
<img class="third-image" src="images/logo.jpg">
<img class="fourth-image" src="images/logo.jpg">
<img class="fifth-image" src="images/logo.jpg">
<img class="sixth-image" src="images/logo.jpg">
</header>
<div class="maincontent">
<div class="content">
<article class="top-content">
<header>
<h2>What we do</h2>
</header>
<footer>
<p class="post-info">Posted by Joel</p>
</footer>
<content>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</content>
</article>
<article class="bottom-content">
<header>
<h2>What we do</h2>
</header>
<footer>
<p class="post-info">Posted by Joel</p>
</footer>
<content>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</content>
</article>
</div>
</div>
<aside class="top-sidebar">
<article>
<h2> Latest Updates </h2>
<div id="twitter-widget-settings">
<a class="twitter-timeline" href="https://twitter.com/JoelwMale" data-widget-id="612605233995214848">Tweets by #JoelwMale</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</article>
</aside>
<footer class="main-footer">
<p> © 2015 Computer Company</p>
<ul>
<li class="footermedia"><img src="images/social/twitter.png"/></li>
<li class="footermedia"><img src="images/social/linkedin.png"/></li>
<li class="footermedia"><img src="images/social/facebook.png"/></li>
</ul>
</footer>
CSS
/*
Business Website
Author: Joel Male;
Date Started: 20/06/2015;
Date Finished: **;
*/
body {
background-image: url("images/bg.png");
color: #000305;
font-size: 87.5%;
font-family: Arial, 'Lucida Sans Unicode';
line-height: 1.5;
text-align: left;
}
a {
text-decoration: none;
}
a:link, a:visited {
}
a:hover, a:active {
}
.body {
margin: 0 auto; /* Centers the page */
width: 70%;
clear: both; /* Nothing floats on the page */
}
.companyname {
width: 0 auto;
height: 30px;
margin-bottom: 5%;
}
.companyname h1 {
font-size: 60px;
margin-top: 0;
}
.mainheader img {
width: 100%;
height: 300px;
margin-top: 2%;
}
.mainheader {
width: 100%;.
height: 80px;
}
.mainheader nav {
width: 100%;
background-color: #666;
height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainheader nav ul {
padding-left: 0px; /* THIS REMOVES THE PADDING BETWEEN NAV AND HOME */
list-style: none;
margin: 0 auto;
}
.mainheader nav ul li {
float: left;
display: inline;
}
.mainheader nav a:link, .mainheader nav a:visited {
color: #FFF;
display: inline-block;
padding: 10px 25px;
height: 20px;
}
.mainheader nav a:hover, .mainheader nav a:active,
.mainheader nav .active a:link, .mainheader nav .active a:visited {
background-color: #CF5C3F;
text-shadow: none;
}
.mainheader nav ul li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainheader nav ul li:hover ul {
display: block; /* THIS SHOULD HANDLE THE SHOWING OF THE MENU */
}
/* HIDE THE UL */
.mainheader nav ul ul {
display: none;
position: absolute;
background-color: #666;
}
.mainheader nav ul ul li {
display: block;
float: none;
min-width: 178px;
}
.mainheader nav ul ul li:hover {
background-color: #CF5C3F;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainheader p {
float: right;
margin-top: 10px;
padding-right: 10px;
color: #FFF;
}
.mainheader p b {
text-decoration: underline;
}
.images {
height: 30%;
padding-top: 2%;
display: block;
}
.images .first-image {
width: 33%;
}
.images .second-image {
width: 33%;
}
.images .third-image {
width: 33%;
}
.images .fourth-image {
width: 33%;
}
.images .fifth-image {
width: 33%;
}
.images .sixth-image {
width: 33%;
}
.maincontent {
line-height: 25px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.content {
width: 70%;
float: left;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.post-info {
font-style: italic;
color: #999;
font-size: 85%;
margin-top: 3px;
margin-bottom: 3px;
}
.top-content {
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2.8%;
}
.bottom-content {
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
}
.top-sidebar {
width: 21%;
float: left;
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin: 2% 0 2% 3%;
padding: 0% 3%;
}
.top-sidebar h2 {
margin-top: 6px;
margin-bottom: 6px;
}
.top-sidebar .twitter-timeline {
height: 796px;
width: 100%!important;
}
.top-sidebar .twitter-widget-settings {
height: 600px;
}
.main-footer {
width: 100%;
float: left;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #666;
margin: 2%;
}
.main-footer p {
padding-top: 3px;
padding-left: 25px;
float: left;
width: 40%;
margin: 10px auto;
color: #FFF;
}
.main-footer a {
color: #FFF;
}
.main-footer ul {
list-style: none;
margin-top: 2px;
}
.main-footer ul .footermedia {
float: right;
padding-right: 5px;
}
.main-footer ul .footermedia img {
margin-top: 0px;
width: 40px;
height: 40px;
}
.main-footer ul .footermedia a {
padding: 0 0;
width: 40px;
height: 40px;
}
.main-footer ul .footer-media a:hover {
background-color: #666;
}
#media only screen and (min-width: 150px) and (max-width: 600px)
{
.body {
width: 90%;
font-size: 95%;
}
.mainheader img {
width: 30%;
}
.mainheader nav {
background: #666;
height: 200px;
line-height: 30px;
margin-bottom: 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainheader nav ul {
list-style: none;
margin: 0 auto;
padding-left: 0;
}
.mainheader nav li {
width: 100%;
margin-left: 0 auto;
}
.mainheader nav a:link, .mainheader nav a:visited {
color: #FFF;
display: block;
height: 30px;
padding: 5px 0;
text-decoration: none;
}
.mainheader nav a:active,
.mainheader nav .active a:link, .mainheader nav .active a:visited {
background: #CF5C3F;
color: #fff;
text-shadow: none !important;
}
.mainheader nav li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.content {
width: 100%;
float: left;
margin-top: 2%;
}
.top-content {
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
}
.bottom-content {
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2px;
}
}
Hopefully I formatted everything correctly. Thank you!
Put your header inside the body.
And don't apply styles to the body but use a container.
+ You should have one single header in your page.
<body>
<header>
<nav><ul>
<li class="active">Home</li>
<li>Solutions & Services
<ul>
<li>Internet</li>
<li>Networking</li>
<li>Website</li>
<li>Home Computers</li>
<li>Servers</li>
</ul>
</li>
<li>Team
<ul>
<li>Founder</li>
<li>Graphics</li>
</ul></li>
<li>Contact</li>
</ul>
<p class="mainheader-phone"> Call Joel at <b>0400000000</b> </p> </nav>
</header>
<div class="container">
<div class="images">
<img class="first-image" src="images/logo.jpg">
<img class="second-image" src="images/logo.jpg">
<img class="third-image" src="images/logo.jpg">
<img class="fourth-image" src="images/logo.jpg">
<img class="fifth-image" src="images/logo.jpg">
<img class="sixth-image" src="images/logo.jpg">
</div>
<div class="maincontent">
<div class="content">
<article class="top-content">
<header>
<h2>What we do</h2>
</header>
<footer>
<p class="post-info">Posted by Joel</p>
</footer>
<content>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</content>
</article>
<article class="bottom-content">
<header>
<h2>What we do</h2>
</header>
<footer>
<p class="post-info">Posted by Joel</p>
</footer>
<content>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</content>
</article>
</div>
</div>
<aside class="top-sidebar">
<article>
<h2> Latest Updates </h2>
<div id="twitter-widget-settings">
<a class="twitter-timeline" href="https://twitter.com/JoelwMale" data-widget-id="612605233995214848">Tweets by #JoelwMale</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</article>
</aside>
<footer class="main-footer">
<p> © 2015 Computer Company</p>
<ul>
<li class="footermedia"><img src="images/social/twitter.png"/></li>
<li class="footermedia"><img src="images/social/linkedin.png"/></li>
<li class="footermedia"><img src="images/social/facebook.png"/></li>
</ul>
</footer>
</container>
</body>
in CSS
header{
width:100%;
}
.container{
width:70%;
margin:0 auto;
}
Related
I'm sure this is relatively simple problem but after some fiddling I'm not finding much luck, will fix one thing then another problem arises. As you can see below (this is on desktop, mobile works perfect) the text boxes are way too big, leaving loads of white space below texts, some images are a good size, some are too big, the top one looks the best. The idea being the image spans across one side then the text box is the same height next to it.
Here is a picture of the mobile for reference
I wont link all the HTML and CSS, just the relevant stuff. Any advice is welcome and appreciated.
<html lang="en" dir="ltr">
<head>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;600&family=Poppins:wght#300;400;500;700&display=swap" rel="stylesheet">
<meta charset="utf-8" >
<meta name="description" content="Jordan Squres, mixed martial arts trainer, working out of Oxfordshire">
<meta name="keywords" content="MMA, martial arts, personal trainer, self defence, exercise">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="autor" content="Descisive Development">
<link rel="stylesheet" href="styles.css">
<title>Jordan Squires, Home</title>
</head>
<body >
<nav class="navbar">
Jordan Squires
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
<ul class="menu">
<li class="navitem"> Home</li>
<li class="navitem"> About</li>
<li class="navitem"> Clients</li>
<li class="navitem"> Blog</li>
<li class="navitem"> Contact</li>
</ul>
</div>
</nav>
<section class="home-hero">
<div class="flex-container">
<div class="img-hero">
<img src="images/portfolio1.jpg" alt="">
</div>
<div class="info-hero">
<h1>Jordan</h1>
<h2>MMA Instructor</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="flex-container" id="even">
<div class="img-hero">
<img src="images/portfolio2.jpg" alt="">
</div>
<div class="info-hero">
<h1>Shotokan Karate</h1>
<h2>Black Belt</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="flex-container">
<div class="img-hero">
<img src="images/portfolio3.jpg" alt="">
</div>
<div class="info-hero">
<h1>Jeet Kune Do</h1>
<h2>Black Belt</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="flex-container"id="even">
<div class="img-hero">
<img src="images/portfolio4.jpg" alt="">
</div>
<div class="info-hero">
<h1>Brazilian Jiu Jitsu</h1>
<h2>Purple Belt</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="flex-container">
<div class="img-hero">
<img src="images/portfolio5.jpg" alt="">
</div>
<div class="info-hero">
<h1>Jordan</h1>
<h2>MMA Instructor</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</section>
</body>
</html>
and the css
box-sizing: inherit;
margin: 0 auto;
padding: 0;
}
html{
font-size: 10px;
max-width: 1300px;
box-sizing: border-box;
}
body{
background: var(--white);
}
a{
color: var(--main-txt);
text-decoration: none;
}
:root{
--white: #F1FAEE;
--outline-color: #000000;
--bg-color: #1D3557;
--main-txt: #457B9D;
--alt-txt: #A8DADC;
--red: #E63946;
--ff: 'Montserrat', sans-serif;
--ff2: 'Poppins', sans-serif;
--fw-l: 300;
--fw-n: 400;
--fw-m: 600;
--fw-b: 700;
--fs-1: ;
--fs-2: ;
--fs-3: ;
--fs-p: ;
--shadow: 0px 7px 10px 0px rgba(0,0,0,.3);
}
/*global style container*/
.container{
max-width: 1360px;
}
/*Navbar styles*/
.navbar{
box-shadow: 0px 3px 3px -3px rgb(0, 0, 0);
width: 100%;
font-size: 1.8rem;
font-family: var(--ff2);
}
.navbar ul{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.navbar ul a{
display: block;
padding: 2rem;
text-align: center;
text-transform: uppercase;
font-weight: var(--fw-n)
}
.navbar ul a:hover{
background-color: var(--bg-color);
color: var(--white);
}
.navbar .logo{
float: left;
display: block;
font-size: 2rem;
padding: 1.5rem;
text-decoration: underline;
text-decoration-thickness: 0.2rem;
text-underline-offset: 0.5rem;
}
.navbar .menu{
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
.navbar .menu-icon{
padding: 2.8rem 2rem;
position: relative;
float: right;
cursor: pointer;
}
.navbar .menu-icon .nav-icon{
background: var(--bg-color);
display: block;
height: .2rem;
width: 1.8rem;
position: relative;
transition: background .2s ease-out;
}
.navbar .menu-icon .nav-icon:before{
background: var(--bg-color);
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: .5rem;
}
.navbar .menu-icon .nav-icon:after{
background: var(--bg-color);
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: -.5rem;
}
.navbar .menu-btn{
display: none;
}
.navbar .menu-btn:checked ~ .menu{
max-height: 36rem;
}
.navbar .menu-btn:checked ~ .menu-icon .nav-icon{
background: transparent;
}
.navbar .menu-btn:checked ~ .menu-icon .nav-icon:before{
transform: rotate(-45deg);
top: 0;
}
.navbar .menu-btn:checked ~ .menu-icon .nav-icon:after{
transform: rotate(45deg);
top: 0;
}
/*Homepage main section*/
.home-hero{
margin: 1rem auto;
}
.flex-container{
width: 100%;
height: auto;
display: flex;
flex-wrap: wrap;
}
.img-hero{
width: 90%;
margin-top: 2rem;
margin-bottom: 2rem;
padding-bottom: -3px;
}
.info-hero{
width: 90%;
font-family: var(--ff);
border: 1px solid var(--outline-color);
padding: 3rem;
background-color: var(--bg-color);
}
/*Image styles*/
.img-hero img{
max-width: 100%;
object-fit: contain;
max-height: 100%;
margin-bottom: -3px;
border: 1px solid var(--outline-color);
}
/*Info styles*/
.info-hero h1{
font-size: 3rem;
color: var(--white);
}
.info-hero h2{
font-size: 2rem;
font-style: italic;
color: var(--red);
}
.info-hero h1 h2{
font-family: var(--ff2);
}
.info-hero p{
font-size: 1.2rem;
text-align: justify;
color: var(--alt-txt);
}
/*Media for Navbar*/
#media (min-width: 760px) {
.navbar{
height: 6.7rem;
}
.navbar li{
float: left;
}
.navbar li a{
padding: 2rem 2.5rem;
}
.navbar .menu{
clear: none;
float: right;
max-height: none;
}
.navbar .menu-icon{
display: none;
}
.navbar .logo{
padding: 2rem;
}
.flex-container{
flex-direction: row;
margin: 2rem auto;
}
.img-hero{
width: 50%;
margin: inherit;
}
.info-hero{
width: 45%;
padding: 2rem;
}
#even{
flex-direction: row-reverse;
}
}
Here is a simple example I just wrote for you, you may adjust it according to your needs.
.flex-container {
display: flex;
margin-bottom: 1rem;
}
.img-hero, .info-hero {
max-width: 50%;
}
.img-hero img {
width: 100%;
height: 100%;
object-fit: cover;
}
.info-hero {
background: violet;
color: white;
}
.info-hero > * {
padding: 0.5rem 1rem;
}
<div class="flex-container">
<div class="img-hero">
<img src="https://picsum.photos/900/700" alt="">
</div>
<div class="info-hero">
<h1>Jordan</h1>
<h2>MMA Instructor</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="flex-container">
<div class="info-hero">
<h1>Jordan</h1>
<h2>MMA Instructor</h2>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="img-hero">
<img src="https://picsum.photos/800/600" alt="">
</div>
</div>
I'm creating a website using CSS and HTML as part of a school assignment and I cannot figure out how to get my text and image neatly aligned on the center of the page. Example of what I want: https://chagaimweiss.com/
I've been looking up solutions on line but nothing's worked and my code is just confusing me even more. (I've never done this before, I'm an absolute beginner.) I'm posting the entire code just because I'm afraid some element might be messing up others.
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%
}
body {
margin: 0;
font-size: 13px;
line-height: 1.6em
}
ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
text-align: center;
}
li {
display: inline;
}
li a {
display: inline-block;
color: grey;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #f3f3f3;
display: inline-block;
padding: 10px;
}
h1 {
font-family: Helvetica;
font-size: 80px;
font-weight: 400;
text-align: center;
}
img {
width: 400px;
border-radius: 70%;
}
center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
p {
overflow: hidden;
float: right;
clear: both;
}
.box {
display : flex;
justify-content : center;
align-items : center;
margin-left : 25px;
margin-right : 25px;
}
.text {
margin-right: 200px;
margin-left: 50px;
}
<html lang="en">
<head>
<title>TITLE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<ul>
<li>Home</li>
<li>Resume</li>
<li>Contact</li>
</ul>
<h1>Title</h1>
<div class="box">
<center>
<img src="Profile_photo.jpg" alt="Profile Photo"/>
<span style="p" class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
</center>
</div>
</body>
</html>
This might be what your are searching for
.container {
display: flex; /* <--- This does the trick */
max-width: 860px; /* Limit the width */
margin: 0 auto; /* Centering the container */
font-size: 22px;
line-height: 2;
}
.responsive {
max-width: 100%;
height: auto;
}
.image-section {
width: 50%;
/* background: #3C86FF; */
}
.text-section {
width: 50%;
padding: 14px;
/* background: #8D3CFF; */
}
<div class="container">
<div class="image-section"><img class="responsive" src="https://i.imgur.com/GuAB8OE.jpg" /></div>
<div class="text-section">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Recusandae adipisci ipsam eius sit nobis iure exercitationem officia quos earum eligendi?</div>
</div>
You can use this code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>index</title>
<style type="text/css">
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%
}
body {
margin: 0;
font-size: 13px;
line-height: 1.6em
}
ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
text-align: center;
}
li {
display: inline;
}
li a {
display: inline-block;
color: #333;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 18px;
font-weight: 400;
}
li a:hover {
background-color: #f3f3f3;
display: inline-block;
padding: 14px 16px;
}
h1 {
font-family: Helvetica;
font-size: 90px;
font-weight: 400;
text-align: center;
margin: 30px;
padding: 0;
}
img {
width: 400px;
height: 400px;
border-radius: 100%;
}
p {
overflow: hidden;
float: right;
clear: both;
}
.box {
display: flex;
justify-content: center;
align-items: center;
}
.text {
text-align: left;
font-size: 17px;
line-height: 26px;
font-weight: 500;
color: #333;
}
center {
width: 100%;
min-height: 300px;
margin: 0 auto;
display: -webkit-flex;
display: flex;
}
center .text {
padding: 0;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
#media only screen and (max-width: 768px) {
.text {
text-align: left;
font-size: 14px;
line-height: 18px;
font-weight: 500;
color: #333;
}
img {
width: 330px;
height: 330px;
border-radius: 100%;
}
}
#media only screen and (max-width: 767px) {
.text {
text-align: left;
font-size: 13px;
line-height: 16px;
font-weight: 500;
color: #333;
}
img {
width: 200px;
height: 200px;
border-radius: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>Home</li>
<li>Resume</li>
<li>Contact</li>
</ul>
<h1>Title</h1>
<div class="box">
<center>
<span class="text">
<img src="https://images.squarespace-cdn.com/content/v1/5bda793b0dbda3f980201462/1541898879554-U3DFRQS8QDCYCCHNICSG/ke17ZwdGBToddI8pDm48kE18-4zwLU-qbiNthgfATgZ7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1Ue5QMtRsKNQ0Y8f36XeapJ7hOyTFdhnyFq38bJ63oibyFlq8oZZwhhoTbTOjCpwBwg/chagaiweiss.jpeg" alt="Profile Photo" />
</span>
<span class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
</center>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I just want that background image would be zoomed, but it covers the header, and overflow: hidden doesn't work
https://jsfiddle.net/space2froggy/7t95nvLy/2/ here is my code.
HTML
<header>
<div class="logo">
<img src="resources/logo/logo.svg" class="logo-img" alt="Logo">
</div>
<div class="main-nav">
<ul>
<li>About me</li>
<li>Relationships</li>
<li>Requirements</li>
<li>Users</li>
<li>Sign Up</li>
</ul>
</div>
<div class="settings">
<div class="user-data">
<h6>Superstar</h6>
<p>superstar#gmail.com</p>
</div>
<img src="resources/img/user-superstar-2x.jpg" class="photo-small" alt="User Photo">
<img src="resources/icons/sign-out.svg" alt="Sign Out" class="sign-out">
</div>
</header>
<section class="board">
<h1>Test assignment for Frontend Developer Position</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
Sign Up
</section>
CSS
.board {
background-image: url(img/bg-1.jpg);
background-size: cover;
background-position: center;
transform: scale(2);
overflow: hidden;
}
Remove transform: scale(2); from the css then it shows fine.
.board {
background-image: url('https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg');
background-size: cover;
background-position: center;
overflow: hidden;
}
{
margin: 0;
padding: 0;
box-sizing: border-box; /* always at start */
}
html {
font-family: 'Lato', 'Arial', sans-serif;
font-size: 20px;
text-rendering: optimizeLegibility; /*IMP!!!*/
line-height: 145%;
max-width: 2560px;
}
header {
max-width: 1140px;
margin: 15px auto;
}
header > * {
display: inline-block;
}
header a {
text-decoration: none;
color: #171717;
}
.logo {
width: 15%;
}
.logo-img {
width: 150px;
height: auto;
}
.main-nav {
font-size: 15px;
margin-left: 10%;
}
.main-nav ul li {
float: left;
list-style: none;
padding: 0 15px;
}
.settings {
float: right;
line-height: 80%;
}
.settings > * { /* to all ONLY child els */
float: left;
display: inline-block;
}
.photo-small {
width: 40px;
height: auto;
border-radius: 50%;
}
.user-data {
padding: 0 10px;
}
.settings h6 {
float: right;
}
.settings p {
font-size: 12px;
color: #a0a0a0;
}
.photo-small {
margin: -5px 5px;
}
.sign-out {
margin: 5px 10px;
}
/*//////////////////////////*/
/*////////---BOARD---////////*/
/*//////////////////////////*/
h1 {
margin: 0;
}
<header>
<div class="logo">
<img src="resources/logo/logo.svg" class="logo-img" alt="Logo">
</div>
<div class="main-nav">
<ul>
<li>About me</li>
<li>Relationships</li>
<li>Requirements</li>
<li>Users</li>
<li>Sign Up</li>
</ul>
</div>
<div class="settings">
<div class="user-data">
<h6>Superstar</h6>
<p>superstar#gmail.com</p>
</div>
<img src="resources/img/user-superstar-2x.jpg" class="photo-small" alt="User Photo">
<img src="resources/icons/sign-out.svg" alt="Sign Out" class="sign-out">
</div>
</header>
<section class="board">
<h1>Test assignment for Frontend Developer Position</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
Sign Up
</section>
I am stuck here, i want to make fix nav with full height section with content but second section is not going good after scroll, need help.
Below my tried code:
*,
*::after,
*::before {
margin: 0px;
padding: 0px;
box-sizing: inherit;
-webkit-box-sizing: inherit;
}
body,
html {
margin: 0px;
padding: 0px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
text-align: center;
padding: 10px 0px;
background: tomato;
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
margin: 3px;
}
nav ul li a {
display: block;
padding: 5px;
background: #000;
color: #ddd;
text-decoration: none;
}
nav ul li a:hover {
background: #ddd;
color: #333;
}
section {
height: 100vh;
background: #303030;
margin: 0px;
padding: 0px;
}
section p {
margin-top: 54px;
color: #fff;
}
section.green {
background: green;
height: 100vh;
margin: 0px;
padding: 0px;
}
section.green p {
color: #ddd;
}
<section>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Contact</li>
</ul>
</nav>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
<section class="green">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</section>
Can anyone help me out and provide me a solution to my problem?
You have nested <section> which is not recommended, a better approach should replace your outer <section> with <div class="wrapper">...</div>
Then use a wrapper class to set the margin-top: 54px which is the height of nav.
.wrapper {
margin-top: 54px;
height: 100vh;
background: #303030;
padding: 0px;
}
For the overlap, use calc to set the height dynamically height: calc(100vh - 52px);
*,
*::after,
*::before {
margin: 0px;
padding: 0px;
box-sizing: inherit;
-webkit-box-sizing: inherit;
}
body,
html {
margin: 0px;
padding: 0px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
text-align: center;
padding: 10px 0px;
background: tomato;
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
margin: 3px;
}
nav ul li a {
display: block;
padding: 5px;
background: #000;
color: #ddd;
text-decoration: none;
}
nav ul li a:hover {
background: #ddd;
color: #333;
}
section {
height: 100vh;
background: #303030;
margin: 0px;
padding: 0px;
}
.wrapper {
margin-top: 54px;
height: 100vh;
background: #303030;
padding: 0px;
}
section p {
color: #fff;
}
section.green {
background: green;
height: calc(100vh - 52px);
margin: 0px;
padding: 0px;
}
section.green p {
color: #ddd;
}
<div class="wrapper">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Contact</li>
</ul>
</nav>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
<section class="green">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</div>
You can use calc() to calculate the height of the sections
height: calc(100vh - 54px); /*54px is the height of the nav*/
So this will make the height of each section have the height of the screen minus the height of the nav.
And to remove the space between the sections you need to remove margin-top from the p tag and add padding-top:54px;to the container, again 54px is the height of the nav, and that for the sections to start right after the nav
*,
*::after,
*::before {
margin: 0px;
padding: 0px;
box-sizing: inherit;
-webkit-box-sizing: inherit;
}
body,
html {
margin: 0px;
padding: 0px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.container {
height: 100vh;
padding-top:54px;
}
nav {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
text-align: center;
padding: 10px 0px;
background: tomato;
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
margin: 3px;
}
nav ul li a {
display: block;
padding: 5px;
background: #000;
color: #ddd;
text-decoration: none;
}
nav ul li a:hover {
background: #ddd;
color: #333;
}
section {
height: calc(100vh - 54px);
background: #303030;
margin: 0px;
padding: 0px;
}
section p {
color: #fff;
}
section.green {
background: green;
margin: 0px;
padding: 0px;
}
section.green p {
color: #ddd;
}
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Contact</li>
</ul>
</nav>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
<section class="green">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</div>
When I add .article img { float:right; } the image goes out of the div article and i am not getting the desired result I want. I want to align the image within grey box and to the right.
Here it is what I achieve.
What I am getting is the image is aligned outside the main container.
{
margin: 0;
padding: 0;
}
body{
width: 960px;
margin: 0 auto;
}
html {
background: url(bgimage.jpg) no-repeat center center fixed;
-webkit-background-size:cover;
background-size: cover;
}
.content-container{
background: rgba(255,255,255,.48);
margin-top: 50px;
border: 2px #e5e5e5 solid;
border-radius: 7px ;
box-shadow: 2px 2px 6px black;
}
.main-container{
margin: 10px;
padding: 5px;
}
.articles{
background: rgba(182,182,168,0.7);
border: 2px solid black;
border-radius: 5px;
}
.articles h3{
padding-left: 15px;
padding-top: 1px;
margin-bottom: 2px;
}
.articles p{
margin-top: 1px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
width: 920px;
}
.articles img{
float: right;
}
<div class="content-container">
<div class="main-container">
<div class="articles">
<h3>Heading of the article</h3>
<br/>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<img src="http://placekitten.com/g/300/300"></img>
</div>
</div>
</div>
This can be easily solved by adding a clear element at the end:
<div class="clear"></div>
the css:
.clear {
clear: both;
}
example:
.clear {
clear: both;
}
body{
width: 960px;
margin: 0 auto;
}
html {
background: url(bgimage.jpg) no-repeat center center fixed;
-webkit-background-size:cover;
background-size: cover;
}
.content-container{
background: rgba(255,255,255,.48);
margin-top: 50px;
border: 2px #e5e5e5 solid;
border-radius: 7px ;
box-shadow: 2px 2px 6px black;
}
.main-container{
margin: 10px;
padding: 5px;
}
.articles{
background: rgba(182,182,168,0.7);
border: 2px solid black;
border-radius: 5px;
}
.articles h3{
padding-left: 15px;
padding-top: 1px;
margin-bottom: 2px;
}
.articles p{
margin-top: 1px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
width: 920px;
}
.articles img{
float: right;
}
<div class="content-container">
<div class="main-container">
<div class="articles">
<h3>Heading of the article</h3>
<br/>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<img src="http://placekitten.com/g/300/300">
<div class="clear"></div>
</div>
</div>
</div>