Container : relative positioned. Have two child div left and right column having 60% and 30% width of container.
Left child : absolute positioned . Top:0; Left:0; width: 60%;
Right child : absolute positioned . Top:0; right:0; width: 30%;
Footer: Relative positioned.
But footer comes up. Code Given below. Visit the following code LIVE here
can anyone tell me whats wrong in the following code, I think technically all correct.
<style type="text/css">
#container {
position: relative;
margin:0 auto;
width: 1000px;
background: #C63;
padding: 10px;
height:auto;
}
#leftCol {
position: absolute;
top:10px;
left:10px;
background: #e8f6fe;
width: 60%;
}
#rightCol {
position: absolute;
top:10px;
right:10px;
width:30%;
background: #aafed6;
}
.box {
position:relative;
clear:both;
background:#F39;
}
</style>
<div id="container">
<div id="leftCol">
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
</div>
<div id="rightCol">
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
</div>
</div>
<div class="box">
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
</div>
You will have to mention the height of the #container div. Like this
#container {
background: none repeat scroll 0 0 #CC6633;
height: 240px; // mention height
margin: 0 auto;
padding: 10px;
position: relative;
width: 1000px;
}
change margin 0 auto to margin: 0 auto 228px;
Demo: http://jsfiddle.net/KwB5r/
#container {
position: relative;
/*margin:0 auto;*/
margin: 0 auto 228px;
width: 1000px;
background: #C63;
padding: 10px;
height:auto;
}
or set the heigth of you container to 228px for example
You should leave the position: absolute rule from the <div> tags that are inside <div id="container">. And also should add the rule display: inline-block; to the right and left <div> tags:
<style type="text/css">
#container {
position: relative;
margin:0 auto;
width: 1000px;
background: #C63;
padding: 10px;
height:auto;
}
#leftCol {
display: inline-block;
top:10px;
left:10px;
background: #e8f6fe;
width: 60%;
}
#rightCol {
display: inline-block;
top:10px;
right:10px;
width:30%;
background: #aafed6;
}
.box {
position:relative;
clear:both;
background:#F39;
}
</style>
<div id="container">
<div id="leftCol">
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
</div>
<div id="rightCol">
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
</div>
</div>
<div class="box">
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
</div>
Related
I am trying to create a div like the one found on youtube.com on the left side (where one finds all the options like trending, subscribed, etc.) which connects from top to bottom and stays while scrolling.
My Markup -
.navDiv {
/* Need to give the navDiv its dimentions */
/* height: 50px; */
width: 220px;
border-right: 1px solid rgba(41, 41, 41, 1);
height: 500px;
padding-left: 0px;
position: fixed;
top: 0;
bottom: 0;
/* background-color: white; */
}
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="navDiv">
<div class="logo">
<img id="logoImage" src="images/logo.png">
<!-- <img id="logoImage" src="images/logo.png"> -->
</div>
<div class="navBarItems">
<button class="profileItem">My Profile</button>
<button class="exploreItem">Explore</button>
<button class="uploadItem">Upload</button>
<!-- <ul>
<li class="profileItem">My Profile</li>
<li class="exploreItem">Explore</li>
<li class="uploadItem">Upload</li>
</ul> -->
</div>
</div>
</body>
</html>
I think you're looking for something like this:
.navDiv {
position: fixed;
width: 220px;
}
.content {
margin-left: 220px;
}
<div class="navDiv">
<div class="logo">
<img id="logoImage" src="images/logo.png">
</div>
<div class="navBarItems">
<button class="profileItem">My Profile</button>
<button class="exploreItem">Explore</button>
<button class="uploadItem">Upload</button>
</div>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</div>
.navDiv {
position: fixed;
width:200px;
top:0px;
left:0px;
right:0px;
bottom:0px;
background-color:#ccc;
}
.logo{
width:100%;
float:left;
text-align:center;
padding: 5px 0px
}
.navBarItems{
width:100%;
float:left;
}
.profileItem,.exploreItem,.uploadItem{
width:100%;
float:left;
margin:3px 0px;
cursor:pointer;
}
.content {
margin-left: 220px;
}
<div class="navDiv">
<div class="logo">
<img id="logoImage" src="images/logo.png">
</div>
<div class="navBarItems">
<button class="profileItem">My Profile</button>
<button class="exploreItem">Explore</button>
<button class="uploadItem">Upload</button>
</div>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</div>
I want to send my text to the right as the images below , but however when I want to send it. it doesnt work can I fix it? my html looks like this . if someone can help me with this i will appreciate
Here is HTML structure and CSS:
div#mapdiv2 {
width: 512px;
}
div#map {
width: 512px;
}
div#panodiv {
float: left;
width: 50%;
}
div#panodiv2 {
width: 512px;
}
div#mapdiv2 h2,
div#map h2,
div#panodiv2 h2,
div#pano h2 {
font-size: 15px;
}
div#mapdiv2 p,
div#map p,
div#panodiv2 p,
div#pano p {
font-size: 11px;
}
div#pano {
width: 512px;
}
div#mapdiv2 img,
div#map img,
div#panodiv2 img,
div#pano img {
width: 10%;
}
<div class="content_feactures">
<h1>Feacture</h1>
<p>Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula eget dolor Aenean massa Aenean commodo <span>ligula eget dolor Aenean commodo ligula eget dolor ligula eget dolor Aenean commodo ligula eget dolor</span></p>
<div class="wrap_feactures">
<div class="wrap_feactures_content">
<div id="mapdiv">
<div id="mapdiv2">
<img src="img/check.png">
<h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2>
<p>Lorem ipsum dolor sit amet consectetuer adipiscing<span>eget dolor Aenean massas</span></p>
</div>
<div id="map">
<img src="img/check.png">
<h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2>
<p>Lorem ipsum dolor sit amet consectetuer adipiscing<span>eget dolor Aenean massas</span></p>
</div>
</div>
<div id="panodiv">
<div id="panodiv2">
<img src="img/check.png">
<h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2>
<p>Lorem ipsum dolor sit amet consectetuer adipiscing<span>eget dolor Aenean massas</span></p>
</div>
<div id="pano">
<img src="img/check.png">
<h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2>
<p>Lorem ipsum dolor sit amet consectetuer adipiscing<span>eget dolor Aenean massas</span></p>
</div>
</div>
</div>
</div>
</div>
Here is what i try to achieve
Your h2 and p are by default display: block, which means it will take 100% width of their parent.
Easiest solution is to wrap h2 and p in div with a class, and asign flex to their parents:
<div id="pano">
<img src="img/check.png">
<div class="wrapper">
<h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2>
<p>Lorem ipsum dolor sit amet consectetuer adipiscing<span>eget dolor Aenean massas</span></p>
</div>
</div>
then CSS:
#pano {
display: flex;
width: 50%;
justify-content: center;
align-content: center;
text-align: left;
}
#pano img {
width: 100px; //Or what ever you want
}
#pano .wrapper {
flex: 1;
}
Repeat with other divs.
You can add display:inline-block; ti the <img> CSS and also try something like this:
<div id="mapdiv2">
<img src="img/check.png">
<div class="special">
<h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2>
<p>Lorem ipsum dolor sit amet consectetuer adipiscing<span>eget dolor Aenean massas</span></p>
</div>
</div>
and
.special{
width: 80%;
display:inline-block;
}
Play around with the widths and margins until you get the result you want
My advice is to rap the text in a div or give both a class
<div id="map">
<img src="img/check.png">
<div class="text"
<h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2>
<p>Lorem ipsum dolor sit amet consectetuer adipiscing<span>eget dolor Aenean massas</span></p>
</div>
</div>
css
div#map img {
width: 10%;
float: left;
}
div#map .text {
width: 90%; /*or any width*/
float: rigth;
}
Use floats to direct them to where you want them to saty
This should work
I'd like to have a button which responsively stays beside a paragraph, without the paragraph text wrapping around the button.
For example, here is the current code I am using:
<div class="myclass">
Button
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
This produces the following:
[button] Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In vitae turpis porta, lobortis turpis in, pretium erat. Lorem
ipsum dolor sit amet, consectetur adipiscing elit.
What I want, is the following:
[button] Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In vitae turpis porta, lobortis turpis in, pretium erat. Lorem
ipsum dolor sit amet, consectetur adipiscing elit.
I want it to remain this way no matter what the screen resolution is.
How would I accomplish this?
You can use Bootstraps Media Object to do this.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
<div class="media">
<div class="media-left"> Button
</div>
<div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<hr>
<div class="media">
<div class="media-left media-middle"> Button
</div>
<div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<hr>
<div class="media">
<div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="media-right media-middle"> Button
</div>
</div>
<hr>
<div class="media">
<div class="media-left media-middle"> Button
</div>
<div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="media-right media-middle"> Button
</div>
</div>
<hr>
<div class="media">
<div class="media-left media-midle"> Button
</div>
<div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div>
<hr>
Try keeping the button in different div and the paragraph in another one.
You tagged bootstrap so you can put the button and text in separate divs with column width settings. The number after the device width is divided by 12 for the width percentage. You can also add multiple device widths to improve responsiveness.
<div class="row myclass">
<div class="col-xs-4">
Button
</div>
<div class="col-xs-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
http://jsfiddle.net/zsenq6h6/
Ended up just using display: table and display table-cell for this. i.e.:
HTML:
<div class="filters">
<div class="cell">
Button
</div>
<div class="cell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus tempus ante sit amet hendrerit. Nunc vel nunc id nibh rhoncus posuere. Nunc tincidunt nisi nec diam lacinia commodo. Quisque erat nisi, vulputate eget lacinia finibus, aliquet quis est. Vivamus at risus egestas, interdum erat ut, condimentum dui.
</div>
</div>
CSS:
.filters {
display: table;
}
.filters .cell {
display: table-cell;
vertical-align: top;
}
bootstrap is the best way to do this effect. if you don't want to use bootstrap then you can use the following code.
html :
<div class="myclass">
Button
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
css :
a {
width:10%;
display:inline-block;
vertical-align:top;
}
p{
width:70%;
display:inline-block;
margin-top:0 !important;
}
#media screen and (max-width:500px){
a {
margin-right:20px;
}
}
}
http://jsfiddle.net/souraj/d0u61xpg/
media query part is required when the resolution will be below 500px . otherwise there is no need to use it.
I am trying to achieve a layout similar to the attached image. It looks fine and as how I want it when displayed in a browser, but when I test on a mobile/tablet device the spacing of the p tags ends up not correctly displayed- I assume this is due to me using hard coded widths in my span tags and the p tags taking up more than one line.
Is it possible to achieve the attached image layout in a responsive manner? If so how do I go about doing this?
I have tried using % and EM in place of px with similar results.
The HTML that I have written so far is:
<h2>Lorem Ipsum </h2>
<p>
<span style="display:inline-block; width: 50px;"></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.
</p>
<p>
<span style="display:inline-block; width: 100px;"></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.
</p>
</br>
<h4>
<span style="display:inline-block; width: 200px;"></span>
or
</h4>
</br>
<p>
<span style="display:inline-block; width: 50px;"></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat
</p>
<p>
<span style="display:inline-block; width: 100px;"></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.
</p>
</br>
<h2>
<span style="display:inline-block; width: 550px;"></span>
Lorem Ipsum
</h2>
<p>
<span style="display:inline-block; width: 600px;"></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
</p>
<p>
<span style="display:inline-block; width: 663px;"></span>
Lorem Ipsum
</p>
<p>
<span style="display:inline-block; width: 650px;"></span>
Lorem ipsum dolor sit amet
</p>
First of all, you better walk this way to achieve something similar to what you want:
.indent-1 {
margin-left: 2.5%;
}
.indent-2 {
margin-left: 5%;
}
.indent-3 {
margin-left: 7.5%;
}
.indent-4 {
margin-left: 10%;
}
.indent-5 {
margin-left: 12.5%;
}
.indent-6 {
margin-left: 15%;
}
.indent-7 {
margin-left: 17.5%;
}
.indent-8 {
margin-left: 20%;
}
.indent-9 {
margin-left: 22.5%;
}
<h2>Lorem Ipsum </h2>
<p class="indent-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.</p>
<p class="indent-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.</p>
<h4 class="indent-3">or</h4>
<p class="indent-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat</p>
<p class="indent-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.</p>
<h2 class="indent-6">Lorem Ipsum</h2>
<p class="indent-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. ipsum dolor sit amet, consectetur adipiscing elit. Curabitur</p>
<p class="indent-8">Lorem Ipsum</p>
<p class="indent-9">Lorem ipsum dolor sit amet</p>
CodePen using LESS: http://codepen.io/anon/pen/MweYma
JSFiddle using CSS: https://jsfiddle.net/c80p3pyx/1/
If you need to make sure your paragraphs do not wrap, just add
p { white-space: nowrap; }
to your CSS. This way your paragraphs will always stay in one line, but lines that do not fit the screen width will cause the browser to show (or make available at least) a horizontal scrollbar, which in almost all cases you will want to avoid. The only other option on "too-long" paragraphs is to either shorten the text, or to use a smaller font.
I have a structure which cannot be changed due to some reasons.Here is the structure:
<h1>heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consecadipiem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet]consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sitg elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. Se</p>
<div style="width: 200px; height: 200px; background: #f1f1f1">container</div>
I want to get this particular layout using CSS only, ie. no positions, negative margins etc. The HTML elements will remain in same flow - h1, p and div. Is it possible to do this?
This should work for you. The main thing is to put float: left on the left hand div.
<style type="text/css">
#wrapper {
width: 90%;
}
#container {
float: left;
width: 200px;
height: 150px;
background-color: #666;
margin: 0 10px 10px 0;
}
H1 {
font: bold 2em arial;
}
P {
background-color: #ccc;
}
</style>
<div id="wrapper">
<div id="container">#container</div>
<h1>Heading</h1>
<p>
Some text.
</p>
</div>
Example fiddle
Of course you can do that in CSS only! :)
I know this is an old question, but its a fun challenge. The trick is to create a pseudo element before the h1 that floats left to create the space for the container div.
I'm sure there are many other ways to do this...
div {
position:absolute;
top:0;
}
h1::before {
content:'';
float:left;
width:200px;
height:200px;
margin-left:20px;
}
<h1>heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consecadipiem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet]consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sitg elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. Se</p>
<div style="width:200px; height:200px; background:#f1f1f1">container</div>