I'm a creating the following layout with a sidebar and a flexbox container having 3 boxs with middle one having scrolling.
The problem I'm running into is, when i zoom in, the content goes past the viewable screen and when i zoom out it leaves a white blank screen on the right side.
I'm attaching a video link and the code to help you guys understand, and hopefully help me out here.
https://www.awesomescreenshot.com/video/7839859?key=b61f0db322aecd2c43d5f1749178dcf1
* {
margin: 0;
padding: 0;
}
html,
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: white;
}
.sidebar {
width: 12%;
height: -webkit-fill-available;
position: fixed;
top: 0;
left: 0;
background-color: black;
overflow-y: scroll;
}
.container {
position: fixed;
left: 12%;
height: 100%;
width: 100%;
}
.navbar {
background-color: grey;
}
.navbar h2 {
text-align: center;
}
.fluid-container {
background-color: rgb(193, 224, 236);
height: 100%;
display: flex;
width: 100%;
}
.box {
width: 100%;
background-color: black;
border: 1px solid red;
}
.item {
width: 220px;
height: 100%;
border: 1px solid green;
margin: 15px;
background-color: sandybrown;
}
#item1 {
height: calc(100vh - 100px);
}
#item2 {
overflow-y: scroll;
height: calc(100vh - 100px);
}
#item3 {
height: calc(100vh - 100px);
}
.items-container {
display: flex;
}<div >
<h2>Title 1</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae, porro reprehenderit iure sed voluptates aperiam delectus excepturi inventore non, esse a repellat dolores obcaecati, libero dolor rerum aspernatur ullam? Nam?Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Error, molestias eveniet! Voluptate vel nam dolorem beatae explicabo neque reprehenderit delectus similique distinctio natus molestias, quae unde ducimus ea dolore illo quis aliquam hic consequatur incidunt quidem animi
fuga eum mollitia? Veritatis temporibus magnam placeat facere deleniti dolorem consequatur praesentium! Voluptatibus cum, ducimus repudiandae, neque distinctio ad laudantium, vitae minus odit repellat praesentium ipsum laborum atque iste quibusdam
perspiciatis assumenda corrupti.</p>
</div>
<div >
<div >
<h2>Header Section</h2>
</div>
<div >
<div id="box1" >
<h2 style="text-align: center; font-size: 2rem; margin-top: 5px;">Tri Column Title</h2>
<div >
<div id="item1" >
<h2>Title 1</h2>
</div>
<div id="item2" >
<h2>Title 2</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem deleniti, consequuntur officiis harum, fugiat debitis dolorem reiciendis odit qui illum deserunt veniam quaerat pariatur voluptatem et earum, numquam quidem in corporis incidunt aliquam
quo sunt nulla culpa. Non architecto, assumenda libero error qui nulla dicta aut sunt et, corporis nam facere nobis. Fugit excepturi sit aliquid totam corporis, iure et illo qui ipsum quo? Nam voluptates ex similique doloribus itaque minus
est quasi deleniti eum aut explicabo necessitatibus porro, odit dignissimos quibusdam error velit dolores sapiente, molestias quod enim laboriosam ipsum ut. Quas error velit, quia aut, quis id facere nihil consequatur ipsum voluptatum inventore
repudiandae ratione impedit deserunt aliquam dicta fugit tenetur enim soluta repellendus itaque quasi porro nostrum. Asperiores et facere itaque corporis? Asperiores animi reprehenderit nesciunt nam quasi voluptas illum ducimus iure placeat
adipisci, esse ut, neque voluptates quia tempore facilis cupiditate. Possimus repellendus, officiis perspiciatis voluptas commodi laudantium iste at ipsum molestiae illo sunt, tempore veritatis magni corrupti rem omnis aperiam! Repellendus
ab quia officia? Similique modi rem facilis inventore, dolorum autem soluta recusandae? Assumenda totam amet in porro aliquid quia soluta asperiores tempora voluptatem accusantium, voluptates excepturi sit maxime, tenetur reiciendis omnis
error aspernatur enim, nemo ipsa commodi quis. Quaerat delectus laborum quidem molestias, sed consequatur corporis, deleniti perferendis rerum quam et expedita deserunt tempore veniam fugiat commodi! Quae quaerat aut, corporis magnam officiis
explicabo nobis esse laboriosam possimus deleniti laudantium facilis temporibus itaque unde. Saepe, cupiditate quam? Doloremque id nam assumenda alias suscipit illo numquam officia facilis veniam inventore! Neque enim autem esse! Quo, pariatur
explicabo aut earum exercitationem quas voluptatum illum odio debitis nisi odit dolores eum eaque ratione sequi iure eligendi reprehenderit, recusandae alias nulla. Ducimus cum esse ea, et molestias reprehenderit voluptatibus, officiis rem
labore iusto reiciendis vel itaque, quaerat nisi nihil ullam officia? Libero nemo vitae qui illo animi? Doloribus incidunt hic numquam corrupti odit ex molestias, accusamus non recusandae quae animi ipsum tempore? Vel quod officiis velit praesentium
sunt quibusdam temporibus cumque voluptate? Quibusdam recusandae reiciendis ratione corporis, suscipit odit quasi veniam maiores nihil id, cupiditate amet asperiores nostrum aliquid minima sit quisquam distinctio dolor saepe odio iure enim
in qui optio! Autem, labore odio rem unde quisquam earum laudantium beatae, sapiente non, impedit debitis ea! Vero, aperiam molestiae minima dolor harum repudiandae soluta quae ex corrupti blanditiis cupiditate voluptates consequuntur cumque
similique, a adipisci consequatur ipsum fugit eligendi.Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt minima assumenda aperiam veniam et ad magnam necessitatibus praesentium ut, fugit tenetur accusamus dolorem illum eligendi
vero. Qui officia blanditiis sunt totam cum odio tempore aut iste quia animi dolorem ad, consequatur libero voluptatum voluptatibus voluptates ex doloribus maxime magnam minus ipsam at harum quisquam fugiat! Dolorum dolorem itaque vero deserunt
temporibus explicabo animi eum laudantium enim quidem harum quasi dolore exercitationem suscipit, dicta maxime quae esse id, sapiente earum voluptatum natus voluptas dolores! Sit quis at accusantium hic tenetur sapiente ipsa voluptatum eos,
ratione suscipit adipisci eum vel tempora, vero odio unde architecto! Molestiae, expedita quidem totam architecto voluptatum tempora consectetur a fugit atque eius itaque? Nisi quo explicabo architecto, iure natus eligendi. Reiciendis ratione
ipsam, deleniti assumenda iste veritatis molestias temporibus incidunt ab quia facere quod, voluptatem soluta iure nobis natus facilis expedita nostrum. Qui saepe quo quos praesentium velit sed, nemo maiores totam natus aliquam cupiditate
sequi doloribus fugit dignissimos fugiat possimus. Laboriosam voluptatibus, quam eaque expedita adipisci eveniet, quae facere soluta, tempora repudiandae a vitae labore sit suscipit exercitationem numquam. Distinctio fugiat modi, laudantium
corrupti aperiam, eum reiciendis ea, obcaecati assumenda consequuntur magni incidunt esse voluptate. Beatae.</p>
</div>
<div id="item3" >
<h2>Title 3</h2>
</div>
</div>
</div>
<div id="box2" >
<div >
<div id="item1" >
<h2>Title 1</h2>
</div>
<div id="item2" >
<h2>Title 2</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem deleniti, consequuntur officiis harum, fugiat debitis dolorem reiciendis odit qui illum deserunt veniam quaerat pariatur voluptatem et earum, numquam quidem in corporis incidunt aliquam
quo sunt nulla culpa. Non architecto, assumenda libero error qui nulla dicta aut sunt et, corporis nam facere nobis. Fugit excepturi sit aliquid totam corporis, iure et illo qui ipsum quo? Nam voluptates ex similique doloribus itaque minus
est quasi deleniti eum aut explicabo necessitatibus porro, odit dignissimos quibusdam error velit dolores sapiente, molestias quod enim laboriosam ipsum ut. Quas error velit, quia aut, quis id facere nihil consequatur ipsum voluptatum inventore
repudiandae ratione impedit deserunt aliquam dicta fugit tenetur enim soluta repellendus itaque quasi porro nostrum. Asperiores et facere itaque corporis? Asperiores animi reprehenderit nesciunt nam quasi voluptas illum ducimus iure placeat
adipisci, esse ut, neque voluptates quia tempore facilis cupiditate. Possimus repellendus, officiis perspiciatis voluptas commodi laudantium iste at ipsum molestiae illo sunt, tempore veritatis magni corrupti rem omnis aperiam! Repellendus
ab quia officia? Similique modi rem facilis inventore, dolorum autem soluta recusandae? Assumenda totam amet in porro aliquid quia soluta asperiores tempora voluptatem accusantium, voluptates excepturi sit maxime, tenetur reiciendis omnis
error aspernatur enim, nemo ipsa commodi quis. Quaerat delectus laborum quidem molestias, sed consequatur corporis, deleniti perferendis rerum quam et expedita deserunt tempore veniam fugiat commodi! Quae quaerat aut, corporis magnam officiis
explicabo nobis esse laboriosam possimus deleniti laudantium facilis temporibus itaque unde. Saepe, cupiditate quam? Doloremque id nam assumenda alias suscipit illo numquam officia facilis veniam inventore! Neque enim autem esse! Quo, pariatur
explicabo aut earum exercitationem quas voluptatum illum odio debitis nisi odit dolores eum eaque ratione sequi iure eligendi reprehenderit, recusandae alias nulla. Ducimus cum esse ea, et molestias reprehenderit voluptatibus, officiis rem
labore iusto reiciendis vel itaque, quaerat nisi nihil ullam officia? Libero nemo vitae qui illo animi? Doloribus incidunt hic numquam corrupti odit ex molestias, accusamus non recusandae quae animi ipsum tempore? Vel quod officiis velit praesentium
sunt quibusdam temporibus cumque voluptate? Quibusdam recusandae reiciendis ratione corporis, suscipit odit quasi veniam maiores nihil id, cupiditate amet asperiores nostrum aliquid minima sit quisquam distinctio dolor saepe odio iure enim
in qui optio! Autem, labore odio rem unde quisquam earum laudantium beatae, sapiente non, impedit debitis ea! Vero, aperiam molestiae minima dolor harum repudiandae soluta quae ex corrupti blanditiis cupiditate voluptates consequuntur cumque
similique, a adipisci consequatur ipsum fugit eligendi.Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt minima assumenda aperiam veniam et ad magnam necessitatibus praesentium ut, fugit tenetur accusamus dolorem illum eligendi
vero. Qui officia blanditiis sunt totam cum odio tempore aut iste quia animi dolorem ad, consequatur libero voluptatum voluptatibus voluptates ex doloribus maxime magnam minus ipsam at harum quisquam fugiat! Dolorum dolorem itaque vero deserunt
temporibus explicabo animi eum laudantium enim quidem harum quasi dolore exercitationem suscipit, dicta maxime quae esse id, sapiente earum voluptatum natus voluptas dolores! Sit quis at accusantium hic tenetur sapiente ipsa voluptatum eos,
ratione suscipit adipisci eum vel tempora, vero odio unde architecto! Molestiae, expedita quidem totam architecto voluptatum tempora consectetur a fugit atque eius itaque? Nisi quo explicabo architecto, iure natus eligendi. Reiciendis ratione
ipsam, deleniti assumenda iste veritatis molestias temporibus incidunt ab quia facere quod, voluptatem soluta iure nobis natus facilis expedita nostrum. Qui saepe quo quos praesentium velit sed, nemo maiores totam natus aliquam cupiditate
sequi doloribus fugit dignissimos fugiat possimus. Laboriosam voluptatibus, quam eaque expedita adipisci eveniet, quae facere soluta, tempora repudiandae a vitae labore sit suscipit exercitationem numquam. Distinctio fugiat modi, laudantium
corrupti aperiam, eum reiciendis ea, obcaecati assumenda consequuntur magni incidunt esse voluptate. Beatae.</p>
</div>
<div id="item3" >
<h2>Title 3</h2>
</div>
</div>
</div>
</div>
</div>CodePudding user response：
Add this to the top of your html code in the head section
<meta name="viewport" content="width=device-width, initial-scale=1.0">
CodePudding user response：
Add height: 100%; and width: 100%; to your HTML and body. Then specify width: 88%; on your container, because your sidebar is taking up 12%. 88 12=100%.
Finally, and most importantly. You have a fixed width on each item of 220px. This means it will not dynamically grow or shrink when you zoom in or zoom out. Instead use width: 100%;.
* {
margin: 0;
padding: 0;
}
html,
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: white;
width: 100%;
height: 100%;
}
.sidebar {
width: 12%;
height: -webkit-fill-available;
position: fixed;
top: 0;
left: 0;
background-color: black;
overflow-y: scroll;
}
.container {
position: fixed;
left: 12%;
height: 100%;
width: 88%;
}
.navbar {
background-color: grey;
}
.navbar h2 {
text-align: center;
}
.fluid-container {
background-color: rgb(193, 224, 236);
height: 100%;
display: flex;
width: 100%;
}
.box {
width: 100%;
background-color: black;
border: 1px solid red;
}
.item {
width: 100%;
height: 100%;
border: 1px solid green;
margin: 15px;
background-color: sandybrown;
}
#item1 {
height: calc(100vh - 100px);
}
#item2 {
overflow-y: scroll;
height: calc(100vh - 100px);
}
#item3 {
height: calc(100vh - 100px);
}
.items-container {
display: flex;
}<div >
<h2>Title 1</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae, porro reprehenderit iure sed voluptates aperiam delectus excepturi inventore non, esse a repellat dolores obcaecati, libero dolor rerum aspernatur ullam? Nam?Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Error, molestias eveniet! Voluptate vel nam dolorem beatae explicabo neque reprehenderit delectus similique distinctio natus molestias, quae unde ducimus ea dolore illo quis aliquam hic consequatur incidunt quidem animi
fuga eum mollitia? Veritatis temporibus magnam placeat facere deleniti dolorem consequatur praesentium! Voluptatibus cum, ducimus repudiandae, neque distinctio ad laudantium, vitae minus odit repellat praesentium ipsum laborum atque iste quibusdam
perspiciatis assumenda corrupti.</p>
</div>
<div >
<div >
<h2>Header Section</h2>
</div>
<div >
<div id="box1" >
<h2 style="text-align: center; font-size: 2rem; margin-top: 5px;">Tri Column Title</h2>
<div >
<div id="item1" >
<h2>Title 1</h2>
</div>
<div id="item2" >
<h2>Title 2</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem deleniti, consequuntur officiis harum, fugiat debitis dolorem reiciendis odit qui illum deserunt veniam quaerat pariatur voluptatem et earum, numquam quidem in corporis incidunt aliquam
quo sunt nulla culpa. Non architecto, assumenda libero error qui nulla dicta aut sunt et, corporis nam facere nobis. Fugit excepturi sit aliquid totam corporis, iure et illo qui ipsum quo? Nam voluptates ex similique doloribus itaque minus
est quasi deleniti eum aut explicabo necessitatibus porro, odit dignissimos quibusdam error velit dolores sapiente, molestias quod enim laboriosam ipsum ut. Quas error velit, quia aut, quis id facere nihil consequatur ipsum voluptatum inventore
repudiandae ratione impedit deserunt aliquam dicta fugit tenetur enim soluta repellendus itaque quasi porro nostrum. Asperiores et facere itaque corporis? Asperiores animi reprehenderit nesciunt nam quasi voluptas illum ducimus iure placeat
adipisci, esse ut, neque voluptates quia tempore facilis cupiditate. Possimus repellendus, officiis perspiciatis voluptas commodi laudantium iste at ipsum molestiae illo sunt, tempore veritatis magni corrupti rem omnis aperiam! Repellendus
ab quia officia? Similique modi rem facilis inventore, dolorum autem soluta recusandae? Assumenda totam amet in porro aliquid quia soluta asperiores tempora voluptatem accusantium, voluptates excepturi sit maxime, tenetur reiciendis omnis
error aspernatur enim, nemo ipsa commodi quis. Quaerat delectus laborum quidem molestias, sed consequatur corporis, deleniti perferendis rerum quam et expedita deserunt tempore veniam fugiat commodi! Quae quaerat aut, corporis magnam officiis
explicabo nobis esse laboriosam possimus deleniti laudantium facilis temporibus itaque unde. Saepe, cupiditate quam? Doloremque id nam assumenda alias suscipit illo numquam officia facilis veniam inventore! Neque enim autem esse! Quo, pariatur
explicabo aut earum exercitationem quas voluptatum illum odio debitis nisi odit dolores eum eaque ratione sequi iure eligendi reprehenderit, recusandae alias nulla. Ducimus cum esse ea, et molestias reprehenderit voluptatibus, officiis rem
labore iusto reiciendis vel itaque, quaerat nisi nihil ullam officia? Libero nemo vitae qui illo animi? Doloribus incidunt hic numquam corrupti odit ex molestias, accusamus non recusandae quae animi ipsum tempore? Vel quod officiis velit praesentium
sunt quibusdam temporibus cumque voluptate? Quibusdam recusandae reiciendis ratione corporis, suscipit odit quasi veniam maiores nihil id, cupiditate amet asperiores nostrum aliquid minima sit quisquam distinctio dolor saepe odio iure enim
in qui optio! Autem, labore odio rem unde quisquam earum laudantium beatae, sapiente non, impedit debitis ea! Vero, aperiam molestiae minima dolor harum repudiandae soluta quae ex corrupti blanditiis cupiditate voluptates consequuntur cumque
similique, a adipisci consequatur ipsum fugit eligendi.Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt minima assumenda aperiam veniam et ad magnam necessitatibus praesentium ut, fugit tenetur accusamus dolorem illum eligendi
vero. Qui officia blanditiis sunt totam cum odio tempore aut iste quia animi dolorem ad, consequatur libero voluptatum voluptatibus voluptates ex doloribus maxime magnam minus ipsam at harum quisquam fugiat! Dolorum dolorem itaque vero deserunt
temporibus explicabo animi eum laudantium enim quidem harum quasi dolore exercitationem suscipit, dicta maxime quae esse id, sapiente earum voluptatum natus voluptas dolores! Sit quis at accusantium hic tenetur sapiente ipsa voluptatum eos,
ratione suscipit adipisci eum vel tempora, vero odio unde architecto! Molestiae, expedita quidem totam architecto voluptatum tempora consectetur a fugit atque eius itaque? Nisi quo explicabo architecto, iure natus eligendi. Reiciendis ratione
ipsam, deleniti assumenda iste veritatis molestias temporibus incidunt ab quia facere quod, voluptatem soluta iure nobis natus facilis expedita nostrum. Qui saepe quo quos praesentium velit sed, nemo maiores totam natus aliquam cupiditate
sequi doloribus fugit dignissimos fugiat possimus. Laboriosam voluptatibus, quam eaque expedita adipisci eveniet, quae facere soluta, tempora repudiandae a vitae labore sit suscipit exercitationem numquam. Distinctio fugiat modi, laudantium
corrupti aperiam, eum reiciendis ea, obcaecati assumenda consequuntur magni incidunt esse voluptate. Beatae.</p>
</div>
<div id="item3" >
<h2>Title 3</h2>
</div>
</div>
</div>
<div id="box2" >
<div >
<div id="item1" >
<h2>Title 1</h2>
</div>
<div id="item2" >
<h2>Title 2</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem deleniti, consequuntur officiis harum, fugiat debitis dolorem reiciendis odit qui illum deserunt veniam quaerat pariatur voluptatem et earum, numquam quidem in corporis incidunt aliquam
quo sunt nulla culpa. Non architecto, assumenda libero error qui nulla dicta aut sunt et, corporis nam facere nobis. Fugit excepturi sit aliquid totam corporis, iure et illo qui ipsum quo? Nam voluptates ex similique doloribus itaque minus
est quasi deleniti eum aut explicabo necessitatibus porro, odit dignissimos quibusdam error velit dolores sapiente, molestias quod enim laboriosam ipsum ut. Quas error velit, quia aut, quis id facere nihil consequatur ipsum voluptatum inventore
repudiandae ratione impedit deserunt aliquam dicta fugit tenetur enim soluta repellendus itaque quasi porro nostrum. Asperiores et facere itaque corporis? Asperiores animi reprehenderit nesciunt nam quasi voluptas illum ducimus iure placeat
adipisci, esse ut, neque voluptates quia tempore facilis cupiditate. Possimus repellendus, officiis perspiciatis voluptas commodi laudantium iste at ipsum molestiae illo sunt, tempore veritatis magni corrupti rem omnis aperiam! Repellendus
ab quia officia? Similique modi rem facilis inventore, dolorum autem soluta recusandae? Assumenda totam amet in porro aliquid quia soluta asperiores tempora voluptatem accusantium, voluptates excepturi sit maxime, tenetur reiciendis omnis
error aspernatur enim, nemo ipsa commodi quis. Quaerat delectus laborum quidem molestias, sed consequatur corporis, deleniti perferendis rerum quam et expedita deserunt tempore veniam fugiat commodi! Quae quaerat aut, corporis magnam officiis
explicabo nobis esse laboriosam possimus deleniti laudantium facilis temporibus itaque unde. Saepe, cupiditate quam? Doloremque id nam assumenda alias suscipit illo numquam officia facilis veniam inventore! Neque enim autem esse! Quo, pariatur
explicabo aut earum exercitationem quas voluptatum illum odio debitis nisi odit dolores eum eaque ratione sequi iure eligendi reprehenderit, recusandae alias nulla. Ducimus cum esse ea, et molestias reprehenderit voluptatibus, officiis rem
labore iusto reiciendis vel itaque, quaerat nisi nihil ullam officia? Libero nemo vitae qui illo animi? Doloribus incidunt hic numquam corrupti odit ex molestias, accusamus non recusandae quae animi ipsum tempore? Vel quod officiis velit praesentium
sunt quibusdam temporibus cumque voluptate? Quibusdam recusandae reiciendis ratione corporis, suscipit odit quasi veniam maiores nihil id, cupiditate amet asperiores nostrum aliquid minima sit quisquam distinctio dolor saepe odio iure enim
in qui optio! Autem, labore odio rem unde quisquam earum laudantium beatae, sapiente non, impedit debitis ea! Vero, aperiam molestiae minima dolor harum repudiandae soluta quae ex corrupti blanditiis cupiditate voluptates consequuntur cumque
similique, a adipisci consequatur ipsum fugit eligendi.Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt minima assumenda aperiam veniam et ad magnam necessitatibus praesentium ut, fugit tenetur accusamus dolorem illum eligendi
vero. Qui officia blanditiis sunt totam cum odio tempore aut iste quia animi dolorem ad, consequatur libero voluptatum voluptatibus voluptates ex doloribus maxime magnam minus ipsam at harum quisquam fugiat! Dolorum dolorem itaque vero deserunt
temporibus explicabo animi eum laudantium enim quidem harum quasi dolore exercitationem suscipit, dicta maxime quae esse id, sapiente earum voluptatum natus voluptas dolores! Sit quis at accusantium hic tenetur sapiente ipsa voluptatum eos,
ratione suscipit adipisci eum vel tempora, vero odio unde architecto! Molestiae, expedita quidem totam architecto voluptatum tempora consectetur a fugit atque eius itaque? Nisi quo explicabo architecto, iure natus eligendi. Reiciendis ratione
ipsam, deleniti assumenda iste veritatis molestias temporibus incidunt ab quia facere quod, voluptatem soluta iure nobis natus facilis expedita nostrum. Qui saepe quo quos praesentium velit sed, nemo maiores totam natus aliquam cupiditate
sequi doloribus fugit dignissimos fugiat possimus. Laboriosam voluptatibus, quam eaque expedita adipisci eveniet, quae facere soluta, tempora repudiandae a vitae labore sit suscipit exercitationem numquam. Distinctio fugiat modi, laudantium
corrupti aperiam, eum reiciendis ea, obcaecati assumenda consequuntur magni incidunt esse voluptate. Beatae.</p>
</div>
<div id="item3" >
<h2>Title 3</h2>
</div>
</div>
</div>
</div>
</div>