JuanMichaelOG
Reputation: 1
Converting "float" to "flexbox"
So I'm trying to convert my page that uses float, to use flexbox instead to maintain the same style and look. I'm stuck right now in trying to get the picture of the leaves to stay on the right side of the "BOOK NOW" link when its at full width, before the first break point.
I have tried already justify-content, and flex-direction, on the two separate class and ID, but for the life of me cant figure out why it stays inline.
I'm new to this site, so if I need to provide the HTML as well please let me know, but I really could use some help and would appreciate it greatly!
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Exploring Nature :: Home</title>
<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=Noto+Serif:wght@400;700&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="css/main1.css" />
</head>
<body>
<header id="masthead">
<div class="container">
<nav aria-label="Primary website navigation">
<ul>
<li><a href="#">Testimonials</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Tours</a></li>
<li><a href="#">Book Now!</a></li>
</ul>
<a href="#" id="navMenuTrigger"><img src="i/hamburger-menu.png" alt="Navigation menu" width="55" height="39" /></a>
</nav>
<h1>Exploring Nature</h1>
</div>
</header>
<main>
<section id="pageContent" aria-labelledby="contentHdr">
<div class="container">
<div class="halfColumn">
<h2 id="contentHdr">Featured Tour</h2>
<h3>Vermont in the Fall</h3>
<p>Join our experienced tour guides on a 2-day excursion into beautiful Vermont in late September.</p>
<p><strong>Activity Level:</strong> Moderate<br />
<strong>Duration:</strong> Short</p>
<p><a href="#" class="actionBtn">Book Now!</a></p>
</div>
<div class="halfColumn">
<div id="homeFeature"></div>
</div>
</div>
</section>
<section id="tourGallery" aria-labelledby="galleryHdr">
<div class="container">
<h2 id="galleryHdr">Find Your Perfect Outdoor Adventure</h2>
<a href="#" class="tour" id="fallTour">
<span>Fall</span>
</a>
<a href="#" class="tour" id="winterTour">
<span>Winter</span>
</a>
<a href="#" class="tour" id="springTour">
<span>Spring</span>
</a>
<a href="#" class="tour" id="summerTour">
<span>Summer</span>
</a>
<a href="#" class="tour" id="forestTour">
<span>Forest</span>
</a>
<a href="#" class="tour" id="mountainTour">
<span>Mountain</span>
</a>
<a href="#" class="tour" id="islandTour">
<span>Island</span>
</a>
<a href="#" class="tour" id="streamTour">
<span>Stream</span>
</a>
</div>
</section>
</main>
<footer>
All content © Exploring Nature. All Rights Reserved.
</footer>
</body>
</html>
CSS
@media all {
header, footer, nav, aside, article, section {display: block;}
body {margin: 0; padding: 0;}
#masthead h1 {margin: 0; font: 700 34px 'Noto Serif', serif;}
}
@media screen {
body {font: 400 100%/1.4 'Roboto', sans-serif;}
h2 {font: 400 180%/1.4 'Roboto', sans-serif;}
h3 {font: 700 140%/1.4 'Roboto', sans-serif;}
footer {font-size: 90%; text-align: center; background: #2a2a2a; color: #fff; padding: 15px 0;}
.container {width: 1170px; margin: 0 auto;}
.halfColumn {width: 50%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; padding: 0 15px 0 0;}
/* masthead and top of content area */
#masthead {padding: 30px 0; background: #2a2a2a; color: #fff; border-bottom: 1px solid #aaa;}
#masthead nav ul {list-style: none; margin: 0; padding: 0;}
#masthead nav li {float: right; margin-left: 10px;}
#masthead nav ul a, #pageContent .actionBtn {margin-top: 7px; color: #fff; font-weight: 500; text-decoration: none; display: inline-block; padding: 8px 16px; border-radius: 12px;}
#pageContent .actionBtn {background: #ccc; color: #000; padding: 12px 20px; font-size: 120%;}
#masthead nav ul a:hover, #masthead nav ul a:focus, #pageContent .actionBtn:hover, #pageContent .actionBtn:focus {background: #fff; color: #000;}
#pageContent {padding: 30px 0; background: #2a2a2a; color: #fff; overflow: auto;}
#homeFeature {border: 7px solid #6b6b6b; border-radius: 50%; width: 375px; height: 375px; background: url(../i/maple-leaves-background.jpg) no-repeat center; background-size: cover; display: flex; flex-direction: column; justify-content: flex-end; }
#navMenuTrigger {float: right; display: none;}
/* tours */
#galleryHdr {text-align: center;}
#tourGallery {background: #ccc; overflow: auto; padding: 30px 0 50px;}
.tour {position: relative; top: 0; left: 0; float: left; border: 5px solid #fff; box-sizing: border-box; width: 277px; background-size: cover; min-height: 200px; margin: 0 15px 15px 0;}
.tour span {position: absolute; bottom: 0; width: 100%; padding: 5px 0; background: rgba(0,0,0,0.6); color: #fff; text-align: center;}
#fallTour {background: url(../i/fall-tour.jpg) top left no-repeat;}
#winterTour {background: url(../i/winter-tour.jpg) top left no-repeat;}
#springTour {background: url(../i/spring-tour.jpg) center no-repeat;}
#summerTour {background: url(../i/summer-tour.jpg) center no-repeat;}
#forestTour {background: url(../i/forest-tour.jpg) center no-repeat;}
#mountainTour {background: url(../i/mountain-tour.jpg) center no-repeat;}
#islandTour {background: url(../i/island-tour.jpg) bottom center no-repeat;}
#streamTour {background: url(../i/stream-tour.jpg) center no-repeat;}
}
@media screen and (max-width: 1190px) {
.container {width: auto; padding: 0 20px;}
.tour {width: 31%; margin: 0 3% 3% 0;}
#tourGallery > div > a:nth-child(4), #tourGallery > div > a:nth-child(7) {margin-right: 0;}
}
@media screen and (max-width: 800px) {
.tour {width: 45%; margin: 2%;}
#tourGallery > div > a:nth-child(4), #tourGallery > div > a:nth-child(7) {margin-right: 2%;}
.halfColumn, #homeFeature {float: none; width: 100%;}
#homeFeature {width: 300px; height: 300px; margin: 50px auto 20px;}
#navMenuTrigger {display: inline-block;}
header nav li {display: none;}
}
@media screen and (max-width: 500px) {
#masthead h1 {font-size: 25px;}
.tour {float: none; width: 100%; margin: 20px 0; display: block;}
#tourGallery > div > a:nth-child(4), #tourGallery > div > a:nth-child(7) {margin-right: 0;}
}
@media print {
body {font: 400 14pt/1.4 'Noto Serif', serif; color: #000;}
h2 {font: 400 20pt/1.4 'Noto Serif', serif;}
h3 {font: 400 17pt/1.4 'Noto Serif', serif;}
#masthead nav {display: none;}
#masthead h1 {font-size: 24pt;}
footer {font-size: 11pt; margin-top: 30pt;}
#pageContent {margin: 30pt 0;}
.tour {display: block; margin: 10pt 0;}
a {color: #000;}
}
Upvotes: 0
Views: 885
Answers (1)
nhy
Reputation: 179
i suggest add display: flex on #pageContent .container, here my code:
#pageContent .container {
display: flex;
/* if you need it side-by-side */
flex-direction: row;
/* if you need it stack on each other */
/* flex-direction: column; */
}
if you need more document about flex, I suggest read this article A Complete Guide to Flexbox
@media all {
header, footer, nav, aside, article, section {display: block;}
body {margin: 0; padding: 0;}
#masthead h1 {margin: 0; font: 700 34px 'Noto Serif', serif;}
}
@media screen {
body {font: 400 100%/1.4 'Roboto', sans-serif;}
h2 {font: 400 180%/1.4 'Roboto', sans-serif;}
h3 {font: 700 140%/1.4 'Roboto', sans-serif;}
footer {font-size: 90%; text-align: center; background: #2a2a2a; color: #fff; padding: 15px 0;}
.container {width: 1170px; margin: 0 auto;}
.halfColumn {width: 50%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; padding: 0 15px 0 0;}
/* masthead and top of content area */
#masthead {padding: 30px 0; background: #2a2a2a; color: #fff; border-bottom: 1px solid #aaa;}
#masthead nav ul {list-style: none; margin: 0; padding: 0;}
#masthead nav li {float: right; margin-left: 10px;}
#masthead nav ul a, #pageContent .actionBtn {margin-top: 7px; color: #fff; font-weight: 500; text-decoration: none; display: inline-block; padding: 8px 16px; border-radius: 12px;}
#pageContent .actionBtn {background: #ccc; color: #000; padding: 12px 20px; font-size: 120%;}
#masthead nav ul a:hover, #masthead nav ul a:focus, #pageContent .actionBtn:hover, #pageContent .actionBtn:focus {background: #fff; color: #000;}
#pageContent {padding: 30px 0; background: #2a2a2a; color: #fff; overflow: auto;}
#homeFeature {border: 7px solid #6b6b6b; border-radius: 50%; width: 375px; height: 375px; background: url(../i/maple-leaves-background.jpg) no-repeat center; background-size: cover; display: flex; flex-direction: column; justify-content: flex-end; }
#navMenuTrigger {float: right; display: none;}
/* tours */
#galleryHdr {text-align: center;}
#tourGallery {background: #ccc; overflow: auto; padding: 30px 0 50px;}
.tour {position: relative; top: 0; left: 0; float: left; border: 5px solid #fff; box-sizing: border-box; width: 277px; background-size: cover; min-height: 200px; margin: 0 15px 15px 0;}
.tour span {position: absolute; bottom: 0; width: 100%; padding: 5px 0; background: rgba(0,0,0,0.6); color: #fff; text-align: center;}
#fallTour {background: url(../i/fall-tour.jpg) top left no-repeat;}
#winterTour {background: url(../i/winter-tour.jpg) top left no-repeat;}
#springTour {background: url(../i/spring-tour.jpg) center no-repeat;}
#summerTour {background: url(../i/summer-tour.jpg) center no-repeat;}
#forestTour {background: url(../i/forest-tour.jpg) center no-repeat;}
#mountainTour {background: url(../i/mountain-tour.jpg) center no-repeat;}
#islandTour {background: url(../i/island-tour.jpg) bottom center no-repeat;}
#streamTour {background: url(../i/stream-tour.jpg) center no-repeat;}
/* new */
#pageContent .container {
display: flex;
/* if you need it side-by-side */
flex-direction: row;
/* if you need it stack on each other */
/* flex-direction: column; */
}
/* new */
}
@media screen and (max-width: 1190px) {
.container {width: auto; padding: 0 20px;}
.tour {width: 31%; margin: 0 3% 3% 0;}
#tourGallery > div > a:nth-child(4), #tourGallery > div > a:nth-child(7) {margin-right: 0;}
}
@media screen and (max-width: 800px) {
.tour {width: 45%; margin: 2%;}
#tourGallery > div > a:nth-child(4), #tourGallery > div > a:nth-child(7) {margin-right: 2%;}
.halfColumn, #homeFeature {float: none; width: 100%;}
#homeFeature {width: 300px; height: 300px; margin: 50px auto 20px;}
#navMenuTrigger {display: inline-block;}
header nav li {display: none;}
}
@media screen and (max-width: 500px) {
#masthead h1 {font-size: 25px;}
.tour {float: none; width: 100%; margin: 20px 0; display: block;}
#tourGallery > div > a:nth-child(4), #tourGallery > div > a:nth-child(7) {margin-right: 0;}
}
@media print {
body {font: 400 14pt/1.4 'Noto Serif', serif; color: #000;}
h2 {font: 400 20pt/1.4 'Noto Serif', serif;}
h3 {font: 400 17pt/1.4 'Noto Serif', serif;}
#masthead nav {display: none;}
#masthead h1 {font-size: 24pt;}
footer {font-size: 11pt; margin-top: 30pt;}
#pageContent {margin: 30pt 0;}
.tour {display: block; margin: 10pt 0;}
a {color: #000;}
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Exploring Nature :: Home</title>
<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=Noto+Serif:wght@400;700&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="css/main1.css" />
</head>
<body>
<header id="masthead">
<div class="container">
<nav aria-label="Primary website navigation">
<ul>
<li><a href="#">Testimonials</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Tours</a></li>
<li><a href="#">Book Now!</a></li>
</ul>
<a href="#" id="navMenuTrigger"><img src="i/hamburger-menu.png" alt="Navigation menu" width="55" height="39" /></a>
</nav>
<h1>Exploring Nature</h1>
</div>
</header>
<main>
<section id="pageContent" aria-labelledby="contentHdr">
<div class="container">
<div class="halfColumn">
<h2 id="contentHdr">Featured Tour</h2>
<h3>Vermont in the Fall</h3>
<p>Join our experienced tour guides on a 2-day excursion into beautiful Vermont in late September.</p>
<p><strong>Activity Level:</strong> Moderate<br />
<strong>Duration:</strong> Short</p>
<p><a href="#" class="actionBtn">Book Now!</a></p>
</div>
<div class="halfColumn">
<div id="homeFeature"></div>
</div>
</div>
</section>
<section id="tourGallery" aria-labelledby="galleryHdr">
<div class="container">
<h2 id="galleryHdr">Find Your Perfect Outdoor Adventure</h2>
<a href="#" class="tour" id="fallTour">
<span>Fall</span>
</a>
<a href="#" class="tour" id="winterTour">
<span>Winter</span>
</a>
<a href="#" class="tour" id="springTour">
<span>Spring</span>
</a>
<a href="#" class="tour" id="summerTour">
<span>Summer</span>
</a>
<a href="#" class="tour" id="forestTour">
<span>Forest</span>
</a>
<a href="#" class="tour" id="mountainTour">
<span>Mountain</span>
</a>
<a href="#" class="tour" id="islandTour">
<span>Island</span>
</a>
<a href="#" class="tour" id="streamTour">
<span>Stream</span>
</a>
</div>
</section>
</main>
<footer>
All content © Exploring Nature. All Rights Reserved.
</footer>
</body>
</html>Upvotes: 1
Related Questions
- float does not work in a flex container
- How can I implement this using flexbox?
- How do I mimic floats with flexbox?
- Replacing float with flex
- Float right in flexbox
- How to Get Float Behavior Inside Flex Element?
- HTML/CSS: Flexbox not working
- How to get float working, inside a flex div
- Flexbox/Float - 2 1 2 Layout
- Is there any alternative to "Float" for a flex container?