I'm trying to make a dropdown menu using html and css. However, when I change something in media query it also affects the same elements that's outside of it. Specifically,I have a horizontal navigation bar and I have sentered the links
vertically using "align-items:center".It works, but it also align my items the same way inside the media query.(on the dropdown, they appear in the middle"vertically" while I want them to me on top(x,y = 0).
I basically want my links inside media to be placed at the top while the same link outside the media to stay aligned.
Thank you..
* {
box-sizing: border-box;
font-family: sans-serif;
}
#media screen and (max-width:650px) {
#links{
background-color:red;
position:fixed;
inset:0 0 0 50%;
z-index:20;
align-self: flex-end;
}
#links ul{
flex-direction:column;
background-color: white;
}
}
#img{
width:3em;
height:3em;
}
#header-img{
display:flex;
}
#header{
display:flex;
justify-content: space-around;
}
#nav-bar{
display:flex;
justify-content: flex-end;
}
a{
text-decoration:none;
}
#links{
display:flex;
align-items:center;
}
#links ul{
list-style-type: none;
margin:0;
display:flex;
gap:5rem;
}
html {
height: 100%;
}
body {
margin: 0;
}
.main {
margin: 0;
padding-top: 68px;
background-color: #eee;
width: 98%;
margin-left: auto;
margin-right: auto;
}
.plans {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.column {
width: 90%;
max-width:280px;
background-color: white;
height: 30em;
border-style: solid;
border-width: 1px;
border-radius: 5px;
box-shadow: 0 0 10px grey;
}
.column_3,
.column_2,
.column_1 {
margin: 20px 20px;
}
.column h5 {
text-align: center;
background-color: lightgrey;
margin-top: 0;
padding: 10px 0;
}
.column h5 p {
margin-top: 5px;
margin-bottom: 0;
font-size: 18px;
}
.pricing {
height: 52%;
margin-top: -22px;
width: 80%;
margin-left: auto;
margin-right: auto;
}
.pricing_content {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
padding-top: 40px;
}
#link_one {
font-weight: bold;
font-size: .8em;
width: 45%;
padding: 10px 10px;
margin-left: auto;
margin-right: auto;
background-color: black;
border-radius: 3px;
border-style: solid;
border-width: 1px;
border-color: transparent;
}
#link_one:hover {
background-color: white;
border-style: solid;
border-width: 1px;
border-color: black;
color: black;
font-weight: bold;
}
#link_two {
font-size:.8em;
color: black;
font-weight: bold;
margin-top: 25px;
background-color: #eee;
width: 45%;
padding: 10px 10px;
margin-left: auto;
margin-right: auto;
}
#link_two:hover {
background-color: lightgrey;
}
#below_button {
margin-top: 60px;
}
.checks {
width: 100%;
}
.checks ul {
list-style-type: none;
}
.checks ul li:before {
content: "✓";
padding-right: 8px;
color: rgb(0, 230, 0);
}
ul li {
text-indent: -1.25em;
}
.separator {
height: 1px;
width: 80%;
margin-left: auto;
margin-right: auto;
background-color: lightgrey;
}
.benefits {
width: 100%;
min-height: 300px;
display: flex;
flex-wrap: wrap;
justify-content: center;
text-align: center;
background-color: #f4f4f4;
}
.fa-solid {
padding: 5px 5px;
color: rgb(0, 250, 0);
}
.rectangle {
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 auto;
height: 300px;
min-width: 200px;
max-width:300px;
}
.footer {
width: 75%;
height: 200px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
bottom: 0;
position: static;
}
.contact_info {
background-color: black;
width: 100%;
height: 120px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.icons_left ul {
list-style: none;
display: flex;
margin: 0;
padding: 40px 30px;
}
.icons_left ul li {
padding: 0 40px;
color: white;
}
.contact_right {
font-size: 1.05em;
padding: 10px 30px;
color: white;
}
.footer .fa-2x:hover {
color: rgb(0, 250, 0);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<script
src="https://kit.fontawesome.com/1724737a9d.js"
crossorigin="anonymous"
></script>
<title>Document</title>
</head>
<body>
<div class="wrap">
<div id="header">
<div id="header-img">
<img
id="img"
src="https://pngimg.com/uploads/gorilla/gorilla_PNG18705.png"
alt=""
/>
<h2>Gorilla Drive</h2>
</div>
<div id="nav-bar">
<nav id="links">
<ul>
<li class="nav-link">Deals</li>
<li class="nav-link">Benefits</li>
<li class="nav-link">Contact</li>
</ul>
</nav>
</div>
</div>
<div class="main">
<div class="plans">
<div class="column column_1">
<h5>
Basic<br />
<p>100 GB</p>
</h5>
<div class="pricing">
<div class="pricing_content">
<a id="link_one" href="#">$2,99/month</a>
<i id="below_button">Pay annualy (save 100%)</i>
<a id="link_two" href="">$20,99/year</a>
</div>
</div>
<div class="separator"></div>
<div class="checks">
<ul class="check_links">
<li>Lorem ipsum.</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum dolor lahim.</li>
</ul>
</div>
</div>
<div class="column column_2">
<h5>
Standard<br />
<p>1 TB</p>
</h5>
<div class="pricing">
<div class="pricing_content">
<a id="link_one" href="#">$2,99/month</a>
<i id="below_button">Pay annualy (save 100%)</i>
<a id="link_two" href="">$20,99/year</a>
</div>
</div>
<div class="separator"></div>
<div class="checks">
<ul class="check_links">
<li>Lorem ipsum.</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum dolor lahim.</li>
<li>Lorem ipsum dolor lahim baban.</li>
</ul>
</div>
</div>
<div class="column column_3">
<h5>
Premium<br />
<p>2 TB</p>
</h5>
<div class="pricing">
<div class="pricing_content">
<a id="link_one" href="#">$2,99/month</a>
<i id="below_button">Pay annualy (save 100%)</i>
<a id="link_two" href="">$20,99/year</a>
</div>
</div>
<div class="separator"></div>
<div class="checks">
<ul class="check_links">
<li>Lorem ipsum.</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum dolor lahim.</li>
<li>Lorem ipsum dolor lahim baban.</li>
<li>Lorem ipsum dolor lahim baban sahim.</li>
</ul>
</div>
</div>
</div>
<div class="benefits">
<div class="rectangle rectangle_1">
<i class="fa-solid fa-fire fa-4x"></i>
<h4><b>High quality!</b></h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
ullamcorper posuere nisi eu finibus.
</p>
</div>
<div class="rectangle rectangle_2">
<i class="fa-solid fa-jet-fighter-up fa-4x"></i>
<h4><b>Jet Fast support!</b></h4>
<p>
Proin feugiat sem tellus, commodo lacinia dui viverra ac. Sed
sollicitudin non metus sed sagittis. Nunc at tincidunt magna.
</p>
</div>
<div class="rectangle rectangle_3">
<i class="fa-solid fa-user-group fa-4x"></i>
<h4><b>Share with your family!</b></h4>
<p>
Aliquam vel mi blandit, venenatis risus vel, pellentesque nisl.
Suspendisse et sem leo.
</p>
</div>
</div>
</div>
</div>
<div class="footer"></div>
</body>
</html>
enter image description here
Add the flowing to the #links ul directly
#links ul {
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
and remove
ul li {
text-indent: -1.25em;
}
Related
Okay, I'll try to make this pretty quick. I'm working on upgrading my website's looks as a fun project. I used tables before as my site layout, but I'm trying to use CSS Grid as I've learned a lot since then. I'm using a CSS grid of just 3 columns, the outer two act as margins and the center is for content. Whenever there is enough content to make the page scroll down, the margins don't grow with it. In fact, neither does the center, because when I scroll to the bottom after putting something below a tall image it just shows the background color of my container.
To make the question simpler, how do I make the off white parts of my page black like the rest of the margins?
Scrolled to middle of page: Link to first picture
Scrolled all the way to the bottom: Link to second picture
I repeat, the off white color is not intentional, that's there because it's the color of the container. Everything that's the cream color should be black or gray!
body {
margin: 0;
width: 100vw;
height: 100vh;
font-family: Arial, Helvetica, sans-serif;
}
.content {
width: 70vw;
height: 100vh;
background-color: #252525;
}
.margin {
width: 15vw;
height: 100vh;
background-color: #000000;
}
table{
table-layout: fixed;
border-collapse: collapse;
width: 100%;
}
tr {
vertical-align: top;
}
a {
color: dodgerblue;
}
p {
color: #45d163;
font-size: 3.0vh;
text-align: left;
margin-left: 2.5vw;
font-family: Arial, bold;
font-weight: bold;
}
ol {
margin-left: 3.5vw;
}
ul{
}
li{
}
.fixed {
position: fixed;
}
.grid-container {
display: grid;
grid-template-columns: 15% 70% 15%;
background-color: #fceee3;
width: 100vw;
height: 100vh;
min-width: 0;
min-height: 100vh;
}
.grid-item {
background-color: #000000;
font-size: 5px;
text-align: left;
color: #f1f1f1;
min-height: 100vh;
margin-top: 0%;
}
.grid-center {
background-color: #252525;
color: blue;
font-size: 30vh;
text-align: left;
min-height: 100vh;
margin-top: 0%;
}
<!DOCTYPE html>
<html lang="en" >
<!-- partial:index.partial.html -->
<head>
<meta charset="UTF-8">
<title>Keyboard Mechanic</title>
<link rel="stylesheet" href="style.css"> </link>
<style>
.header {
overflow: hidden;
background-color: #171615;
padding: 1% 1%;
width: 100%;
position: fixed;
height: 7%;
}
.header a {
float: left;
color: #f1f1f1;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
width: max-content !important;
margin-right: 10px;
}
.header a.active {
background-color: dodgerblue;
color: white;
width: 8vw;
margin-right: 10px;
}
.header a.logo {
all: unset;
}
.login {
background-color: dodgerblue;
color: white;
width: 8vw;
margin-right: 10px;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header-right {
float: right;
}
#media screen and (max-width: 100%) {
.header a {
float: none;
display: block;
text-align: left;
}
}
</style>
<style>
.wrapper {
display: grid;
grid-template-columns: 15% 70% 15%;
grid-template-rows: 1fr;
background-color: #fceee3;
width: 100vw;
height: 100%;
overflow: scroll;
min-height: 100# !important;
}
.grid-item {
background-color: #000000;
font-size: 5px;
text-align: left;
color: #f1f1f1;
margin-top: 0%;
height: auto;
min-height: 100# !important;
}
.grid-center {
background-color: #252525;
margin-top: 0%;
width: 100%;
height: 100%;
min-height: 100# !important;
}
</style>
</head>
<body>
<div class="header">
<div class="header-right">
<a class="active" href="newLook.html">Home</a>
<a class="active" href="games.html">Games</a>
<a class="active" href="webprojects.html">Web Projects</a>
<a class="login" href="login.html">Login</a>
Contact
About
</div>
</div>
<div class="wrapper">
<div class="grid-item"> </div>
<div class="grid-center">
<p>Hello </p>
<img style="width: 100%;" src="https://i.imgur.com/DvlV8Sh.png" />
<p> Stuff outside the picture doesn't sit inside the center grid item, if it did, the background would be gray! </p>
</div>
<div class="grid-item"> </div>
</div>
</body>
</html>
<!-- partial -->
You could have done this with flex, To the best of my knowledge grid is not made for that purpose!
Here's an example made with flex
body {
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background: #171615;
}
.header {
/* If you don't want the header to be sticky on scroll remove these lines */
position: sticky;
top: 0;
/* If you don't want the header to be sticky on scroll remove these lines */
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
background: #171615;
}
.header-logo {
height: 55px;
}
.logo {
height: 100%;
width: 135px;
object-fit: cover;
}
.header-menu {
display: flex;
flex-flow: row wrap;
}
.header-menu a {
color: #f1f1f1;
padding: 12px;
text-decoration: none;
border-radius: 4px;
margin-right: 8px;
white-space: nowrap;
}
.header a.active {
background: dodgerblue;
}
.login {
background-color: dodgerblue;
}
.header-menu a:hover {
background-color: #ddd;
color: black;
}
.wrapper {
width: 70%;
color: white;
}
/* you can remove this part */
.white-space {
display: flex;
height: 800px;
font-size: 3rem;
background: darkgray;
}
/* you can remove this part */
<div class="header">
<div class="header-logo">
<img class="logo" src="https://via.placeholder.com/135x55" alt="Logo" />
</div>
<div class="header-menu">
<a class="active" href="#">Home</a>
<a class="active" href="#">Games</a>
<a class="active" href="#">Web Projects</a>
<a class="login" href="#">Login</a>
Contact
About
</div>
</div>
<div class="wrapper">
<!-- put your content here -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac ut consequat semper viverra. Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut.</p>
<div class="white-space">
<h2 style="margin: auto">White Space</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac ut consequat semper viverra. Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut.</p>
<!-- put your content here -->
</div>
Updated:
added custom height to the header
body {
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background: #171615;
}
.header {
/* If you don't want the header to be sticky on scroll remove these lines */
position: sticky;
top: 0;
/* If you don't want the header to be sticky on scroll remove these lines */
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
background: #171615;
}
.header-logo {
height: 55px;
}
.logo {
height: 100%;
width: 135px;
object-fit: cover;
}
.header-menu {
display: flex;
flex-flow: row wrap;
height: 100px;
align-items: center;
}
.header-menu a {
color: #f1f1f1;
padding: 12px;
text-decoration: none;
border-radius: 4px;
margin-right: 8px;
white-space: nowrap;
}
.header a.active {
background: dodgerblue;
}
.login {
background-color: dodgerblue;
}
.header-menu a:hover {
background-color: #ddd;
color: black;
}
.wrapper {
width: 70%;
color: white;
}
/* you can remove this part */
.white-space {
display: flex;
height: 800px;
font-size: 3rem;
background: darkgray;
}
/* you can remove this part */
<div class="header">
<div class="header-logo">
<img class="logo" src="https://via.placeholder.com/135x55" alt="Logo" />
</div>
<div class="header-menu">
<a class="active" href="#">Home</a>
<a class="active" href="#">Games</a>
<a class="active" href="#">Web Projects</a>
<a class="login" href="#">Login</a>
Contact
About
</div>
</div>
<div class="wrapper">
<!-- put your content here -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac ut consequat semper viverra. Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut.</p>
<div class="white-space">
<h2 style="margin: auto">White Space</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac ut consequat semper viverra. Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut.</p>
<!-- put your content here -->
</div>
Remove the min-height for .grid-center and .grid-item:
.grid-item {
background-color: #000000;
font-size: 5px;
text-align: left;
color: #f1f1f1;
margin-top: 0%;
}
.grid-center {
background-color: #252525;
color: blue;
font-size: 30vh;
text-align: left;
margin-top: 0%;
}
This question already has answers here:
CSS - Equal Height Columns?
(11 answers)
Closed 2 years ago.
I have 3 columns in my footer (f-box). I want them to have equal height. I don't want to use flexbox for this one. I am trying to achieve the result using - display:table on my container of the boxes and make display:table-cell for every box. But it doesn't work. Why? How to do it with this display: table method
#import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400;600;700;800&family=Quantico:wght#400;700&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Open Sans", sans-serif;
line-height: 1.5;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Quantico", sans-serif;
margin-bottom: 20px;
}
p {
font-size: 15px;
color: #666;
line-height: 26px;
margin-bottom: 15px;
}
a {
font-family: "Quantico", sans-serif;
text-decoration: none;
color: #111;
}
ul {
list-style: none;
}
img {
width: 100%;
display: block;
}
/* Theme */
.container {
margin: auto;
max-width: 1500px;
padding: 0 15px;
}
.logo {
font-size: 30px;
padding: 20px 0;
float: left;
margin: 0;
}
.main-color {
color: #009603;
}
.btn {
display: inline-block;
text-transform: uppercase;
background: #009603;
color: #fff;
padding: 14px 30px;
font-weight: 700;
}
/* Nav */
nav {
overflow: hidden;
text-transform: uppercase;
}
nav ul {
float: right;
}
nav ul li {
float: left;
margin-right: 32px;
position: relative;
}
nav ul li a {
display: block;
padding: 31px 8px;
font-weight: 700;
}
nav ul li a:after {
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 100%;
background: #009603;
content: "";
opacity: 0;
transition: all 0.3s;
}
nav ul li.active a:after {
opacity: 1;
}
nav ul li:hover > a:after {
opacity: 1;
}
/* Showcase */
#showcase {
background: url("../img/bg.jpg") no-repeat center center/cover;
height: 900px;
}
#showcase .showcase-content {
color: #fff;
text-align: center;
padding-top: 300px;
}
#showcase .showcase-content h2 {
font-size: 60px;
font-weight: 700;
text-transform: uppercase;
}
#showcase .showcase-content p {
margin-bottom: 30px;
line-height: 30px;
color: #fff;
}
/* Features */
#features {
padding-bottom: 60px;
}
#features .container {
margin-top: -70px;
max-width: 1400px;
overflow: hidden;
}
#features .box {
background: #fff;
float: left;
max-width: 30%;
margin: 0 15px 30px 15px;
padding: 10px 10px 18px 10px;
box-shadow: 0px 10px 25px rgba(206, 206, 206, 0.5);
text-align: center;
}
#features .box img {
margin-bottom: 28px;
}
#features .box h3 {
color: #191039;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 10px;
font-size: 30px;
}
/* Footer */
footer {
padding-top: 70px;
overflow: hidden;
background-color: #000;
}
footer .container {
max-width: 1400px;
display: table;
}
footer .f-box {
display: table-cell;
float: left;
max-width: 33.3%;
margin-bottom: 30px;
padding: 0 15px;
}
footer .logo {
padding-top: 0;
color: #fff;
text-transform: uppercase;
float: none;
}
footer p {
color: #c4c4c4;
margin-bottom: 20px;
}
footer .social i {
color: #fff;
margin-right: 20px;
}
footer h5 {
color: #fff;
text-transform: uppercase;
font-size: 20px;
font-weight: 700px;
margin-bottom: 35px;
padding-top: 5px;
}
footer img {
float: left;
width: calc(33.33% - 5px);
margin-right: 5px;
}
footer form {
position: relative;
}
footer input {
width: 100%;
height: 50px;
font-size: 15px;
color: #c4c4c4;
padding-left: 20px;
border: 1px solid #009603;
background: transparent;
}
footer form button {
font-size: 18px;
color: #fff;
background: #009603;
height: 50px;
width: 50px;
border: none;
position: absolute;
right: 0;
top: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pacocha | Garden Projects</title>
<link rel="stylesheet" href="css/style.css" />
<script
src="https://kit.fontawesome.com/1685e275a4.js"
crossorigin="anonymous"
></script>
</head>
<body>
<header>
<nav>
<div class="container">
<a href="index.html">
<h1 class="logo"><i class="fas fa-leaf main-color"></i> Pacocha</h1>
</a>
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</div>
</nav>
<div id="showcase">
<div class="container">
<div class="showcase-content">
<h2>Garden Projects</h2>
<p>
We have the best home improvement projects, expert advice, and DIY
home improvement ideas for your home. <br />
You can create your dream home with smart planning and the right
home improvement contractors.
</p>
About Us
</div>
</div>
</div>
</header>
<!-- Features -->
<section id="features">
<div class="container">
<div class="box">
<img src="img/feat1.jpeg" alt="" />
<h3>Gardening</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores
magnam reprehenderit aspernatur neque nam ipsum enim, vitae minus
totam voluptates.
</p>
</div>
<div class="box">
<img src="img/feat2.jpg" alt="" />
<h3>Decorating</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores
magnam reprehenderit aspernatur neque nam ipsum enim, vitae minus
totam voluptates.
</p>
</div>
<div class="box">
<img src="img/feat3.jpg" alt="" />
<h3>Ideas</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores
magnam reprehenderit aspernatur neque nam ipsum enim, vitae minus
totam voluptates.
</p>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="f-box">
<h1 class="logo"><i class="fas fa-leaf main-color"></i> Pacocha</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione
corporis nostrum ex perferendis! Adipisci, molestias.
</p>
<div class="social">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-youtube"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
<div class="f-box">
<h5>Instagram</h5>
<img src="img/insta1.jpg" alt="" />
<img src="img/insta2.jpg" alt="" />
<img src="img/insta3.jpg" alt="" />
</div>
<div class="f-box">
<h5>Subscribe</h5>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Necessitatibus, vel?
</p>
<form action="">
<input type="email" placeholder="Email" />
<button type="submit"><i class="fa fa-send"></i></button>
</form>
</div>
</div>
</footer>
</body>
</html>
you just need this css
footer {
padding: 70px 0;
}
footer .f-box {
display: table-cell;
float: none;
width: 33.3%;
margin-bottom: 30px; /*the margin property is not applicable to display:table-cell elements.*/
padding: 0 15px;
}
and it will behave like this - equal column height
So, I made a really cool website. Then, in a separate file, I made a really cool navigation bar. However, when I put them together, the navigation bar is gone. The background of the very first div called "list" should be filled and should bigger, however, it is not. Hopefully, someone can help me to have the navigation bar and site on the same page. Thanks!
.list {
background-color: #666;
color: #111111;
height: 105px;
width: 100%;
}
.list a {
margin-top: 20px;
float: right;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 25px;
}
.list a:hover {
background-color: #70b5ff;
color: #111111;
}
.list a.on {
background-color: #81ff7c;
color: #005604;
}
.imagefornav {
width: 160px;
height: 100px;
}
body, html {
height: 100%;
margin: 0;
margin-top: 0;
padding: 0;
font-family: Verdana, sans-serif;
line-height: 35px;
font-weight: 300;
color: #797a7c;
}
.title {
letter-spacing: 5px;
color: #1d3863;
text-align: center;
text-decoration: underline overline;
font-size: 35px;
line-height: 75px;
margin-top: 13%;
text-transform: uppercase;
opacity: 1.00;
padding-right: 370px;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 370px;
animation: Fadein 2s ease-in;
}
#keyframes Fadein {
from {
opacity: 0;
}
to {
opacity: 0.80;
}
}
.imgc1, #imgc2, #imgc3, #imgc4 {
position: relative;
opacity: 0.80;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.imgc1 {
background-image: url("http://pluspng.com/img-png/ocean-background-png-hd-superior-ocean-background-wallpapers-widescreen-for-desktop-2560.jpg");
height: 700px;
width: 100%;
margin: 0;
margin-top: -16px;
}
.border1 {
padding: 1px;
background-color: #111;
font-family: arial, sans-serif;
}
#imgc2 {
background-image: url("https://wallpaperstream.com/wallpapers/full/desert-sand/Algodones-Dunes-Desert-Sand-HD-Wallpaper.jpg");
height: 600px;
background-position: center right;
}
#Imgtxt1 {
font-size: 41px;
line-height: 100px;
color: #111111;
padding-top: 100px;
}
#imgc3 {
background-image: url("http://pluspng.com/img-png/ocean-background-png-hd-superior-ocean-background-wallpapers-widescreen-for-desktop-2560.jpg");
height: 650px;
}
#section1 {
text-align: center;
padding: 50px 70px;
font-size: 19px;
}
#section2 {
text-align: center;
padding: 50px 70px;
background-color: #666;
color: #f4f4f4;
height: 50%;
margin: 0px;
}
#section3 {
height: 400px;
width: 100%;
}
.invis {
visibility: hidden;
}
#BF {
font-size: 15px;
animation: Comein 200s ease-in;
padding-left: 0px;
text-align: left;
visibility: hidden;
opacity: 0;
}
#keyframes Comein {
0% {
opacity: 0;
padding-left: 0px;
visibility: hidden;
}
6% {
opacity: 0;
padding-left: 0px;
visibility: hidden;
}
7% {
opacity: 1;
padding-left: 600px;
visibility: visible;
}
100% {
padding-left: 601px;
opacity: 1;
}
}
#ranger {
font-size: 25px;
padding-left: 5px;
}
#borderabout {
background-color: #666;
width: 100%;
color: #FFFFFF;
text-align: center;
border-radius: 25px;
opacity: 0.70;
}
#borderourgoal {
font-size: 35px;
line-height: 70px;
}
#ourgoal {
letter-spacing: 10px;
}
#you {
font-size: 60px;
}
#about {
letter-spacing: 10px;
}
#border3 {
background-color: #1be2e5;
opacity: 0.60;
height: 650px;
color: #111111;
}
#opacityforborder3 {
padding-top: 200px;
font-size: 30px;
}
#imgtxt2 {
height: 100%;
}
.button1 {
border-radius: 15px;
margin-top: 80px;
margin-left: 605px;
border: none;
background-color: #666;
color: #FFFFFF;
padding: 20px;
text-align: center;
text-decoration: none;
font-size: 25px;
}
.button1:hover {
background-color: #FFFFFF;
color: #666;
border-style: solid;
border-width: 1.5px;
border-color: #666;
}
#contacts {
font-size: 25px;
text-align: center;
width: 100%;
}
#button2 {
padding: 10px;
margin-left: 300px;
height: 100px;
width: 100px;
background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Gmail_Icon.svg/100px-Gmail_Icon.svg.png");
border: none;
border-radius: 25px;
margin-top: 25px;
}
#button2:hover {
padding: 10px;
margin-left: 285px;
height: 140px;
width: 140px;
background: url("https://lh6.ggpht.com/8-N_qLXgV-eNDQINqTR-Pzu5Y8DuH0Xjz53zoWq_IcBNpcxDL_gK4uS_MvXH00yN6nd4=w140-rw");
border: none;
border-radius: 25px;
margin-top: 5px;
}
#Mygmail {
font-size: 20px;
margin-left: 290px;
margin-bottom: 0px;
width: 75%;
}
#dots {
visibility: hidden;
}
#refs {
float: right;
margin-right: 10px;
}
#linktext {
font-size: 17px;
margin-left: 35px;
}
#link01 {
margin-left: 300px;
}
#link1 {
margin-left: 170px;
}
#link2 {
margin-left: 60px;
}
#link3 {
margin-left: 125px;
}
#link4 {
margin-left: 50px;
}
a {
color: #60d16b;
}
#imgc4 {
background-color: #666;
height: 300px;
color: #FFFFFF;
}
#image1 {
height: 265px;
width: 400px;
margin-top: 20px;
margin-left: 20px;
}
#byme {
margin-left: 350px;
font-size: 13px;
}
<!DOCTYPE html>
<html>
<head>
<title>Resource Rangers</title>
<link href="CSS for 4th project (1).css" rel="stylesheet">
</head>
<style>
</style>
<body>
<div class="List">
<a class="a1" href="about.asp">Lack of Water</a>
Waters Journey
How
Why?
<a class="on" href="default.asp">Home</a>
</div>
<div class="imgc1"><br>
<div class="title">
<div class="border1">
<h3 align="center"> Resource Rangers </h3>
</div>
</div>
</div>
<div id="section1">
<div id="about">
<h2> About </h2>
</div>
<section>
<div id="borderabout">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse blandit tortor varius, suscipit
felis nec, consectetur est. Fusce at commodo velit. Aenean dictum ipsum est, ut congue ligula
condimentum et. Nullam cursus a purus id maximus. Sed ullamcorper erat neque, placerat pellentesque
lectus scelerisque sit amet. Fusce mi enim, bibendum gravida ex vel, dignissim aliquam dui. Etiam
porta augue non dignissim sagittis. Suspendisse at quam a felis hendrerit aliquam. Sed elementum
dapibus venenatis. Sed a neque ac tellus auctor dictum ac ut ante. Cras a lectus et nisl faucibus
venenatis. Pellentesque placerat dolor at dolor bibendum maximus. Nullam faucibus massa at enim
blandit ultrices. Nulla dapibus lacinia turpis eu aliquam. Morbi at fringilla tortor, eu eleifend
leo. <span id="ranger">Resource Ranger!</span>
</p>
</div>
</section>
</div>
<div id="imgc2">
<div id="Imgtxt1">
<div id="border2">
<h1 align="center"> "When the Wells dry, we know the worth of water"
<span class="invis">.</span>
<div id="BF"> - Benjamin Franklin </div>
</h1>
</div>
</div>
</div>
<div id="section2">
<section>
<div id="ourgoal">
<h2> Our Goal </h2>
</div>
<div id="borderourgoal">
<p>
<span id="you">You</span> to be inspired to and help you get involved, for the benefit of our
community of , as well as the global community, and our planet.
</p>
</div>
</section>
</div>
<div id="imgc3">
<div id="Imgtxt2">
<div id="border3">
<div id="opacityforborder3">
<h1 align="center" class="moreinfo"> To find out more information </h1>
<button class="button1" onclick="location.href = 'default.asp';">Click Here</button>
</div>
</div>
</div>
</div>
<div id="section3">
<span id="contacts">
<h2> Contacts </h2>
</span>
<div id="Mygmail">
<h3> My Gmail
<span id="dots">......................................................</span>More References
</h3>
</div>
<div id="stuff1">
<button id="button2" onclick="location.href = 'https://www.lipsum.com/feed/html';"></button>
<span id="refs"> <span id="linktext">Here are some more links if you are looking to go more in depth into
water conservation! </span><br>
<span id="link01">https://saveourwater.com</span><br>
<span id="link1"> https://www.farnellfamily.com/cfarnell/why/default.html</span><br>
<span id="link2"> https://learn.eartheasy.com/guides/45-ways-to-conserve-water-in-the-home-and-yard/</span><br>
<span id="link3"> https://www.constellation.com/energy-101/water-conservation-tips0.html</span><br>
<span id="link4"> https://www.lipsum.com/feed/html</span></span>
</div>
</div>
<div id="imgc4">
<div id="Imgtxt3">
<div id="border4">
<img id="image1" src="wix3.png">
<span id="byme">By All rights reserved</span>
</div>
</div>
</div>
</body>
<script type="text/javascript"></script>
</html>
In your html you apply the class List.
however, in your CSS you call .list (lowercase l).
Change your HTML class to list and it will work.
Edited the snippet. In the html use 'list' instead of 'List'. Also I have made, .list position as fixed.
.list {
background-color: #666;
color: #111111;
height: 105px;
width: 100%;
position: fixed;
top: 0;
z-index: 1000;
}
.list a {
margin-top: 20px;
float: right;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 25px;
}
.list a:hover {
background-color: #70b5ff;
color: #111111;
}
.list a.on {
background-color: #81ff7c;
color: #005604;
}
.imagefornav {
width: 160px;
height: 100px;
}
body, html {
height: 100%;
margin: 0;
margin-top: 0;
padding: 0;
font-family: Verdana, sans-serif;
line-height: 35px;
font-weight: 300;
color: #797a7c;
}
.title {
letter-spacing: 5px;
color: #1d3863;
text-align: center;
text-decoration: underline overline;
font-size: 35px;
line-height: 75px;
margin-top: 13%;
text-transform: uppercase;
opacity: 1.00;
padding-right: 370px;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 370px;
animation: Fadein 2s ease-in;
}
#keyframes Fadein {
from {
opacity: 0;
}
to {
opacity: 0.80;
}
}
.imgc1, #imgc2, #imgc3, #imgc4 {
position: relative;
opacity: 0.80;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.imgc1 {
background-image: url("http://pluspng.com/img-png/ocean-background-png-hd-superior-ocean-background-wallpapers-widescreen-for-desktop-2560.jpg");
height: 700px;
width: 100%;
margin: 0;
margin-top: -16px;
}
.border1 {
padding: 1px;
background-color: #111;
font-family: arial, sans-serif;
}
#imgc2 {
background-image: url("https://wallpaperstream.com/wallpapers/full/desert-sand/Algodones-Dunes-Desert-Sand-HD-Wallpaper.jpg");
height: 600px;
background-position: center right;
}
#Imgtxt1 {
font-size: 41px;
line-height: 100px;
color: #111111;
padding-top: 100px;
}
#imgc3 {
background-image: url("http://pluspng.com/img-png/ocean-background-png-hd-superior-ocean-background-wallpapers-widescreen-for-desktop-2560.jpg");
height: 650px;
}
#section1 {
text-align: center;
padding: 50px 70px;
font-size: 19px;
}
#section2 {
text-align: center;
padding: 50px 70px;
background-color: #666;
color: #f4f4f4;
height: 50%;
margin: 0px;
}
#section3 {
height: 400px;
width: 100%;
}
.invis {
visibility: hidden;
}
#BF {
font-size: 15px;
animation: Comein 200s ease-in;
padding-left: 0px;
text-align: left;
visibility: hidden;
opacity: 0;
}
#keyframes Comein {
0% {
opacity: 0;
padding-left: 0px;
visibility: hidden;
}
6% {
opacity: 0;
padding-left: 0px;
visibility: hidden;
}
7% {
opacity: 1;
padding-left: 600px;
visibility: visible;
}
100% {
padding-left: 601px;
opacity: 1;
}
}
#ranger {
font-size: 25px;
padding-left: 5px;
}
#borderabout {
background-color: #666;
width: 100%;
color: #FFFFFF;
text-align: center;
border-radius: 25px;
opacity: 0.70;
}
#borderourgoal {
font-size: 35px;
line-height: 70px;
}
#ourgoal {
letter-spacing: 10px;
}
#you {
font-size: 60px;
}
#about {
letter-spacing: 10px;
}
#border3 {
background-color: #1be2e5;
opacity: 0.60;
height: 650px;
color: #111111;
}
#opacityforborder3 {
padding-top: 200px;
font-size: 30px;
}
#imgtxt2 {
height: 100%;
}
.button1 {
border-radius: 15px;
margin-top: 80px;
margin-left: 605px;
border: none;
background-color: #666;
color: #FFFFFF;
padding: 20px;
text-align: center;
text-decoration: none;
font-size: 25px;
}
.button1:hover {
background-color: #FFFFFF;
color: #666;
border-style: solid;
border-width: 1.5px;
border-color: #666;
}
#contacts {
font-size: 25px;
text-align: center;
width: 100%;
}
#button2 {
padding: 10px;
margin-left: 300px;
height: 100px;
width: 100px;
background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Gmail_Icon.svg/100px-Gmail_Icon.svg.png");
border: none;
border-radius: 25px;
margin-top: 25px;
}
#button2:hover {
padding: 10px;
margin-left: 285px;
height: 140px;
width: 140px;
background: url("https://lh6.ggpht.com/8-N_qLXgV-eNDQINqTR-Pzu5Y8DuH0Xjz53zoWq_IcBNpcxDL_gK4uS_MvXH00yN6nd4=w140-rw");
border: none;
border-radius: 25px;
margin-top: 5px;
}
#Mygmail {
font-size: 20px;
margin-left: 290px;
margin-bottom: 0px;
width: 75%;
}
#dots {
visibility: hidden;
}
#refs {
float: right;
margin-right: 10px;
}
#linktext {
font-size: 17px;
margin-left: 35px;
}
#link01 {
margin-left: 300px;
}
#link1 {
margin-left: 170px;
}
#link2 {
margin-left: 60px;
}
#link3 {
margin-left: 125px;
}
#link4 {
margin-left: 50px;
}
a {
color: #60d16b;
}
#imgc4 {
background-color: #666;
height: 300px;
color: #FFFFFF;
}
#image1 {
height: 265px;
width: 400px;
margin-top: 20px;
margin-left: 20px;
}
#byme {
margin-left: 350px;
font-size: 13px;
}
<!DOCTYPE html>
<html>
<head>
<title>Resource Rangers</title>
<link href ="CSS for 4th project (1).css" rel ="stylesheet">
</head>
<style>
</style>
<body>
<div class="list">
<a class= "a1" href="about.asp">Lack of Water</a>
Waters Journey
How
Why?
<a class= "on" href="default.asp">Home</a>
</div>
<div class= "imgc1">
<br>
<div class= "title">
<div class= "border1">
<h3 align="center"> Resource Rangers </h3>
</div>
</div>
</div>
<div id= "section1">
<div id= "about">
<h2> About </h2>
</div>
<section>
<div id= "borderabout">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse blandit tortor varius, suscipit felis nec, consectetur est. Fusce at commodo velit. Aenean dictum ipsum est, ut congue ligula condimentum et. Nullam cursus a purus id maximus. Sed ullamcorper erat neque, placerat pellentesque lectus scelerisque sit amet. Fusce mi enim, bibendum gravida ex vel, dignissim aliquam dui. Etiam porta augue non dignissim sagittis. Suspendisse at quam a felis hendrerit aliquam. Sed elementum dapibus venenatis. Sed a neque ac tellus auctor dictum ac ut ante. Cras a lectus et nisl faucibus venenatis. Pellentesque placerat dolor at dolor bibendum maximus. Nullam faucibus massa at enim blandit ultrices. Nulla dapibus lacinia turpis eu aliquam. Morbi at fringilla tortor, eu eleifend leo. <span id= "ranger">Resource Ranger!</span>
</p>
</div>
</section>
</div>
<div id= "imgc2">
<div id="Imgtxt1">
<div id= "border2">
<h1 align="center"> "When the Wells dry, we know the worth of water"
<span class= "invis">.</span> <div id= "BF"> - Benjamin Franklin </div> </h1>
</div>
</div>
</div>
<div id= "section2">
<section>
<div id= "ourgoal">
<h2> Our Goal </h2>
</div>
<div id= "borderourgoal">
<p>
<span id= "you">You</span> to be inspired to and help you get involved, for the benefit of our community of , as well as the global community, and our planet.
</p>
</div>
</section>
</div>
<div id= "imgc3">
<div id="Imgtxt2">
<div id= "border3">
<div id= "opacityforborder3">
<h1 align="center" class= "moreinfo"> To find out more information </h1>
<button class= "button1" onclick="location.href = 'default.asp';">Click Here</button>
</div>
</div>
</div>
</div>
<div id= "section3">
<span id= "contacts">
<h2> Contacts </h2>
</span>
<div id= "Mygmail">
<h3> My Gmail<span id= "dots">......................................................</span>More References</h3></div>
<div id= "stuff1">
<button id= "button2" onclick="location.href = 'https://www.lipsum.com/feed/html';"></button>
<span id= "refs"> <span id= "linktext">Here are some more links if you are looking to go more in depth into water conservation! </span><br>
<span id="link01">https://saveourwater.com</span>
<br>
<span id= "link1"> https://www.farnellfamily.com/cfarnell/why/default.html</span><br>
<span id= "link2"> https://learn.eartheasy.com/guides/45-ways-to-conserve-water-in-the-home-and-yard/ </span><br>
<span id= "link3"> https://www.constellation.com/energy-101/water-conservation-tips0.html</span><br>
<span id= "link4"> https://www.lipsum.com/feed/html</span></span>
</div>
</div>
<div id= "imgc4">
<div id="Imgtxt3">
<div id= "border4">
<img id= "image1" src="wix3.png">
<span id="byme">By All rights reserved</span>
</div>
</div>
</div>
</body>
<script type="text/javascript">
</script>
</html>
in your html class name "List" where as in css its "list". change "List" to "list" in html. please keep the class name in html and css same. or else they will not work.
.list {
background-color: #666;
color: #111111;
height: 105px;
width: 100%;
}
<div class="List">
</div>
<!-- in the above class name is "List". change it to "list" -->
<div class="list">
</div>
I have a div (.news-container) display flex. Inside that div, I have 5 items, the first one is 100% width, the other 4 are 50% width. The problem is those 4 items don't have the same height even they are flex item with align-content: stretch. Are they supposed to have same height when we set parent display flex or did i do something wrong here?
body {
font-family: "Open Sans", Arial, sans-serif;
}
a {
text-decoration: none;
}
h1,
h2,
h3,
h4,
h5 {
margin: 0 0 20px 0;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.content {
margin: 20px auto;
}
.float-content {
float: left;
}
.left-content {
width: 60%;
}
.right-content {
width: 40%;
}
.news-container {
display: flex;
flex-wrap: wrap;
padding-right: 5px;
overflow: hidden;
align-items: stretch;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.news-list-container {
padding-left: 5px;
}
.news-container .item {
position: relative;
margin-bottom: 10px;
width: calc(50% - 5px);
padding: 0;
}
.news-container .item:nth-child(even) {
margin-right: 10px;
}
.news-container .item:first-child {
width: 100%;
margin-right: 0;
}
.news-container .item .news-link {
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: #DC191B;
color: #fff;
padding: 10px;
text-transform: uppercase;
}
.news-container .item img {
width: 100%;
display: block;
margin-bottom: 0;
}
.news-container .item a.caption {
display: block;
padding: 10px 20px 13px 20px;
background-color: #000;
color: #fff;
font-family: 'Roboto Condensed', sans-serif;
font-size: 28px;
font-weight: bold;
}
#media screen and (min-width: 1200px) {
.content {
max-width: 970px;
}
}
<div class="wrapper">
<div class="content clearfix">
<div class="left-content float-content">
<div class="news-container">
<div class="item">
<a class="news-link" href="#">
New
</a>
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
<a class="caption" href="#" target="_blank">
Lorem ipsum
</a>
</div>
<div class="item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
<a class="caption" href="#" target="_blank">
Lorem ipsum dolor sit amet
</a>
</div>
<div class="item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
<a class="caption" href="#" target="_blank">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a turpis sagittis, viverra nibh a, lobortis libero.
</a>
</div>
<div class="item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
<a class="caption" href="#" target="_blank">
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
</a>
</div>
<div class="item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
<a class="caption" href="#" target="_blank">
Quisque sed tincidunt neque. Sed ut lacinia ex.
</a>
</div>
</div>
</div>
<div class="right-content float-content">
<div class="news-list-container">
<h2>
Latest update
</h2>
<ul>
<li>
News Number 1
</li>
<li>
News Number 2
</li>
<li>
News Number 3
</li>
<li>
News Number 4
</li>
</ul>
</div>
</div>
</div>
</div>
Actually, your items are the same height. It's just the content in each item isn't expanding to cover the height of the item. Here's an example:
As shown with the dev tools outline, the item on the left (with shorter content) is the same height as the item on the right.
You can use display: flex on the items, so align-items: stretch gets applied to the content.
Add this to your code:
.news-container .item:nth-child(2),
.news-container .item:nth-child(4),
.news-container .item:nth-child(5) {
display: flex;
flex-wrap: wrap;
}
Now the content fills each item.
jsFiddle demo
I have 2 section on a home page, both with a picture and some text. I want to get the picture and the text of the top section next to each other (picture on left and text on the right). And then in the bottom section the text on the left and the picture to the right of the text.
Snippet
.alignnone {
width: 20%;
display: inline-block;
height: 20px;
padding: 13px;
box-sizing: border-box;
}
.first {}
.button {
text-decoration: none;
color: #000;
border-radius: 5px;
border: 1px solid;
padding: 10px;
background-color: #43dbdb;
margin: 1%;
float: left;
}
.drop {
width: 30% !important;
border: none;
padding: 0%;
float: right;
}
.top {
display: inline-block;
vertical-align: top;
padding: 2%;
}
.bottom {
display: inline-block;
vertical-align: bottom;
padding: 2%;
}
#content {
background-color: #D7DBDD;
background-size: 90%;
padding: 6%;
margin: -2%;
}
h2 {
text-align: center;
}
<div class="top">
<img src="https://privatechefanna.co.za/wp-content/uploads/2018/01/IMG_3695.jpg" height="99" width="99" alt="Anna" class="alignnone " />
<h3>ABOUT ME</h3>
<p class="first ">.....</p>
</div>
<div class="bottom">
<img src="https://privatechefanna.co.za/wp-content/uploads/2018/01/IMG_3713.jpg" height="99" width="99" alt="Anna" class="drop" />
<h3>WHAT I DO</h3>
<p class="second">.....</p>
</div>
Is this (created a codepen) something you are looking for?
<div class="top">
<div class="clearfix">
<img class="img1" src="https://privatechefanna.co.za/wp-content/uploads/2018/01/IMG_3713.jpg" width="99" height="99">
<h3>ABOUT ME</h3>
<p class="first ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</p>
</div>
</div>
<div class="bottom">
<div class="clearfix">
<img class="img2" src="https://privatechefanna.co.za/wp-content/uploads/2018/01/IMG_3713.jpg" width="99" height="99">
<h3>WHAT I DO</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</p></div>
</div>
CSS:
.drop {
width: 30% !important;
border: none;
padding: 0%;
}
.top {
vertical-align: top;
padding: 2%;
}
.bottom {
vertical-align: bottom;
padding: 2%;
}
.clearfix {
overflow: auto;
}
.img2 {
float: right;
margin-left: 15px;
}
.img1{
float: left;
margin-right: 15px;
}