I would like to scroll on the content div instead of the whole page, how can I do that?
<html>
<head>
</head>
<body>
<div>
<div style="display: flex">
<div style="margin-right: 50px">Sidebar</div>
<div>
<div>Header</div>
<div id="content" style="overflow-x: auto; white-space: nowrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</div>
</div>
</div>
</div>
</body>
</html>
#Searene This is the answer you were looking for with flexbox.
There's two snippets: One, with all the content scrolling and the other with the header being fixed in place.
This is very simple and clean. No fixed widths or css hacks.
<html>
<head>
</head>
<body>
<div>
<div style="display: flex;flex-direction: row;border: solid 10px">
<div style="margin-right: 50px; background:red">Sidebar</div>
<div style="background:blue; overflow-x:auto;">
<div>Header</div>
<div style="white-space: nowrap;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</div>
</div>
</div>
</div>
</body>
</html>
In this snippet the HEADER stays in place and only the content scrolls.
<html>
<head>
</head>
<body>
<div>
<div style="display: flex;flex-direction: row;border: solid 10px">
<div style="margin-right: 50px; background:red">Sidebar</div>
<div style="background:blue; overflow:hidden">
<div>Header stays in place</div>
<div id="content" style="white-space: nowrap; overflow:auto">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</div>
</div>
</div>
</div>
</body>
</html>
I finally gave up flex and used float to resolve this problem.
<html>
<head>
</head>
<body style="margin: 0">
<div style="margin-right: 50px; width: 50px; float: left">Sidebar</div>
<div style="float: left; width: calc(100% - 100px)">
<div>Header</div>
<div id="content" style="overflow-x: auto; white-space: nowrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</div>
</div>
</body>
</html>
Related
This is a very simple question: I have two elements that should be displayed in one row at a specific ratio. Then the same pattern should be repeated in a next row. However, the content of the subsequent row is printed in unused space of the previous row.The problem is obviously the css file.
I guess the example will make it clear:
.row1 {
float: left;
width: 70%;
margin-bottom: 50px;
}
<head>
<link rel="stylesheet" type="text/css" href="syle.css">
</head>
<div>
<div class="paragraph1">
<h1> Paragraph 1 </h1>
<h3> subtitle1 </h3>
<div class="row1">
<p class="row1_col1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="row1_col2">
<p> Just some other text</p>
</div>
</div>
<div class="paragraph1">
<h1> Paragraph 1 </h1>
<h3> subtitle1 </h3>
<p class="row1_col1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="row1_col2">
<p> Just some other text</p>
</div>
</div>
</div>
Any idea?
Here's a less than elegant solution (Full code in link)
https://jsfiddle.net/qk7o8w4t/1/
.paragraph {
display: inline-block;
width: 50%;
}
.right {
float: right;
}
.left {
float:left;
}
I have a standard Bootstrap grid and an image inside a .col which height should be equal to the height of the text block to the right:
.img-fluid-height {
max-height: 100%;
width: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-4 overflow-hidden">
<img class="img-fluid-height float-right" src="https://placehold.it/1920x1280" alt="...">
</div>
<div class="col-8">
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
</div>
</div>
I expected the image to be the height of the .col container which height is equal to the height of the text block to the right. However, it doesn't work like this.
Remove the image from the flow using position:absolute and your text will define the height then you can use height:100% on the image:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-4">
<img class="mh-100 mw-100 position-absolute" src="https://placehold.it/1920x1280" alt="...">
</div>
<div class="col-8">
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
</div>
</div>
I was assuming something else. You can do something like this with background-size.
.background-image {
height: 100%;
background-image: url("https://placehold.it/1920x1280");
background-size: cover;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-4 overflow-hidden">
<div class="background-image"></div>
</div>
<div class="col-8">
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
</div>
</div>
added width:100% Hope this helps. thanks
.img-fluid-height {
max-height: 100%;
width: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-4 overflow-hidden">
<img class="img-fluid-height float-right" src="https://placehold.it/1920x1280" alt="...">
</div>
<div class="col-8">
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
</div>
</div>
I want all of my images to be the same size on my home page. However when I add the photos, some are not the same height. I would like for them to all be the same without stretching but instead by filling and cropping. How do I do this? Thank you!
img {
overflow: hidden;
max-width: 100%;
height: auto;
margin: 0 0 10px 0;
}
<div class="thirds clearfix">
<!-- one-third -->
<div class="one-third mobile-collapse">
<a href="thetrainer.html">
<img src="http://i66.tinypic.com/vnfcro.jpg" width="400px" height="400px">
</a>
<h2>The Trainer</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="button1">
<img src="http://i66.tinypic.com/33kakow.png">
</div>
</div>
<!--/one-third-->
<!-- one-third -->
<div class="one-third one-third-second mobile-collapse">
<a href="lessons.html">
<img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg" width="400px" height="400px">
</a>
<h2>Lessons</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="button2">
<img src="http://i66.tinypic.com/33kakow.png">
</div>
</div>
<!--/one-third-->
<!-- one-third -->
<div class="one-third one-third-last mobile-collapse">
<a href="training.html">
<img src="http://i68.tinypic.com/2rel7rd.jpg" height="400px" width="400px">
</a>
<h2>Training</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="button3">
<img src="http://i66.tinypic.com/33kakow.png">
</div>
</div>
<!--/one-third-->
</div>
<!--/thirds-->
CSS only solution will require you to add put image as background image of that div with background-size: cover style.
So your anchor tag should have these styles:
background-image: url('link-to-image.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
Just note that your anchor tag should have height and width to display image as its background.
Another way is to use the images as the background. Use div instead of img in your HTML and use background-image for the images...As you have multiple images, you have to write inline css for background-image
Setting width and height to the image will stretch your image...
Stack Snippet
.image-wrapper {
height: 400px;
width: 400px;
background-size: cover;
background-position: center center;
}
<div class="thirds clearfix">
<div class="one-third mobile-collapse">
<a href="thetrainer.html">
<div class="image-wrapper" style="background-image:url(http://i66.tinypic.com/vnfcro.jpg)"></div>
</a>
<h2>The Trainer</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="button1">
<img src="http://i66.tinypic.com/33kakow.png">
</div>
</div>
<div class="one-third one-third-second mobile-collapse">
<a href="lessons.html">
<div class="image-wrapper" style="background-image:url(http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg)"></div>
</a>
<h2>Lessons</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="button2">
<img src="http://i66.tinypic.com/33kakow.png">
</div>
</div>
<div class="one-third one-third-last mobile-collapse">
<a href="training.html">
<div class="image-wrapper" style="background-image:url(http://i68.tinypic.com/2rel7rd.jpg)"></div>
</a>
<h2>Training</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="button3">
<img src="http://i66.tinypic.com/33kakow.png">
</div>
</div>
</div>
One option is defining custom width and height for image. For example: define css like this in your css file..
.ImageDefault{
width:100px;
height: 100px;
}
And in image use:
<img src="some path" class="ImageDefault"/>
Working on the container scrolling over the jumbotron however the text in the jumbotron is not hiding underneath the container beneath it on scroll. How do I get 'Main Title Goes Here', 'Subtitle' and the blue box with those elements to go under the container with lorem ipsum text. Tried setting z-index to -1 for the hero-text class but it hides the text and box all together.
https://codepen.io/zepzia/pen/JrwKbN
<div class="jumbotron jumbotron-fluid">
<div class="container">
<div class="row">
<div class="hero-text">
<h1 class="hero-title">Main Title Will</h1>
<h1 class="hero-title">Go Here</h1>
<div class="subtitle">SUBTITLE</div>
<div class="arrow animated bounce">
<img width="40" height="40" alt="" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyDQoJbDE4OS45OTktMTkwYzIwLjE3OC0yMC4xNzgsNTMuMTY0LTE5LjkxMyw3My42NzIsMC41OTVsMCwwYzIwLjUwOCwyMC41MDksMjAuNzcyLDUzLjQ5MiwwLjU5NSw3My42NzFMMjkzLjc1MSw0NTUuODY4eiIvPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTIyMC4yNDksNDU1Ljg2OGMyMC4xOCwyMC4xNzksNTMuMTY0LDE5LjkxMyw3My42NzItMC41OTVsMCwwYzIwLjUwOS0yMC41MDgsMjAuNzc0LTUzLjQ5MywwLjU5Ni03My42NzINCglsLTE5MC0xOTBjLTIwLjE3OC0yMC4xNzgtNTMuMTY0LTE5LjkxMy03My42NzEsMC41OTVsMCwwYy0yMC41MDgsMjAuNTA5LTIwLjc3Miw1My40OTItMC41OTUsNzMuNjcxTDIyMC4yNDksNDU1Ljg2OHoiLz4NCjwvc3ZnPg0K" />
</div>
</div>
</div>
</div>
</div>
<!-- END JUMBOTRON -->
<main>
<!-- MESSAGE -->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="text-box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</div>
</div>
</div>
</div>
</div>
</div>
The structure looks a little confusing, but if you dont want to rebuild the html you can add something like:
main {
background-color: #fff;
position: relative;
z-index: 1;
margin-top: -32px;
padding-top: 32px;
}
i m having an issue with IE 9 related to the browser's zoom function.
In the code below,i have a set of divs (class='box', 200pixels wide)) all floating inside a large parent div(class='scrollarea',5.000 pixels wide).
The visible portion of the page is controlled by the top most div (class='content',400px wide).
When user selects a link a different div is displayed (using anchor tags).
The issue occurs when you have selected the option "Scroll to div 2" and then you try to zoom out the IE browser window (lets say to 70%)
The inside divs are repositioned during the zooming and the initial position is lost.
Please notice that this behaviour only occurs in IE.
I ve tried to set the distances using percentages instead of pixels , again with no result.
Is there a way to fix this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.content
{
background-color: Yellow;
width: 400px;
overflow: scroll;
}
.scrollarea
{
width: 5000px;
}
.box
{
width: 200px;
margin-right: 200px;
background-color: gray;
float: left;
}
</style>
</head>
<body>
Scroll to div 1 Scroll to div 2 <a href="#area3">
Scroll to div 3</a> Scroll to div 4
<br />
<br />
<div class="content">
<div class="scrollarea">
<div id="area1" class="box">
DIV 1
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
<div id="area2" class="box">
DIV 2
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
<div id="area3" class="box">
DIV 3
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
<div id="area4" class="box">
DIV 4
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
</div>
</div>
</body>
</html>