-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfloat-overflow.html
58 lines (56 loc) · 9.72 KB
/
float-overflow.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<html>
<head>
<title>Sample webpage</title>
<style>
body{
margin-left:100px;
margin-right:100px;
min-width:550px;
}
#section{
border:thin solid red;
background-color:yellow;
overflow:auto;
}
#section1{
width:20%;
float:left;
}
#section2{
width:50%;
float:left;
}
#section3{
width:20%;
float:left;
}
</style>
</head>
<body>
<heading>
<h1>Amirtharaj Developer</h1>
<h3>Technology in your mother tonque</h3>
</heading>
<div id="section">
<div id="section1">
<h2>Welcome to 2 column layout</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus ducimus veniam dolor quo numquam unde. Earum odio ullam sapiente possimus repellendus a et fuga illo. Odio magnam debitis, laudantium optio eos dolor! Dolore, culpa id eum sapiente aspernatur reprehenderit repudiandae in quis animi molestias, quae fugiat maxime ea aliquid? Laudantium officia nemo rerum asperiores quaerat dicta quod magnam, odit iure natus aliquid esse fugiat placeat explicabo non labore porro ipsam! Sunt veniam quod blanditiis ex commodi quia amet modi cumque cum minima quasi, fuga odio similique culpa obcaecati eligendi pariatur officiis temporibus, ipsam id qui aliquam ab? Rem aperiam assumenda dignissimos delectus ab soluta, mollitia doloribus vero culpa sed quos exercitationem corporis, nihil enim iusto minus consequuntur molestias ducimus, iste voluptas omnis. A repudiandae quaerat, nostrum quo possimus corporis obcaecati blanditiis nisi numquam animi cupiditate nesciunt deserunt ex voluptatibus, itaque accusantium deleniti sequi rerum ratione corrupti eos illum magnam voluptate totam! Vel, earum. Doloremque consequatur necessitatibus, commodi tempora ratione veniam dolore ea eius id veritatis est velit reprehenderit itaque a facilis impedit, natus quas, ex esse repellendus hic. Consectetur qui iusto blanditiis doloribus dolor ullam eius, cupiditate velit sed eos accusantium nobis, quos suscipit ipsum veritatis porro repellendus molestias? Provident quae unde excepturi odio maxime consectetur nihil, id consequuntur praesentium aspernatur non accusantium iure ea vel earum debitis architecto suscipit odit laboriosam eligendi error, ipsum doloribus, repellendus vitae? Eius recusandae voluptates veritatis mollitia illo quidem adipisci voluptatem rem eos pariatur, dolorem, facilis delectus dignissimos reprehenderit. Quos cupiditate vitae animi, accusantium velit dignissimos quam, suscipit aut harum, est obcaecati beatae? Tempore harum, ea corrupti culpa quod quisquam quibusdam quaerat accusamus neque nisi saepe repellendus magni! Aperiam, dolor. Sed distinctio error fugiat neque, dolorum quos quisquam ex modi delectus nesciunt voluptatum iste, debitis ab fuga a ut. Eligendi aspernatur voluptates nisi nostrum ipsa deserunt, est itaque? Temporibus modi obcaecati debitis maiores magni ex esse, dolorem consequatur recusandae ab quia sunt itaque nulla ratione accusantium. Aliquid error, incidunt reprehenderit voluptatum neque delectus voluptate voluptatibus, minima sequi beatae necessitatibus! Accusantium impedit quidem reiciendis commodi, quia voluptate nemo ab! Hic, in cupiditate? Iusto officiis rem, incidunt quidem eligendi explicabo saepe facere pariatur suscipit expedita reprehenderit voluptate illum iste perspiciatis, amet similique veritatis debitis sint molestiae et natus inventore? Exercitationem molestias aut amet soluta quos voluptates ipsum velit non id, nulla incidunt maiores eveniet nesciunt consequatur, cum nemo culpa consequuntur. Maxime, sint numquam? Repudiandae quas fugiat ex odit, eaque provident culpa? Alias, dignissimos perspiciatis necessitatibus consequuntur dolorum dolor in commodi odio possimus aspernatur, aliquam delectus inventore placeat, atque quaerat voluptatem reiciendis? Porro quod commodi amet accusantium sit voluptate, deserunt maxime non tempore, aliquid veritatis aliquam dolorem ea iusto, ipsum similique illo nisi corrupti? Blanditiis fugiat laboriosam expedita. Repellat deserunt molestias pariatur aliquid animi itaque! Voluptatibus aperiam accusamus provident blanditiis minus doloribus, excepturi consequuntur minima cum ullam voluptate, rem voluptas eos, possimus nulla architecto nesciunt. Repellendus id ab laborum, explicabo numquam sit neque fugiat modi pariatur architecto ex sint expedita quaerat debitis, ipsum amet nobis est. Corrupti.</p>
</div>
<div id="section2">
<h2>Welcome to main</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus ducimus veniam dolor quo numquam unde. Earum odio ullam sapiente possimus repellendus a et fuga illo. Odio magnam debitis, laudantium optio eos dolor! Dolore, culpa id eum sapiente aspernatur reprehenderit repudiandae in quis animi molestias, quae fugiat maxime ea aliquid? Laudantium officia nemo rerum asperiores quaerat dicta quod magnam, odit iure natus aliquid esse fugiat placeat explicabo non labore porro ipsam! Sunt veniam quod blanditiis ex commodi quia amet modi cumque cum minima quasi, fuga odio similique culpa obcaecati eligendi pariatur officiis temporibus, ipsam id qui aliquam ab? Rem aperiam assumenda dignissimos delectus ab soluta, mollitia doloribus vero culpa sed quos exercitationem corporis, nihil enim iusto minus consequuntur molestias ducimus, iste voluptas omnis. A repudiandae quaerat, nostrum quo possimus corporis obcaecati blanditiis nisi numquam animi cupiditate nesciunt deserunt ex voluptatibus, itaque accusantium deleniti sequi rerum ratione corrupti eos illum magnam voluptate totam! Vel, earum. Doloremque consequatur necessitatibus, commodi tempora ratione veniam dolore ea eius id veritatis est velit reprehenderit itaque a facilis impedit, natus quas, ex esse repellendus hic. Consectetur qui iusto blanditiis doloribus dolor ullam eius, cupiditate velit sed eos accusantium nobis, quos suscipit ipsum veritatis porro repellendus molestias? Provident quae unde excepturi odio maxime consectetur nihil, id consequuntur praesentium aspernatur non accusantium iure ea vel earum debitis architecto suscipit odit laboriosam eligendi error, ipsum doloribus, repellendus vitae? Eius recusandae voluptates veritatis mollitia illo quidem adipisci voluptatem rem eos pariatur, dolorem, facilis delectus dignissimos reprehenderit. Quos cupiditate vitae animi, accusantium velit dignissimos quam, suscipit aut harum, est obcaecati beatae? Tempore harum, ea corrupti culpa quod quisquam quibusdam quaerat accusamus neque nisi saepe repellendus magni! Aperiam, dolor. Sed distinctio error fugiat neque, dolorum quos quisquam ex modi delectus nesciunt voluptatum iste, debitis ab fuga a ut. Eligendi aspernatur voluptates nisi nostrum ipsa deserunt, est itaque? Temporibus modi obcaecati debitis maiores magni ex esse, dolorem consequatur recusandae ab quia sunt itaque nulla ratione accusantium. Aliquid error, incidunt reprehenderit voluptatum neque delectus voluptate voluptatibus, minima sequi beatae necessitatibus! Accusantium impedit quidem reiciendis commodi, quia voluptate nemo ab! Hic, in cupiditate? Iusto officiis rem, incidunt quidem eligendi explicabo saepe facere pariatur suscipit expedita reprehenderit voluptate illum iste perspiciatis, amet similique veritatis debitis sint molestiae et natus inventore? Exercitationem molestias aut amet soluta quos voluptates ipsum velit non id, nulla incidunt maiores eveniet nesciunt consequatur, cum nemo culpa consequuntur. Maxime, sint numquam? Repudiandae quas fugiat ex odit, eaque provident culpa? Alias, dignissimos perspiciatis necessitatibus consequuntur dolorum dolor in commodi odio possimus aspernatur, aliquam delectus inventore placeat, atque quaerat voluptatem reiciendis? Porro quod commodi amet accusantium sit voluptate, deserunt maxime non tempore, aliquid veritatis aliquam dolorem ea iusto, ipsum similique illo nisi corrupti? Blanditiis fugiat laboriosam expedita. Repellat deserunt molestias pariatur aliquid animi itaque! Voluptatibus aperiam accusamus provident blanditiis minus doloribus, excepturi consequuntur minima cum ullam voluptate, rem voluptas eos, possimus nulla architecto nesciunt. Repellendus id ab laborum, explicabo numquam sit neque fugiat modi pariatur architecto ex sint expedita quaerat debitis, ipsum amet nobis est. Corrupti.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum vero eveniet magni repellat facilis temporibus mollitia excepturi veniam non culpa. Beatae nobis nisi corporis laborum molestiae dicta tempore, atque possimus. Sunt quasi, nobis explicabo molestiae repellat inventore? Maxime, corrupti. Consequatur unde adipisci omnis praesentium delectus voluptas repellat dolores odio explicabo possimus, dolorum voluptatibus nobis voluptatum beatae eos iure facere placeat. Ullam sunt, quo possimus eaque eos deserunt voluptates porro? Accusantium deserunt ratione dolore dignissimos obcaecati aperiam voluptates nesciunt facere, quae sunt at sapiente nostrum commodi aliquid doloremque quam atque quidem veritatis temporibus. Ducimus nihil aut dolorem aspernatur soluta laborum corrupti.</p>
</div>
<div id="section3">
<h2>Main Navigation</h2>
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" >About</a></li>
<li><a href="#" >Service</a></li>
<li><a href="#" >Gallery</a></li>
<li><a href="#" >Contact</a></li>
</ul>
</div>
</div>
</body>
</html>