I am trying to build a cinema booking form. I have created the form and enclosed each form in a div.
I would like to form to stretch up and fill the space under the navbar, but my flexbox does not seem to work.
Is it possible to use flexbox for a form? I would like the form to look like the image below. Alternatively, you can refer to the sample website.
html {
background-color: white;
}
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
max-width: 1020px;
margin: auto;
}
/* nav bar design */
nav {
width: 100%;
background-color: rgb(230, 23, 57);
margin: auto;
display: flex;
justify-content: space-evenly;
}
nav ul li {
display: inline-block;
list-style: none;
position: relative;
}
nav ul li a {
display: flex;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
padding: 7px 20px;
text-decoration: none;
color: white;
}
nav ul li a:hover {
color: black;
}
nav ul li ul {
display: none;
position: absolute;
background-color: rgb(230, 23, 57);
padding: 10px;
border-radius: 0px 0px 4px 4px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 145px;
border-radius: 4px;
}
nav ul li ul li a {
padding: 5px;
}
nav ul li ul li a:hover {
color: black;
}
/* form design */
.flex-container {
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}<header>
<!-- Header -->
<h1>Welcome to Carnival Cinema!</h1>
<!-- Navigation Bar -->
<nav>
<ul>
<li><a href="#">Movies</a>
<ul>
<li><a href="#">Now Showing</a></li>
<li><a href="#">Coming Soon</a></li>
</ul>
</li>
<li><a href="#">Promotions</a></li>
<li><a href="#">Corporations</a>
<ul>
<li><a href="#">Events</a></li>
<li><a href="#">Advertisement</a></li>
<li><a href="#">Vouchers</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<!-- Form to book movie -->
<div class="flex-container">
<form action="" method="post">
<div class="container1">
<select id="movie">
<option value="">Select Movie</option>
<option value="m1">Three Idiots</option>
<option value="m2">Dangal</option>
<option value="m3">PK</option>
</select>
</div>
<div class="container2">
<select id="cinema">
<option value="">Select Cinema</option>
<option value="c1">Carnival Cinema Golden Mile Center</option>
<option value="c2">Carnival S11 Dormitory</option>
</select>
</div>
<div class="container3">
<select id="date">
<option value="">Select Date</option>
<option value="d1">07-07-2021</option>
<option value="d1">08-07-2021</option>
<option value="d1">09-07-2021</option>
</select>
</div>
<div class="container4">
<select id="time">
<option value="">Select Time</option>
<option value="d1">18:00</option>
<option value="d1">20:00</option>
</select>
</div>
<div>
<input type="submit" value="Book Now">
</div>
</form>
</div>
</header>