For some reason, there is some extra space around the navigation bar and in it. I have set the margins and padding all to 0px, so there should be no space around it, and I don't know how to remove the extra space in the div. I have tried looking it up, but I haven't been able to find anything that helps, so I hoped that some of you could, Thanks!
* {
margin: auto 0;
padding: 0px;
font-family: 'Source Code Pro', monospace;
}
li {
list-style: none;
padding: 20px;
padding-left: 30px;
cursor: pointer;
}
a {
color: white;
}
a:hover {
color: white;
text-decoration: none;
}
.nav1 {
height: 10fr;
width: auto;
border: 2px solid white;
background: #787878;
border-radius: 15px;
}
.header {
display: flex;
grid-template-rows: repeat(auto);
font-size: 23px;
}
.left {
display: flex;
justify-content: center;
}
.left:hover {
background: #404040;
border-radius: 13px;
}
.right {
margin-left: auto;
}
.right:hover {
background: #404040;
border-radius: 13px;
}
.disable {
display: flex;
justify-content: center;
color: white;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style1.css">
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:300&display=swap" rel="stylesheet">
</head>
<body>
<nav class="nav1">
<ul class="header">
<li class="left disable">Home Page</a></li>
<li class="left">Find Support</li>
<li class="left">Want To Offer Support?</li>
<li class="left">Found A Mistake?</li>
<li class="right">Contact Us</li>
</ul>
</nav>
</body>
</html>
In your class nav1 there is a white border. Remove it.
.nav1 {
height: 10fr;
width: auto;
//border: 2px solid white;
background: #787878;
border-radius: 15px;
}
Other solution has written by HanJeaHwan
set margin-bottom: 0 for header class
.header {
display: flex;
grid-template-rows: repeat(auto);
font-size: 23px;
margin-bottom: 0;
}
You can fix the problem by adding the margin-bottom: 0 code inside the ul tag.
as follows
* {
margin: auto 0;
padding: 0px;
font-family: 'Source Code Pro', monospace;
}
li {
list-style: none;
padding: 20px;
padding-left: 30px;
cursor: pointer;
}
a {
color: white;
}
a:hover {
color: white;
text-decoration: none;
}
.nav1 {
height: 10fr;
width: auto;
border: 2px solid white;
background: #787878;
border-radius: 15px;
}
.header {
display: flex;
grid-template-rows: repeat(auto auto auto);
font-size: 23px;
margin-bottom: 0px;
}
.left {
display: flex;
justify-content: center;
}
.left:hover {
background: #404040;
border-radius: 13px;
}
.right {
margin-left: auto;
}
.right:hover {
background: #404040;
border-radius: 13px;
}
.disable {
display: flex;
justify-content: center;
color: white;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style1.css">
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:300&display=swap" rel="stylesheet">
</head>
<body>
<nav class="nav1">
<ul class="header">
<li class="left disable">Home Page</a>
</li>
<li class="left">Find Support</li>
<li class="left">Want To Offer Support?</li>
<li class="left">Found A Mistake?</li>
<li class="right">Contact Us</li>
</ul>
</nav>
</body>
</html>
Related
I don't have an idea of how am I supposed to make the menu show with an animation. I want it to slide in down and back up on toggle. I'm down for any kind of solution.
const toggleButton = document.getElementById('toggleButton');
const naviList = document.getElementById('navi-lista');
toggleButton.addEventListener('click', () => {
naviList.classList.toggle('active');
})
* {
font-family: 'Lato', sans-serif;
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
body {
background-color: #856547;
}
.rodzicnav {
position: fixed;
top: 0;
left: 0;
margin: auto;
width: 100%;
}
.navbar {
background-color: rgb(31, 31, 31);
align-items: center;
color: white;
display: flex;
justify-content: space-around;
font-size: 18px;
}
.primary-icon {
height: 30px;
}
.lista-nav {
list-style-type: none;
}
.lista-nav .elementlisty {
display: inline-block;
padding: 20px;
}
.navbar a {
color: white;
text-decoration: none;
}
.grow {
transition: all .2s ease-in-out;
}
.grow:hover {
transform: scale(1.1);
}
.menu {
display: none;
}
.menu-line {
width: 25px;
height: 3px;
background-color: white;
margin-bottom: 4px;
}
#media all and (min-width: 480px) {
.navbar {
flex-direction: column;
}
.menu {
display: block;
position: absolute;
right: 15px;
top: 15px;
cursor: pointer;
}
.lista-nav .elementlisty {
display: block;
padding: 10px;
border-top: solid 1px white;
}
.lista-nav {
list-style-type: none;
width: 100%;
text-align: center;
padding-top: 15px;
display: none;
}
.logo-kontener {
width: 100%;
}
.primary-icon {
margin-left: 10px;
margin-top: 10px;
}
.active {
display: block;
}
}
<!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">
<!-- FONT -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300&display=swap" rel="stylesheet">
<!-- -->
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js" defer></script>
<script src="script.js" defer></script>
</head>
<body>
<div class="rodzicnav">
<nav class="navbar">
<div class="logo-kontener">
<img class="primary-icon" src="obrazy/logo.png" alt="">
</div>
<ul class="lista-nav" id="navi-lista">
<li class="elementlisty grow">
O nas
</li>
<li class="elementlisty grow">
Realizacje
</li>
<li class="elementlisty grow">
Kontakt
</li>
</ul>
<div class="menu" id="toggleButton">
<div class="menu-line"></div>
<div class="menu-line"></div>
<div class="menu-line"></div>
</div>
</nav>
</div>
</body>
</html>
I tried watching youtube tutorials, look for some anwser at freecodecamp and w3s.
I'm also kind of new to responsive website designs, so I appreciate your help.
You can try to use max-height as property to animate:
#media all and (max-width: 480px) {
.navbar {
position: relative;
padding: 10px 15px;
}
.menu {
display: block;
cursor: pointer;
}
.lista-nav .elementlisty {
display: block;
padding: 10px;
border-top: solid 1px white;
}
.lista-nav {
transition: max-height .3s;
list-style-type: none;
width: 100%;
text-align: center;
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: rgb(31, 31, 31);
max-height: 0;
overflow: hidden;
}
.logo-kontener {
width: 100%;
}
.primary-icon {
margin-left: 10px;
margin-top: 10px;
}
.active {
max-height: 500px;
}
}
When I increase the px of the icon located on the cards (The Gaming Controller and the Question Mark) It will not change the actual size of the icon when I run the code, Is there any other way to increase the size of these icons or a solution to my problem in anyway? Thanks for the help guys!
Here is my code :)
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.shell {
height:65vh;
justify-content: center;
display: flex;
flex-direction: row;
flex-basis: auto;
margin: 5px;
align-items: center; /* Added */
}
.card {
display: inline-block;
width: 200px;
height: 150px;
border: 1px solid #EF9A9A;
border-radius: 4px;
margin: 5px;
text-decoration: none;
}
.card-header {
color: #D32F2F;
text-align: center;
font-size: 24px;
font-weight: 600;
border-bottom: 1px solid #EF9A9A;
background-color: #FFEBEE;
padding: 5px 10px;
}
.card-main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 15px 0;
}
.material-icons {
font-size: 24px;
color: #D32F2F;
margin-bottom: 5px;
}
.main-description {
color: #D32F2F;
font-size: 24px;
text-align: center;
}
.header {
overflow: hidden;
background-color: #FFEBEE;
padding: 20px 10px;
border-bottom: 1px solid #EF9A9A;
border-radius: 4px;
}
.header a {
float: left;
color: #D32F2F;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #dfd5d7;
color: #942626;
}
.header a.active {
background-color: #D32F2F;
color: #FFEBEE;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
</style>
<body>
<!DOCTYPE html>
<head>
<link rel="icon" type="png" href="/images/icon.png"/>
<meta charset="utf-8"/>
<title>Project-LuLo</title>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">
<div class="header">
Project-LuLo
<div class="header-right">
<a class="active" href="#home">Home</a>
Games
Contact
</div>
</div>
<div class="shell">
<a href = "#test"class="card">
<div class="card-header">Games</div>
<div class="card-main">
<i class="material-icons">videogame_asset</i>
<div class="main-description">Web Based Games</div>
</div>
</a>
<a href="#test"class="card">
<div class="card-header">Other</div>
<div class="card-main">
<i class="material-icons">question_mark</i>
<div class="main-description">Cool Random Stuff</div>
</div>
</a>
</div>
A way to fix are adding "!important" to font-size it will work change your icon size, for example:
.material-icons {
font-size: 30px!important;
color: #D32F2F;
margin-bottom: 5px;
}
I'm trying to move the search box down, I already tried adding a margin-top and I also tried adding a padding-top but it won't move. I want it to be positioned vertically in the middle of the blue rectangle. I would also like to change the color of the box and the text to different shades of gray. Help would be much appreciated. Thanks!
header {
position: fixed; /* Helps us position at the top; header no longer takes up space in the flow of the document */
top: 0px;
width: 100%;
padding: 15px;
background-color: #693969;
height: 150px;
margin: 0;
opacity: .9;
}
header {
margin: 0;
font-family: 'DM Sans', sans-serif;
font-weight: 600;
}
.topnav {
overflow: hidden;
background-color: rgb(68, 71, 125);
width: 1260px;
float: right;
}
.topnav input[type=text] {
float: right;
padding: 6px;
border: none;
margin-top: 8px;
margin-right: 16px;
font-size: 17px;
}
.topnav a {
float: right;
color: #391616;
text-align: center;
padding: 20px 40px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: rgb(194, 125, 125);
color: rgb(100, 77, 77);
}
.topnav a.nav {
background-color: none;
color: rgb(120, 42, 42);
}
.search {
margin-top: 16px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="indexx.css">
</head>
<body>
<header>
<div class="topnav">
<a class="nav" href="#home">home</a>
<a class="nav" href="#home">home</a>
<a class="nav" href="#home">home</a>
<a class="nav" href="#home">home</a>
<input class="search" type="text" placeholder="Search...">
</div>
</header>
</body>
</html>
I have added a basic reset which I recommend each time you're creating any HTML/CSS/JS design. There are libraries you can use in the future but for now this will do fine. Here is my solution:
* { / * This is basic browzer reset */
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
position: fixed;
/* Helps us position at the top; header no longer takes up space in the flow of the document */
top: 0px;
width: 100%;
padding: 15px;
background-color: #693969;
height: 150px;
margin: 0;
opacity: .9;
margin: 0;
font-family: 'DM Sans', sans-serif;
font-weight: 600;
}
.topnav {
background-color: rgb(68, 71, 125);
width: 1260px;
float: right;
}
.topnav input {
float: right;
padding: 6px;
border: none;
margin-top: 15px;
margin-right: 16px;
font-size: 17px;
max-width: 100px;
}
.topnav input::placeholder { / * Add the ::placeholder pseudoclass to change color of your placeholder text */
color: #444444;
}
.topnav a {
float: right;
color: #391616;
text-align: center;
padding: 20px 40px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: rgb(194, 125, 125);
color: rgb(100, 77, 77);
}
.topnav a.nav {
background-color: none;
color: rgb(120, 42, 42);
}
.search {
margin-top: 16px;
}
<header>
<div class="topnav">
<a class="nav" href="#home">home</a>
<a class="nav" href="#home">home</a>
<a class="nav" href="#home">home</a>
<a class="nav" href="#home">home</a>
<input class="search" type="text" placeholder="Search...">
</div>
</header>
A few things to mention, you're using a few unnecessary floats, I would suggest reading up on the current modern solutions; Flexbox & CSS Grid. You'll make your life much easier in terms of designing layouts
Flexbox
CSS Grid
update the following css
.topnav {
overflow: hidden;
background-color: rgb(68, 71, 125);
width: 1260px;
float: right;
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: row-reverse;
}
.topnav input[type=text] {
float: right;
padding: 6px;
border: none;
margin-right: 16px;
font-size: 17px;
margin: 0;
}
You can have it, hope it helps
/* header */
.container-fluid{ padding-left: 15px; padding-right: 15px; }
.d-flex{ display: flex; }
.justify-content-end { justify-content: flex-end ; }
.justify-content-between { justify-content: space-between; }
.align-items-center { align-items: center; }
header {width: 100%;height: 130px;position: fixed;left: 0;top: 0;z-index: 9;-webkit-box-shadow: 0px 2px 9px rgb(0 0 0 / 9%);-moz-box-shadow: 0px 2px 9px rgba(0,0,0,0.09);box-shadow: 0px 2px 9px rgb(0 0 0 / 9%);background: #fff; font-family: 'Roboto', sans-serif; }
header .header-inner{ margin-top: 15px; padding-left:15px; padding-right:15px; height: 80px; background-color: #D9DEDF; color: #606A71; font-family: 'Roboto', sans-serif; font-weight: 400; font-style: normal; font-size: 14px; }
header nav { margin-right: 15px; }
header nav ul{ list-style-type: none; padding: 0; margin: 0;}
header nav ul li{ font-size: 14px; line-height: 17px; list-style: none; padding:0 ; margin: 0 1px; color: #131516; background-color: inherit; }
header nav ul li a{ color: #131516; background-color: inherit; padding: 15px; text-decoration: none; }
header nav ul li a:hover{ color: #131516; background-color: #F2F3F4; padding: 15px; }
.form-control{ display: block;width: 100%;padding: 0.375rem 0.75rem;font-size: 1rem;font-weight: 400;line-height: 1.5;color: #212529;background-color: #fff;background-clip: padding-box;border: 1px solid #89979B;-webkit-appearance: none;-moz-appearance: none;appearance: none;border-radius: 0.25rem;transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; }
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital#1&display=swap" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<title>Hello, world!</title>
</head>
<body>
<header>
<div class="container-fluid d-flex justify-content-end">
<div class="header-inner d-flex justify-content-between align-items-center">
<nav>
<ul class="d-flex">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</nav>
<input type="text" class="form-control">
</div>
</div>
</header>
</body>
</html>
Or check in jsfiddle example link :
https://jsfiddle.net/DeveloperSandip/fer3o9nd/3/
I am trying to add a hover effect from Youtube Video
I tried for an hour, changed my code two times; where my original code was this:
* {
font-family: 'Montserrat', sans-serif;
color: white;
margin: 0;
padding: 0;
}
.header {
width: 100%;
background-color: #2C2F33;
border-bottom: 5px #FF9F00 solid;
font-size: 15px;
display: flex;
align-items: center
}
#logo img {
float: left;
margin: 0;
padding: 20px;
width: 187.5px;
height: 63.75px;
background-color: #2C2F33;
}
.navbar {
display: flex;
justify-content: space-between;
margin-left: auto;
}
li {
display: inline;
padding: 0 22.5px 0 22.5px;
}
.navbar,
li,
a {
text-decoration: none;
list-style-type: none;
text-transform: uppercase;
background-color: #2C2F33;
position: relative;
}
.navbar,
li,
a:hover {
color: #FF9F00;
text-decoration: none;
list-style-type: none;
}
#userbalance {
background-color: #23272A;
padding: 10px;
border: 3px #FF9F00 solid;
}
#userbalance {
background-color: #23272A;
}
#balance,
#dsh {
color: #FF9F00;
}
#dosh {
color: #FFFFFF;
}
.body {
background-color: #23272A;
}
footer {
background-color: #23272A;
position: absolute;
text-align: center;
clear: both;
width: 100%;
bottom: 18px;
font-size: 12.5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="./css/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300" rel="stylesheet">
<meta name="viewport" content="width=device-width">
<meta name="author" content="Arszilla">
<title>Website</title>
</head>
<body>
<div class="header">
<div id="logo">
<img src="./img/logo.png"></img>
</div>
<div class="navbar">
<div id="leftnavbar">
<ul>
<li id="userbalance"><span id="balance">Balance:</span> <span id="dosh">1.00000000</span> <span id="dsh">DSH</span></li>
</ul>
</div>
<div id="rightnavbar">
<ul>
<li>Button 1</li>
<li>Button 2</li>
<li>Button 3</li>
<li>Button 4</li>
</ul>
</div>
</div>
</div>
</body>
</html>
I removed the <div class="header"> etc and made it all <header> and such (Basically got rid of div)
I followed the video and until 14 minute mark it was okay, I understood what he was doing. After that stuff went downhill.
I added these to my code:
.navbar,
li
{
position: absolute;
display: inline-block;
}
and
.navbar,
li
a::before
{
content: '';
display: block;
height: 5px;
width: 100%;
background-color: red;
position: absolute;
}
and got this as a result:
Result
I am not sure how can I fix this as I am not that experienced. Would someone mind helping me? I am not sure if I should remake the site from scratch and just use <header>, <nav> etc instead of using divs and labeling 'similar' classes to them (class="header" etc)
* {
font-family: 'Montserrat', sans-serif;
color: white;
margin: 0;
padding: 0;
}
.header {
width: 100%;
background-color: #2C2F33;
border-bottom: 5px #FF9F00 solid;
font-size: 15px;
display: flex;
align-items: center
}
#logo img {
float: left;
margin: 0;
padding: 20px;
width: 187.5px;
height: 63.75px;
background-color: #2C2F33;
}
.navbar {
display: flex;
justify-content: space-between;
margin-left: auto;
}
.navbar,
li,
a {
text-decoration: none;
list-style-type: none;
text-transform: uppercase;
background-color: #2C2F33;
position: relative;
}
ul li {
padding: 9px 22.5px 11px 22.5px;
float:left;
border: 3px solid transparent
}
ul li:hover {
border: 3px #FF9F00 solid;
}
#userbalance {
background-color: #23272A;
padding: 10px;
border: 3px #FF9F00 solid;
}
#userbalance {
background-color: #23272A;
}
#balance,
#dsh {
color: #FF9F00;
}
#dosh {
color: #FFFFFF;
}
.body {
background-color: #23272A;
}
footer {
background-color: #23272A;
position: absolute;
text-align: center;
clear: both;
width: 100%;
bottom: 18px;
font-size: 12.5px;
}
<html>
<head>
<meta charset="utf-8">
<link href="./css/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300" rel="stylesheet">
<meta name="viewport" content="width=device-width">
<meta name="author" content="Arszilla">
<title>Website</title>
</head>
<body>
<div class="header">
<div id="logo">
<img src="./img/logo.png">
</div>
<div class="navbar">
<div id="leftnavbar">
<ul>
<li id="userbalance"><span id="balance">Balance:</span> <span id="dosh">1.00000000</span> <span id="dsh">DSH</span></li>
</ul>
</div>
<div id="rightnavbar">
<ul>
<li>Button 1</li>
<li>Button 2</li>
<li>Button 3</li>
<li>Button 4</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Use this CSS code and check your hover effect
ul li {
padding: 9px 22.5px 11px 22.5px;
float:left;
border: 3px solid transparent
}
ul li:hover {
border: 3px #FF9F00 solid;
}
I am trying to create a popover class of respective sections, but it is not aligning as symmetrically as desired.
I want it to look like this: https://www.screencast.com/t/DrbkBj36M
Here is my CSS/HTML. Help would be much appreciated.
.filters {
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
text-align: right;
min-height: 70px;
max-height: 70px;
width: 100%;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 10px;
padding-right: 30px;
}
.locations {
border-right: #DDDDDD solid 1px;
}
.locations, .amenities {
height: 100%;
padding-left: 30px;
flex-grow: 1;
text-align: left;
}
h3 {
font-weight: 600;
line-height: .6;
}
h4 {
font-weight: 400;
font-size: 14px;
line-height: .6;
}
button {
border:none;
border-radius: 4px;
width: 20%;
height: 48px;
font-size: 18px;
background-color: #FF5A5F;
color: white;
margin: 0 30px 0 auto;
}
button:hover {
opacity: 0.9;
}
.popover {
position: absolute;
display: none;
width: inherit;
font-size: 16px;
background-color:#FAFAFA;
border: #DDDDDD 1px solid;
border-radius: 4px;
padding: 0 30px 30px 30px;
margin: 0;
}
.locations:hover .popover {
display: block;
}
.amenities:hover .popover {
display: block;
padding-top: 30px;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="4-common.css" media="all">
<link rel="stylesheet" type="text/css" href="6-filters.css" media="all">
<link rel="icon" type="image/x-icon" href="images/favicon.ico" sizes="16x16">
</head>
<body>
<header>
</header>
<div class="container">
<section class="filters">
<div class="locations">
<h3>States</h3>
<h4>California, New York...</h4>
<ul class="popover">
<h2>California</h2>
<li>Berkeley</li>
<li>Los Angeles</li>
<li>San Francisco</li>
<h2>New York</h2>
<li>New York</li>
</ul>
</div>
<div class="amenities">
<h3>Amenities</h3>
<h4>Internet, kitchen...</h4>
<ul class="popover">
<h2>Amenities</h2>
<li>Fiber internets</li>
<li>Big stove</li>
<li>Cryogenic chamber</li>
</ul>
</div>
<button>Search</button>
</section>
</div>
</body>
</html>
Eh.. is this what you want?
.filters {
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
text-align: right;
height: 70px;
width: 100%;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding-right: 30px;
}
.locations {
border-right: #DDDDDD solid 1px;
}
.locations, .amenities {
height: 100%;
padding-left: 30px;
flex-grow: 1;
text-align: left;
position: relative;
}
h3 {
font-weight: 600;
line-height: .6;
}
h4 {
font-weight: 400;
font-size: 14px;
line-height: .6;
}
button {
border:none;
border-radius: 4px;
width: 20%;
height: 48px;
font-size: 18px;
background-color: #FF5A5F;
color: white;
margin: 0 30px 0 auto;
}
button:hover {
opacity: 0.9;
}
.popover {
position: absolute;
top: 100%;
right: 0;
bottom: auto;
left: 0;
display: none;
width: inherit;
font-size: 16px;
background-color:#FAFAFA;
border: #DDDDDD 1px solid;
border-radius: 4px;
padding: 0 30px 30px 30px;
margin-top: 1px;
margin-left: -1px;
}
.amenities .popover
{
margin-left: -2px;
}
.locations:hover .popover {
display: block;
}
.amenities:hover .popover {
display: block;
padding-top: 30px;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="4-common.css" media="all">
<link rel="stylesheet" type="text/css" href="6-filters.css" media="all">
<link rel="icon" type="image/x-icon" href="images/favicon.ico" sizes="16x16">
</head>
<body>
<header>
</header>
<div class="container">
<section class="filters">
<div class="locations">
<h3>States</h3>
<h4>California, New York...</h4>
<ul class="popover">
<h2>California</h2>
<li>Berkeley</li>
<li>Los Angeles</li>
<li>San Francisco</li>
<h2>New York</h2>
<li>New York</li>
</ul>
</div>
<div class="amenities">
<h3>Amenities</h3>
<h4>Internet, kitchen...</h4>
<ul class="popover">
<h2>Amenities</h2>
<li>Fiber internets</li>
<li>Big stove</li>
<li>Cryogenic chamber</li>
</ul>
</div>
<button>Search</button>
</section>
</div>
</body>
</html>