Containers/divs don't line up (html, css)
Question
i'm trying to put the timeline next to the paragraph in the resume section, but it keeps going to the next section/below where it should be. i want the timeline to be on the right side and heading/paragraph to be on the left side. i sort of confused myself a bit with the container, etc. so i would appreciate some help. thank you in advance!
* { box-sizing: border-box; } body.container { margin: 0; padding: 0; font-family: sans-serif; }.container { width: 100%; height: 100vh; scroll-behavior: smooth; overflow-y: scroll; scroll-snap-type: y mandatory; overflow-x: hidden; min-width:100%; }.scroll { width: 100%; height: 100vh; scroll-snap-align: center; position: relative; } /* NAVIGATION BAR */ #main { width: 100%; height: 100%; /*background-image: url(x.jpg);*/ background-size: cover; } nav { position: fixed; width: 100%; height: 80px; background-color: #fff; line-height: 80px; z-index: 99; } nav ul { text-align: center; } nav ul li { list-style-type: none; display: inline-block; transition: 0.8s all; } nav ul li a { text-decoration: none; color: gray; padding: 30px; } nav ul li a:hover { color: #000; text-decoration: none; } /* HOME NAME */.name { font-family: sans-serif; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); text-align: center; } /* SECTIONS */.box { width: 100%; height: 100vh; padding: 70px; display: flex; padding-top: 20%; }.box.imgPro { width: 150px; flex: 0 0 150px; }.box.imgPro img { width: 100%; padding: 10px; border-radius: 50%; }.box.content { padding-left: 20px; }.box.content h2 { margin: 0; padding-left: 0; padding-bottom: 20px; text-align: center; } /* RESUME/TIMELINE */.box-tl { width: 40%; height: 100vh; padding-top: 10% }.box-tl.content-tl h2 { margin: 0; padding-left: 0; padding-bottom: 20px; text-align: center; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; }.tl-container { width: 30%; height: 90vh; padding: 50px 0; margin: 0; left: 70%; position: relative; overflow: hidden; top: 10%; }.tl-container:before { content: ''; position: absolute; top: 0; left: 50%; margin-left: -1px; width: 2px; height: 100%; background: #CCD1D9; z-index: 1 }.timeline-block { width: -webkit-calc(10% + 8px); width: -moz-calc(50% + 8px); width: calc(50% + 8px); display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; justify-content: space-between; clear: both; }.timeline-block-right { float: right; }.timeline-block-left { float: left; direction: rtl }.marker { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #F5F7FA; background: #4FC1E9; margin-top: 10px; z-index: 9999 }.timeline-content { height: 16vh; width: 95%; padding: 0 15px; color: #666 }.timeline-content h3 { margin-top: 5px; margin-bottom: 5px; font-size: 15px; font-weight: 500 }.timeline-content span { font-size: 13px; color: #a4a4a4; }.timeline-content p { font-size: 12px; line-height: 1.5em; word-spacing: 1px; color: #888; } @media screen and (max-width: 768px) {.tl-container:before { left: 8px; width: 2px; }.timeline-block { width: 100%; margin-bottom: 30px; }.timeline-block-right { float: none; }.timeline-block-left { float: none; direction: ltr; } }
<,DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=devide-width. initialpscale=1:0"> <title> TITLE </title> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="style:css"> <.-- link for back to top button --> <link rel="stylesheet" href="https.//use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> </head> <body> <div class="container"> <div id="main" class="scroll"> <nav> <,-- <img src="x.png" width="200" height="80"> for top-left logo --> <ul> <li><a href="#main">Home</a></li><.-- --><li><a href="#about">About</a></li><.-- --><li><a href="#resume">Resume</a></li><.-- --><li><a href="#portfolio">Portfolio</a></li><,-- --><li><a href="#contact">Contact</a></li> </ul> </nav> <h1 class="name">TITLE</a></h1> </div> <section id="about" class="scroll"> <div class="box"> <div class="imgPro"> <img src="pro.jpg" alt="pro-pic"> </div> <div class="content"> <h2>About</h2> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit. Donec ac gravida nibh. Donec et viverra leo. Sed hendrerit blandit lectus, In pretium orci tellus, porta sollicitudin mauris lobortis et. Donec at sollicitudin nisl. Cras congue elit sed dolor interdum auctor. Nunc convallis purus a vestibulum mollis, Suspendisse ac volutpat sem. Nunc in neque mollis. mattis augue tristique. ornare dolor. Morbi imperdiet tincidunt lectus at molestie, Fusce ultricies mattis maximus.</p> </div> </div> </section> <section id="resume" class="scroll"> <div class="box-tl" class="content-tl"> <h2>Resume</h2> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit. Donec ac gravida nibh. Donec et viverra leo. Sed hendrerit blandit lectus, In pretium orci tellus, porta sollicitudin mauris lobortis et. Donec at sollicitudin nisl. Cras congue elit sed dolor interdum auctor. Nunc convallis purus a vestibulum mollis. Suspendisse ac volutpat sem, Nunc in neque mollis. mattis augue tristique. ornare dolor. Morbi imperdiet tincidunt lectus at molestie. Fusce ultricies mattis maximus,</p> </div> <div class="tl-container"> <div class="timeline-block timeline-block-right"> <div class="marker"></div> <div class="timeline-content"> <h3>First Year</h3> <span>Some work experience</span> <p>Lorem</p> </div> </div> <div class="timeline-block timeline-block-left"> <div class="marker"></div> <div class="timeline-content"> <h3>Seconed Year</h3> <span>Some work experience</span> <p>Lorem</p> </div> </div> <div class="timeline-block timeline-block-right"> <div class="marker"></div> <div class="timeline-content"> <h3>Third Year</h3> <span>Some work experience</span> <p>Lorem</p> </div> </div> <div class="timeline-block timeline-block-left"> <div class="marker"></div> <div class="timeline-content"> <h3>Fourth Year</h3> <span>Some work experience</span> <p>Lorem</p> </div> </div> <div class="timeline-block timeline-block-right"> <div class="marker"></div> <div class="timeline-content"> <h3>Fifth Year</h3> <span>Some work experience</span> <p>Lorem</p> </div> </div> </div> </section> <section id="portfolio" class="scroll"> <div class="box"> <div class="imgPro"> <img src="pro.jpg" alt="pro-pic"> </div> <div class="content"> <h2>About</h2> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit. Donec ac gravida nibh. Donec et viverra leo. Sed hendrerit blandit lectus, In pretium orci tellus, porta sollicitudin mauris lobortis et. Donec at sollicitudin nisl. Cras congue elit sed dolor interdum auctor. Nunc convallis purus a vestibulum mollis. Suspendisse ac volutpat sem. Nunc in neque mollis, mattis augue tristique, ornare dolor. Morbi imperdiet tincidunt lectus at molestie. Fusce ultricies mattis maximus.</p> </div> </div> </section> </div> <script src="main.js"></script> </body> </html>
1 answers
solution1
1 ACCPTED 2020-07-29 16:18:17
try either removing the height of .box-tl or making it:
.box-tl {height: 0;}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
DIVs don't line up
CSS: Divs don't line up left and right
HTML CSS - fieldset containers do not line up
My floating Divs don't line up
How come these divs don't line up?
HTML CSS identical tables don't line up
line up divs using css and HTML
CSS - Links don't line up properly
Bootstrap divs don't line up when page is minimized
Why don't the elements line up in this html?
Related Tags