I am trying to make a sticky sidebar that stops at the bottom of a webpage's header image, but I'm unable to get it to work. I've recreated the issue in the snippet below and in this JSFiddle which might be easier to look at/test in.
The sidebar is looking how I want it, but when I scroll down it doesn't halt at the top of the page
.about {
margin-top: 50px;
}
h4 {
padding-left: 0.3rem;
}
.about-header-image {
background-size: cover !important;
background-color: #919191;
width: 100%;
border-radius: 0px !important;
padding-top: 3rem !important;
padding-bottom: 2rem !important;
margin-bottom: 0px;
margin-top: 42px !important;
}
.nav-with-bar ul {
list-style-type: none;
padding-left: 10px;
}
.nav-with-bar.aboutnav {
position: sticky;
margin-top: 25px;
padding: 0px;
bottom: 100%;
z-index: 100;
width: 150px;
}
.nav-with-bar h5 {
text-decoration: underline;
}
.nav-with-bar .nav-link:hover {
text-decoration: underline;
}
.nav-with-bar .nav-link.active {
border-right: 3px solid blue;
}
.nav-with-bar a {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 0px;
}
.nav-with-bar a:hover {
color: #064579;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text&display=swap" rel="stylesheet">
<div class="content">
<nav class="navbar fixed-top navbar-expand-lg bg-dark">
<div class="d-flex flex-grow-1 container-fluid pl-2">
<a class="navbar-brand text-white" href="/Index">
<span style="white-space: nowrap;" class="d-inline-block">Website</span>
</a>
</div>
</nav>
<div class="about-header-image" style="background-image: url(Assets/Wallpaper.jpg) !important;">
<div class="my-auto text-center">
<h1 style="font-family: 'Crimson Text', serif; font-size: 4em;" class="text-white d-inline-block">
Website Name
</h1>
</div>
</div>
<div class="h-100">
<div class="nav-with-bar aboutnav d-md-inline-block offset-1 col-2 d-none mr-3">
<h5>About Us</h5>
<ul>
<li>
Purpose</li>
<li>
Founding</li>
<li>
Future</li>
<li>
Contributors</li>
<li>
Contact</li>
</ul>
</div>
<div class="col-md-7 d-inline-block about">
<div id="purpose" style="font-size: x-large;">
<h4 class="mb-0">Filler Text</h4>
<hr class="nogap">
<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. 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. 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. 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. 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. 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>
</div>
</div>
</div>
</div>
I have marked all my edits in css.
.about {
margin-top: 50px;
}
h4 {
padding-left: 0.3rem;
}
.h-100 {
display: flex; /*add this it*/
}
.about-header-image {
background-size: cover !important;
background-color: #919191;
width: 100%;
border-radius: 0px !important;
padding-top: 3rem !important;
padding-bottom: 2rem !important;
margin-bottom: 0px;
margin-top: 42px !important;
}
.nav-with-bar ul {
list-style-type: none;
padding-left: 10px;
}
.nav-with-bar.aboutnav {
position: sticky;
top: 81px; /*add this it*/
margin-top: 25px;
padding: 0px;
bottom: 100%;
z-index: 100;
width: 150px;
display: flex!important; /*add this it*/
flex-direction: column; /*add this it*/
height: 100%; /*add this it*/
}
.nav-with-bar h5 {
text-decoration: underline;
}
.nav-with-bar .nav-link:hover {
text-decoration: underline;
}
.nav-with-bar .nav-link.active {
border-right: 3px solid blue;
}
.nav-with-bar a {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 0px;
}
.nav-with-bar a:hover {
color: #064579;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text&display=swap" rel="stylesheet">
<div class="content">
<nav class="navbar fixed-top navbar-expand-lg bg-dark">
<div class="d-flex flex-grow-1 container-fluid pl-2">
<a class="navbar-brand text-white" href="/Index">
<span style="white-space: nowrap;" class="d-inline-block">Website</span>
</a>
</div>
</nav>
<div class="about-header-image" style="background-image: url(Assets/Wallpaper.jpg) !important;">
<div class="my-auto text-center">
<h1 style="font-family: 'Crimson Text', serif; font-size: 4em;" class="text-white d-inline-block">
Website Name
</h1>
</div>
</div>
<div class="h-100">
<div class="nav-with-bar aboutnav d-md-inline-block offset-1 col-2 d-none mr-3">
<h5>About Us</h5>
<ul>
<li>
Purpose</li>
<li>
Founding</li>
<li>
Future</li>
<li>
Contributors</li>
<li>
Contact</li>
</ul>
</div>
<div class="col-md-7 d-inline-block about">
<div id="purpose" style="font-size: x-large;">
<h4 class="mb-0">Filler Text</h4>
<hr class="nogap">
<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. 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. 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. 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. 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. 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>
</div>
</div>
</div>
</div>
Related
I've made a basic parallax website and I am looking to put a simple navigation bar on the top right of the screen. When I load up the website in my browser, the link (which at the moment is linked to #) won't allow me to click it until I reach the class .section. If it is touching any of the images that have the parallax effect, it becomes opaque, and won't allow me to click. I had a feeling it had something to do with bad placement, and even when I moved it around it seemed to have no effect. It also won't float to the right. Here is some of the HTML and CSS:
body, html {
height: 100%;
margin:0;
font-size: 16px;
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.8em;
color:#666;
}
.navbar {
list-style: none;
color:#779cd8;
position:fixed;
float: right;
margin-right: 20px;
}
.pimg1, .pimg2, .pimg3{
position:relative;
opacity:0.70;
background-position: center;
background-size:cover;
background-repeat:no-repeat;
background-attachment: fixed;
}
.pimg1 {
background-image: url('../AlignedResonance/mountainsvg.svg');
min-height: 100%;
}
.pimg2 {
background-image: url('../AlignedResonance/tree.jpg');
min-height: 400px;
}
.pimg3 {
background-image: url('../AlignedResonance/lake.jpg');
min-height: 400px;
}
.section {
text-align:center;
padding: 50px 80px;
}
.section-light {
background-color: #f4f4f4;
color:#666;
}
.section-dark {
background-color: #282e34;
color:#ddd;
}
.ptext {
position:absolute;
top:50%;
width: 100%;
text-align: center;
color:black;
font-size: 27px;
letter-spacing: 8px;
text-transform:uppercase;
}
.ptext .border {
background-color: #111;
color: #fff;
padding:20px;
}
<!DOCTYPE html>
<html>
<head>
<title>Aligned Resonance</title>
<link rel="stylesheet" type="text/css" href="../AlignedResonance/style.css">
</head>
<body>
<ul class="navbar">
<li>Home</li>
</ul>
<div class="pimg1">
<!-- class ptext -->
<div class="ptext">
<span>
Aligned Resonance
</span>
</div>
</div>
<section class="section section-light">
<h2>Section One</h2>
<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. 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 class="pimg2">
<div class="ptext">
<span class="border">
Text 2
</span>
</div>
</div>
<section class="section section-dark">
<h2>Section One</h2>
<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. 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 class="pimg3">
<div class="ptext">
<span class="border">
Text 3
</span>
</div>
</div>
<section class="section section-dark">
<h2>Section One</h2>
<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. 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 class="pimg1">
<div class="ptext">
<span>
Aligned Resonance
</span>
</div>
</div>
</body>
</html>
Sorry if I don't have a correct format etc., as I am new to HTML as well as this site.
Try updating the z-index for your navbar class:
.navbar {
list-style: none;
color:#779cd8;
position:fixed;
float: right;
margin-right: 20px;
z-index: 1;
}
I have three paragraphs with heading and each heading have a border-bottom which is on the left side.
I used h2:after{//CSS here } to display the border. I used left: 13.5%; for the first heading to display the border on the left side.I can use the left:25% for second and left:39% for the last heading to display the border but I know this is not a good way to display. Because If I used to like this then I have to use the media query for all the device to set the border.
I want to know which is the best way to use the border-bottom and all are display on the left side.
Getting the output
I need a output
body {
margin: 0;
padding: 0;
height: 100%;
}
.container {
width: 1170px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.heading {
margin-top: 20px;
margin-bottom: 30px;
}
.heading h2 {
font-size: 50px;
text-align: center;
}
.heading h2 span {
color: #0000ff;
}
.heading h2:after {
content: "";
border-bottom: 4px solid #E43D32;
content: ' ';
position: absolute;
display: block;
width: 100px;
left: 13.5%;
transform: translateX(-13.5%);
padding-top: 10px;
}
<div class="container">
<div class="par_1">
<div class="heading">
<h2><span>Lorem ipsum </span>Lorem ipsum dolor sit amet</h2>
</div>
<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>
</div>
<div class="par_2">
<div class="heading">
<h2><span>Lorem ipsum</span>dolor sit amet</h2>
</div>
<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>
</div>
<div class="par_3">
<div class="heading">
<h2><span>dolor sit amet</span></h2>
</div>
<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>
</div>
</div>
Simply apply it to the span instead of the h2 and no need to specify a specific value to left, simply make it 0 and also bottom to 0 (or any negative value if you want it to be lower)
[don't forget position:relative on span]
body {
margin: 0;
padding: 0;
height: 100%;
}
.container {
width: 1170px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.heading {
margin-top: 20px;
margin-bottom: 30px;
}
.heading h2 {
font-size: 50px;
text-align: center;
}
.heading h2 span {
color: #0000ff;
position:relative;
}
.heading h2 span:after {
content: "";
border-bottom: 4px solid #E43D32;
content: ' ';
position: absolute;
display: block;
width: 100px;
left: 0;
bottom:0;
padding-top: 10px;
}
<div class="container">
<div class="par_1">
<div class="heading">
<h2><span>Lorem ipsum </span>Lorem ipsum dolor sit amet</h2>
</div>
<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>
</div>
<div class="par_2">
<div class="heading">
<h2><span>Lorem ipsum</span>dolor sit amet</h2>
</div>
<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>
</div>
<div class="par_3">
<div class="heading">
<h2><span>dolor sit amet</span></h2>
</div>
<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>
</div>
</div>
You should put your pseudo element :after in your span because it covers the exact width of your heading text. Then you should give your span a relative positioning so it will become its parent. Then just give it a 0% left positioning so it will align with the left. Your code should look like this.
body {
margin: 0;
padding: 0;
height: 100%;
}
.container {
width: 1170px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.heading {
margin-top: 20px;
margin-bottom: 30px;
}
.heading h2 {
font-size: 50px;
text-align: center;
}
.heading h2 span {
color: #0000ff;
position: relative;
}
.heading h2 span:after {
content: "";
border-bottom: 4px solid #E43D32;
content: ' ';
position: absolute;
display: block;
width: 100px;
left: 0;
padding-top: 10px;
}
<div class="container">
<div class="par_1">
<div class="heading">
<h2><span>Lorem ipsum </span>Lorem ipsum dolor sit amet</h2>
</div>
<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>
</div>
<div class="par_2">
<div class="heading">
<h2><span>Lorem ipsum</span>dolor sit amet</h2>
</div>
<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>
</div>
<div class="par_3">
<div class="heading">
<h2><span>dolor sit amet</span></h2>
</div>
<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>
</div>
</div>
Recently, I have been working on a simple website for a small landscaping business as my first test starting as a web developer. Aware of my small amount of skills, the client does not care much for the site to be insanely detailed; he just wants his information to be accessible on the Internet since he isn't confident in his ability to manage social media himself.
I've run into a somewhat common problem from what I've seen, but every answer I try doesn't seem to work out. The problem is, while creating a sample/template with googled images and sample text to form a layout, my background image is covering the background color assigned to the footer, which I don't want. Can someone help me with this?
P.S. I'm aware there are a LOT of things that aren't finished in this code and I believe that I've seen most of them (ex. link targets and urls), but feel free to point them out so I can make note of all of them
body, html {
font-family: 'Asap', sans-serif;
text-align: center;
padding: 0px;
margin: 0px;
background-image: url("../Images/firepit.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#Logo {
font-size: 3em;
font-style: italic;
background-color: #064501; /* Dark Woodrow Green */
padding: 20px;
margin-top: 0px;
margin-bottom: 0px;
}
#Navigation {
list-style: none;
margin-top: 0px;
background-color: rgba(255, 255, 255, .65);
padding: 10px;
}
#Navigation li {
display: inline;
padding-left: 5px;
padding-right: 5px;
}
#Navigation li a {
text-decoration: none;
color: #000;
}
#Wrapper {
width: 50%;
margin: 0px auto;
margin-top: 100px;
background-color: rgba(255, 255, 255, .65);
padding-top: 10px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px;
border-radius: 3.5%;
}
footer {
background-color: #064501; /* Dark Woodrow Green */
}
footer p {
float: left;
}
footer ul {
float: right;
}
footer ul li {
display: inline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Woodrow Lawn and Turf</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" href="../CSS/index.css">
<link href="https://fonts.googleapis.com/css?family=Asap:400,400i,500,500i,700,700i" rel="stylesheet">
</head>
<!-- DEVELOPER NOTES -->
<!--
- Keywords and description meta are still subject to change by the client.
- Make sure to add correct target attributes and file paths to the nav links.
- All images used in this mockup are subject to copyright currently.
- Make sure to add alternate font families to the font-family style.
-->
<body>
<header>
<h1 id="Logo">Woodrow Lawn and Turf</h1>
<nav>
<ul id="Navigation">
<li>About Us</li>
<li>|</li>
<li>Lawn Stuff</li>
<li>|</li>
<li>Dirt Stuff</li>
<li>|</li>
<li>Flower Bed Stuff</li>
<li>|</li>
<li>Patio Stuff</li>
<li>|</li>
<li>Firepit Stuff</li>
<li>|</li>
<li>Commercial and Business Stuff</li>
</ul>
</nav>
</header>
<div id="Wrapper">
<h1 id="Greeting">Welcome!</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>
<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.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.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.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.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.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>
</div>
<div id="Footer">
<footer>
<p id="Copyright">© Copyright Woodrow Lawn and Turf LLC 2017</p>
<ul>
<li>Contact:</li>
<li>(999)999-9999</li>
<li>|</li>
<li>stuffcompany#comp.net</li>
</ul>
</footer>
</div>
</body>
</html>
Add this to your code.
footer::after {
display: block;
content: '';
clear: both;
}
You're floating the content of footer, therefore removing them from the flow of the document.
The above code will clear the floats.
Try using the awesome power of flex-box!
footer {
display:flex;
flex-direction:row;
justify-content: space-between;
background: #064501; /* Dark Woodrow Green */
height:auto;
padding: 0 10px;
}
footer li{
list-style:none;
display:inline;
}
First pull the background stuff from the body, html rule set (in the CSS) and make a rule set for body only.
Then add a clearfix that can be used to prevent elements from collapsing.
Use the developing tools in your browser to inspect html elements and the CSS. If you point at the element source code in the developers tools and the element is not highlighted, it is most likely collapsing. Place a div with the class clearfix at the end of the element to fix it.
body,
html {
font-family: 'Asap', sans-serif;
text-align: center;
padding: 0px;
margin: 0px;
}
body {
background-image: url("https://vignette1.wikia.nocookie.net/recipes/images/8/85/Firepit.jpg/revision/latest?cb=20140404181547");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#Logo {
font-size: 3em;
font-style: italic;
background-color: #064501;
/* Dark Woodrow Green */
padding: 20px;
margin-top: 0px;
margin-bottom: 0px;
}
#Navigation {
list-style: none;
margin-top: 0px;
background-color: rgba(255, 255, 255, .65);
padding: 10px;
}
#Navigation li {
display: inline;
padding-left: 5px;
padding-right: 5px;
}
#Navigation li a {
text-decoration: none;
color: #000;
}
#Wrapper {
width: 50%;
margin: 0px auto;
margin-top: 100px;
background-color: rgba(255, 255, 255, .65);
padding-top: 10px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px;
border-radius: 3.5%;
}
#Footer,
footer {
background-color: #064501; /* Dark Woodrow Green */
}
footer p {
float: left;
}
.clearfix:after {
clear: both;
content: ".";
display: block;
font-size: 0;
height: 0;
line-height: 0;
visibility: hidden
}
footer ul {
float: right;
}
footer ul li {
display: inline;
}
<header>
<h1 id="Logo">Woodrow Lawn and Turf</h1>
<nav>
<ul id="Navigation">
<li>About Us</li>
<li>|</li>
<li>Lawn Stuff</li>
<li>|</li>
<li>Dirt Stuff</li>
<li>|</li>
<li>Flower Bed Stuff</li>
<li>|</li>
<li>Patio Stuff</li>
<li>|</li>
<li>Firepit Stuff</li>
<li>|</li>
<li>Commercial and Business Stuff</li>
</ul>
</nav>
</header>
<div id="Wrapper">
<h1 id="Greeting">Welcome!</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>
<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.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.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.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.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.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>
</div>
<div id="Footer">
<footer>
<p id="Copyright">© Copyright Woodrow Lawn and Turf LLC 2017</p>
<ul>
<li>Contact:</li>
<li>(999)999-9999</li>
<li>|</li>
<li>stuffcompany#comp.net</li>
</ul>
<div class="clearfix"></div>
</footer>
</div>
I cannot get my menu bar to appear horizontally. I am still working on the whole page itself, but just need to focus on the #nav items not displaying correctly. Right now it is appearing centered and I would like it to be inline in the upper-right.
How can I fix this?
body {
background-image: url("http://i59.photobucket.com/albums/g304/ecarlson_2010/Mobile%20Uploads/2E3938F1-33FA-4CF1-A13A-F86E536A7CEA.jpg");
background-size: 30%;
background-repeat: no-repeat;
height: 500px;
top: 0;
font-family: cursive;
margin: 0 auto;
max-width: 500px;
background-color: black;
}
.left {
background-color: red;
}
a {
font-size: 15px;
}
#nav {
background-color: purple;
width: 15px;
height: 25px;
border-radius: 5px;
}
#nav li {
margin: 10px;
text-align: center;
float: right;
display: inline;
background-color: pink;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
}
<body>
<header>
<h1>Plant Tissue Culturing </h1>
<div id="nav">
<ul>
<li> HOW TO
</li>
<li> WHY
</li>
<li> HOW TO
</li>
</ul>
</div>
</header>
<h2>Micropropagation</h2>
<div class="first">
<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>
</div>
</div class="second">
<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>
<div class="third>
<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>
Just need to add display: inline-block; to your #nav li
#nav li {
margin: 10px;
float: left;
background-color: pink;
display: inline-block;
height: 25px;
border-radius: 5px;
}
jsfiddle
body {
background-image: url("http://i59.photobucket.com/albums/g304/ecarlson_2010/Mobile%20Uploads/2E3938F1-33FA-4CF1-A13A-F86E536A7CEA.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
font-family: cursive;
margin: 0 auto;
}
a {
font-size: 15px;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
float: right;
}
#nav li {
margin: 10px;
float: left;
background-color: pink;
display: inline-block;
height: 25px;
border-radius: 5px;
}
h2 {
position: relative;
}
<title>Plant Tissue Culturing</title>
<header>
<h1>Plant Tissue Culturing </h1>
<div id="nav">
<ul>
<li> HOW TO
</li>
<li> WHY
</li>
<li> WHERE
</li>
</ul>
<br/>
<br/>
<h2>Micropropagation</h2>
</div>
<br />
</header>
<body>
<div class="first">
<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>
</div>
<div class="second">
<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>
</div>
<div class="third">
<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>
</div>
</body>
Hi i currently have two colums one left and one right with the left column having two rows in it
however i want the centre point of the column offset to the right so the left column would be about 60% and the right would be 40%
Here is the html and css i am using
#import url(http://fonts.googleapis.com/css?family=Lora:700);
.container {
width: 75%;
margin: auto;
}
.titleheader {
text-align: center;
margin-top: 5px;
font-size: 70px;
font-family: 'Lora', serif;
border-bottom: 3px solid #000;
width: 56%;
margin: auto;
}
.midcontainer {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
margin-top: 20px;
}
.top {
margin-bottom: 15px;
}
.bottom {} .rightsection {} .leftsection {
display: inline-block;
}
.memo {}
<div class="container">
<div class="titleheader">
<?php echo $this->Accountname; ?></div>
<div class="midcontainer">
<div class="leftsection">
<div class="top">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.</div>
<div class="bottom">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.</div>
</div>
<div class="rightsection">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.</div>
</div>
<div class="memo"></div>
</div>
As much as I love them, you cannot set the widths of CSS columns independently. However, you can get the layout you're looking for by using CSS tables:
.midcontainer {
display:table;
border-spacing: 50px;
border-collapse: separate;
}
.leftsection, .rightsection{
display:table-cell;
}
.rightsection {
width:40%
}
#import url(http://fonts.googleapis.com/css?family=Lora:700);
.container{
width: 75%;
margin: auto;
border:1px dotted #ccc;
}
.titleheader{
text-align: center;
margin-top: 5px;
font-size: 70px;
font-family: 'Lora', serif;
border-bottom: 3px solid #000;
width: 56%;
margin: auto;
}
.midcontainer {
display:table;
border-spacing: 50px;
border-collapse: separate;
}
.leftsection, .rightsection{
display:table-cell;
}
.rightsection {
width:40%
}
.top{
margin-bottom: 15px;
}
.bottom{
}
.memo{
}
<div class="container">
<div class="titleheader">Invalid Account Number</div>
<div class="midcontainer">
<div class="leftsection">
<div class="top">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.</div>
<div class="bottom">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.</div>
</div>
<div class="rightsection">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.</div>
</div>
<div class="memo"></div>