So I have two divs next to each other which have the class .category and they are supposed to be responsive.
<div class="content">
<div class="category">
<img src="images/category1.jpg" alt="" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor.
</p>
</div
<div class="category">
<img src="images/category2.jpg" alt="" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
</p>
</div>
</div>
This is my CSS:
.content {
width: 100%;
background: red;
}
.category {
max-width: 470px;
background: #ffffff;
display: inline-block;
vertical-align: top;
position: relative;
}
When I start resizing the window, the second .category block moves underneath the first .category block. However, I want both the .category blocks to reduce in width and stay next to each other.
Anybody got any suggestions?
First, you have some typographic errors in your HTML Markup (you are missing the > sign on the closing div tag of the first category div).
Second, you should be using percentage widths for responsive elements like this :
FIDDLE
CSS :
.content {
width: 100%;
background: red;
}
.category {
max-width:470px;
width: 50%;
background: #ffffff;
float:left;
vertical-align: top;
position: relative;
}
add float:left; to .category in css and use either % or a css media query
#media(min-width:something;){
.category {
width: something;
}
}
to set the width of the elements.
Related
I have to inline two divs side by side. The thing is, I can't edit HTML and they don't have a container. To make things even more complicated, the first div needs to be wider than the second one. And I have no idea how to do this and make it responsive.
This is what I have so far. But it's not responsive. To make it so, I'd have to edit it with #media and I'm really trying to avoid that. Is there a way I could make this cleaner? A way I could use flex maybe, without a container? And make it responsive too, without having it meshed together on smaller devices?
.one,
.two {
float: left;
}
.one {
width: 66.66%;
}
.two {
width: 33.33%;
}
<div class="one">content goes here</div>
<div class="two">content goes here</div>
EDIT: This is what the outline of my code looks like, with a container. Just to get you guys more information about the issue. Div with a class section-one has 5 items inside, and they need to stay inlined and responsive when the window is resized, so I don't want to mess up the code I currently have because it behaves well on smaller screens.
.container {}
.heading {
text-align: center;
margin-bottom: 35px;
}
.section-one {
text-transform: uppercase;
display: flex;
flex-wrap: wrap;
text-align: center;
justify-content: space-between;
}
.item {
position: relative;
flex-shrink: 0;
margin: 0 auto;
margin-bottom: 15px;
}
.section-left {
float: left;
text-transform: uppercase;
width: 66.66%;
margin-top: 80px;
padding-right: 80px;
}
.section-right {
float: left;
width: 33.33%;
}
<div class="container">
<div class="heading">
<h2>Lorem ipsum dolor</h2>
<p>Morbi posuere mi condimentum dui suscipit vulputate. Donec lectus diam.</p>
</div>
<!--- /.heading -->
<div class="section-one">
<div class="item">Praesent eu elementum.</div>
<div class="item">Praesent eu elementum.</div>
<div class="item">Praesent eu elementum.</div>
<div class="item">Praesent eu elementum.</div>
<div class="item">Praesent eu elementum.</div>
</div>
<!--- /.section-one -->
<div class="section-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sodales est. Nullam cursus id nibh mattis porta. Cras aliquet eros urna, quis imperdiet tortor placerat sed.
</div>
<!--- /.section-left -->
<div class="section-right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sodales est. Nullam cursus id nibh mattis porta. Cras aliquet eros urna, quis imperdiet tortor placerat sed.
</div>
<!--- /.section-right -->
</div>
You could use CSS calc() function along-with display:inline-block instead of float to align both divs responsively without making use of media query.
But as both divs are display as inline-block and when using inline-block it adds white-space around it's block, to remove that I have used font-size:0 in body tag, so on remaining block in your design you have to assign font-size manually or else text won't be visible.
body{
font-size:0;
margin:0;
}
.one{
display:inline-block;
background:pink;
width:calc(100vw - 40vw);
font-size:16px;
}
.two{
display:inline-block;
background:pink;
width:calc(100vw - 60vw);
font-size:16px;
}
<div class="cont">
<div class="one">content goes here</div>
<div class="two">content goes here</div>
</div>
Given the fact you already use Flexbox, I suggest you do it for this too, like this.
If you don't want the container, just drop its markup and move its CSS properties to the body
Fiddle demo
Stack snippet
.container {
display: flex; /* added */
flex-wrap: wrap; /* added */
}
.heading {
flex: 0 0 100%; /* added, behaves like a block */
text-align: center;
margin-bottom: 35px;
}
.section-one {
flex: 0 0 100%; /* added, behaves like a block */
text-transform: uppercase;
display: flex;
flex-wrap: wrap;
text-align: center;
justify-content: space-between;
}
.item {
position: relative;
flex-shrink: 0;
margin: 0 auto;
margin-bottom: 15px;
}
.section-left {
flex: 1 0 66.666%; /* added, behaves like an inline-block but fill when on single line */
min-width: 400px;
text-transform: uppercase;
margin-top: 80px;
padding-right: 80px;
box-sizing: border-box; /* added, make padding be included in set width */
border: 1px dotted gray; /* demo purpose */
}
.section-right {
flex: 1 0 33.333%; /* added, behaves like an inline-block but fill when on single line */
min-width: 200px;
box-sizing: border-box; /* added, make border be included in set width */
border: 1px dotted gray; /* demo purpose */
}
<div class="container">
<div class="heading">
<h2>Lorem ipsum dolor</h2>
<p>Morbi posuere mi condimentum dui suscipit vulputate. Donec lectus diam.</p>
</div>
<!--- /.heading -->
<div class="section-one">
<div class="item">Praesent eu elementum.</div>
<div class="item">Praesent eu elementum.</div>
<div class="item">Praesent eu elementum.</div>
<div class="item">Praesent eu elementum.</div>
<div class="item">Praesent eu elementum.</div>
</div>
<!--- /.section-one -->
<div class="section-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sodales est. Nullam cursus id nibh mattis porta. Cras aliquet eros urna, quis imperdiet tortor placerat sed.
</div>
<!--- /.section-left -->
<div class="section-right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sodales est. Nullam cursus id nibh mattis porta. Cras aliquet eros urna, quis imperdiet tortor placerat sed.
</div>
<!--- /.section-right -->
</div>
I suggest you to use a media query anyway to make your divs on top of each other on small devices, especially if you have text content. The max-width I'm giving to you is just an example
#media screen and (max-width: 480px) {
.one,
.two {
float: none;
width: 100%;
}
}
I would gladly suggest you the flex-box property, but if you don't got a container and can't modify the HTML, this will be complicated.
Here's the link anyway : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
With flexbox, you just have to give the property to your container :
.container {
display: flex;
}
Then you can choose the way you want to sort your elements :
.container {
flex-direction: row;
}
Again this is an example, check the link i gave you for further informations.
You need to reset box-sizing to include padding and border into width calculation.
The CSS box-sizing property is used to alter the default CSS box model used to calculate width and height of the elements.
A media query will help to pile them when boxes become too small.
Media queries are useful when you want to apply CSS styles depending on a device's general type (such as print vs. screen), specific characteristics (such as the width of the browser viewport), or environment (such as ambient light conditions). With the huge variety of internet-connected devices available today, media queries are a vital tool for building websites and apps that are robust enough to work on whatever hardware your users have.
example
.container {}
.heading {
text-align: center;
margin-bottom: 35px;
}
.section-one {
text-transform: uppercase;
display: flex;
flex-wrap: wrap;
text-align: center;
justify-content: space-between;
}
.item {
position: relative;
flex-shrink: 0;
margin: 0 auto;
margin-bottom: 15px;
}
.section-left {
float: left;
text-transform: uppercase;
width: 66.66%;
/*margin-top: 80px; remove */
padding-right: 80px;
}
.section-right {
float: left;
width: 33.33%;
}
/* updates */
.section-left,
.section-right {
box-sizing:border-box;
}
#media all and (max-width : 599px) {
.section-left,
.section-right {
width:100%;
padding:1em;
}
}
/* let's see them */
div {
box-shadow:0 0 0 2px green;
}
<div class="container">
<div class="heading">
<h2>Lorem ipsum dolor</h2>
<p>Morbi posuere mi condimentum dui suscipit vulputate. Donec lectus diam.</p>
</div>
<!--- /.heading -->
<div class="section-one">
<div class="item">Praesent eu elementum.</div>
<div class="item">Praesent eu elementum.</div>
<div class="item">Praesent eu elementum.</div>
<div class="item">Praesent eu elementum.</div>
<div class="item">Praesent eu elementum.</div>
</div>
<!--- /.section-one -->
<div class="section-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sodales est. Nullam cursus id nibh mattis porta. Cras aliquet eros urna, quis imperdiet tortor placerat sed.
</div>
<!--- /.section-left -->
<div class="section-right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sodales est. Nullam cursus id nibh mattis porta. Cras aliquet eros urna, quis imperdiet tortor placerat sed.
</div>
<!--- /.section-right -->
</div>
I need to design the below elements:
1st Parent element - Menu
Child element - popup
2nd parent element - Body
I need to bring popup to the front then body and then menu.
is this possible?
Html
<div class="menu">
<div class="popup">
Test content
</div>
</div>
<div class = "body-content"></div>
CSS
.menu {
z-index: -1;
}
So now my body content will come front ,menu will go back. But now i tried to click popup div. it just behind the body content. I need to bring that front.
Stack layer
1. Popup
2. Bodycontent
3. Menu
Thanks in advance.
Your Question is not that easy to understand without an example, code showcase, or any other example.
But I think you can do what you want to do by using negative z-index.
Edit: I see you have edited your question, but it is still not that easy to know what you mean.
But here is my best guess:
http://codepen.io/Type-Style/pen/rjOzWa
.popup {
/* decoration */
border: 2px dotted;
background: rgba(255,125,0,0.6);
/* place above menu and body-content */
position: relative;
z-index: 1;
top: 30px; /* create overlap for demo */
}
.body-content {
background: rgba(255,0,0,0.6);
position: relative;
z-index: -1;
bottom: 30px; /* create overlap for demo */
}
div {
/* just decoration styles */
width: 350px;
margin: 0 auto;
padding: 10px 0;
}
.menu {
background: rgba(50,50,255,0.6); /* opaque background color for understanding */
}
.popup {
/* smaller for decoration */
width: 300px;
border: 2px dotted;
background: rgba(255,255,0,0.6);
/* place above menu and body-content */
position: relative;
z-index: 2;
top: 25px; /* create overlap for demo */
}
.body-content {
background: rgba(255,0,0,0.6);
position: relative;
z-index: 1;
bottom: 40px; /* create overlap for demo */
}
<div class="menu">
Menu Test Content: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
<div class="popup">
Test content popup. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
</div>
<div class="body-content">
Body-Content and more random Text:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. <br />body-content test-content: malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
</div>
I think what you want is a popup over everything.
I don't understand the need of having the content above the menu.
But this is the way I did it.
Note: the position: relative; is needed in order to make z-index work on the particular element.
By using relative, the dimensions the element occupies still remain.
If you don't want that, you can define
position: absolute;
This makes positioning a little bit trickier, since it is placed to its nearest non-static parent element.
I have the following issue (best illustrated by images):
Medium width (using col-md-3)
Small width (using col-sm-6)
Width between small and medium
The columns resize at 979px-1199px width to show the last image (the bad configuration)...
The other option for me would be creating an intermediary class .. say col-mdsm or something and setting that pixel range for it?
You can change the font size for this element manually:
#media (min-width: 979px and max-width: 1199px) {
.elem-class-name {
font-size: 13px; /*Needs to be adjusted */
}
}
This is not an answer to your specific question, but I hope it will help others to "Step Away from the Grid System" when it hinders the desired result.
If you look at GetBootstrap.com -- the official Bootstrap website -- in the Glyphicon example that is a list and it's not a class that comes with Bootstrap. It's not the grid system. In fact there's a lot of custom CSS on GetBootstrap.com with added classes. If you look at any of the showcase sites, there's plenty of custom CSS and plenty of not using anything to do with Bootstrap. You can hardly find a Bootstrap class in Vogue.com yet it's still part of the showcase sites, go figure.
Anyway, I would roll a custom list, just like GetBootstrap.com did for their Glyphicon list:
DEMO: https://jsbin.com/yumoca/
HTML
<div class="container">
<ul class="audio-list list-inline">
<li>Lorem ipsum dolor sit amet, consectetuer.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Lorem ipsum dolor sit amet, consectetuer.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Lorem ipsum dolor sit amet, consectetuer.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Lorem ipsum dolor sit amet, consectetuer.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Lorem ipsum dolor sit amet, consectetuer.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
</div>
CSS
.audio-list {
text-align: center;
}
.audio-list li {
display: inline-block;
padding: 5px;
white-space:normal;
}
.audio-list li a {
display: block;
border: 1px solid #ddd;
border-radius: 5px;
padding: 10px;
background: #f7f7f7;
text-align:center;
color:inherit;
}
#media (min-width:768px) {
.audio-list {
font-size: 0px;
text-align:left;
}
.audio-list li {
display: inline-block;
width: 50%;
font-size: 14px;
vertical-align: top;
}
}
#media (min-width:992px) {
.audio-list li {
width: 33.33%
}
}
I have three divs. A container div, that contains two child divs inside. The first child div has a fixed width, but height should be determined by the text inside (it's a message box). Right after that div on the same line, should be another div one line high (basically, the time) and it should be located at the bottom of the parent div (like, if the first child div contains say 5 lines, then the second child div must be right after the first child div, at the level of the lowest line of the first child (of the message box))
Basically, I'm trying to recreate this thing:
Notice how the time is right next to the message?
Anyway, for this I figured I needed to make my time div the size of the parent div. How would I go about doing it?
Thanks in advance
So, this would be the HTML
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod </p>
</div>
<div class = "dateandtime">11:37AM</div>
</div>
And CSS:
.yellowmessage { */ Parent div /*
padding:0 2% 0 0;
float:left;
}
.themessage {
font-size:2.5em;
display: inline-block;
border-radius:20px;
padding:3% 0 3% 0;
max-width:90%;
background-color:rgb(246,227,143);
float:left;
}
.dateandtime {
float:left;
}
You can use this, There is an answer here about your question.
I have added time to that. I have done some changes.
Live Demo **http://jsfiddle.net/mek5Z/1348/**
Fiddle
Assuming that this is your HTML structure:
<div class="yellowmessage clear">
<div class="themessage">
<p contenteditable="true">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod</p>
</div>
<div class="dateandtime">11:37AM</div>
</div>
<div class="bluemessage clear">
<div class="themessage">
<p contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare risus vulputate consequat semper. Quisque facilisis facilisis pulvinar. Maecenas aliquam, orci id rhoncus tempus, lacus tellus mattis diam, eget elementum eros dui vel leo.</p>
</div>
<div class="dateandtime">11:49AM</div>
</div>
This could be your CSS
.yellowmessage, .bluemessage {
position: relative;
margin: 5% 2%;
}
.themessage {
font-size:1.85em;
border-radius:20px;
padding: 0 2%;
max-width: 90%;
box-shadow: inset 0 -4px rgba(0, 0, 0, 0.07), inset 0 22px 25px rgba(255, 255, 255, 0.58), 0 3px 11px rgba(0, 0, 0, 0.28);
}
.yellowmessage > .themessage {
float: left;
background-color: #FFF980;
}
.bluemessage > .themessage {
float: right;
background-color: #A7DBD8;
}
.dateandtime {
position: absolute;
bottom: 0;
font-size: 80%;
}
.bluemessage > .dateandtime {
left: 0;
}
.yellowmessage > .dateandtime {
right: 0;
}
My requirement is simple: 2 columns where the right one has a fixed size. Unfortunately I couldn't find a working solution, neither on stackoverflow nor in Google. Each solution described there fails if I implement in my own context. The current solution is:
div.container {
position: fixed;
float: left;
top: 100px;
width: 100%;
clear: both;
}
#content {
margin-right: 265px;
}
#right {
float: right;
width: 225px;
margin-left: -225px;
}
#right, #content {
height: 1%; /* fixed for IE, although doesn't seem to work */
padding: 20px;
}
<div class="container">
<div id="content">
fooburg content
</div>
<div id="right">
test right
</div>
</div>
I get the following with above code:
|----------------------- -------|
| fooburg content | |
|-------------------------------|
| | test right |
|----------------------- -------|
Please advise. Many thanks!
Remove the float on the left column.
At the HTML code, the right column needs to come before the left one.
If the right has a float (and a width), and if the left column doesn't have a width and no float, it will be flexible :)
Also apply an overflow: hidden and some height (can be auto) to the outer div, so that it surrounds both inner divs.
Finally, at the left column, add a width: auto and overflow: hidden, this makes the left column independent from the right one (for example, if you resized the browser window, and the right column touched the left one, without these properties, the left column would run arround the right one, with this properties it remains in its space).
Example HTML:
<div class="container">
<div class="right">
right content fixed width
</div>
<div class="left">
left content flexible width
</div>
</div>
CSS:
.container {
height: auto;
overflow: hidden;
}
.right {
width: 180px;
float: right;
background: #aafed6;
}
.left {
float: none; /* not needed, just for clarification */
background: #e8f6fe;
/* the next props are meant to keep this block independent from the other floated one */
width: auto;
overflow: hidden;
}
Example here: http://jsfiddle.net/jackJoe/fxWg7/
See http://www.alistapart.com/articles/negativemargins/ , this is exactly what you need (example 4 there).
<div id="container">
<div id="content">
<h1>content</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget, arcu.</p>
<p class="last">Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget metus.</p>
</div>
</div>
<div id="sidebar">
<h1>sidebar</h1>
<ul>
<li>link one</li>
<li>link two</li>
</ul>
</div>
#container {
width: 100%;
background: #f1f2ea url(background.gif) repeat-y right;
float: left;
margin-right: -200px;
}
#content {
background: #f1f2ea;
margin-right: 200px;
}
#sidebar {
width: 200px;
float: right;
Best to avoid placing the right column before the left, simply use a negative right-margin.
And be "responsive" by including an #media setting so the right column falls under the left on narrow screens.
<div style="background: #f1f2ea;">
<div id="container">
<div id="content">
<strong>Column 1 - content</strong>
</div>
</div>
<div id="sidebar">
<strong>Column 2 - sidebar</strong>
</div>
<div style="clear:both"></div>
<style type="text/css">
#container {
margin-right: -300px;
float:left;
width:100%;
}
#content {
margin-right: 320px; /* 20px added for center margin */
}
#sidebar {
width:300px;
float:left
}
#media (max-width: 480px) {
#container {
margin-right:0px;
margin-bottom:20px;
}
#content {
margin-right:0px;
width:100%;
}
#sidebar {
clear:left;
}
}
</style>
Simplest and most flexible solution so far it to use table display:
HTML, left div comes first, right div comes second ... we read and write left to right, so it won't make any sense to place the divs right to left
<div class="container">
<div class="left">
left content flexible width
</div>
<div class="right">
right content fixed width
</div>
</div>
CSS:
.container {
display: table;
width: 100%;
}
.left {
display: table-cell;
width: (whatever you want: 100%, 150px, auto)
}
.right {
display: table-cell;
width: (whatever you want: 100%, 150px, auto)
}
Cases examples:
// One div is 150px fixed width ; the other takes the rest of the width
.left {width: 150px} .right {width: 100%}
// One div is auto to its inner width ; the other takes the rest of the width
.left {width: 100%} .right {width: auto}
I'd like to suggest a yet-unmentioned solution: use CSS3's calc() to mix % and px units. calc() has excellent support nowadays, and it allows for fast construction of quite complex layouts.
Here's a JSFiddle link for the code below.
HTML:
<div class="sidebar">
sidebar fixed width
</div>
<div class="content">
content flexible width
</div>
CSS:
.sidebar {
width: 180px;
float: right;
background: green;
}
.content {
width: calc(100% - 180px);
background: orange;
}
And here's another JSFiddle demonstrating this concept applied to a more complex layout. I used SCSS here since its variables allow for flexible and self-descriptive code, but the layout can be easily re-created in pure CSS if having "hard-coded" values is not an issue.
This is a generic, HTML source ordered solution where:
The first column in source order is fluid
The second column in source order is fixed
This column can be floated left or right using CSS
Fixed/Second Column on Right
#wrapper {
margin-right: 200px;
}
#content {
float: left;
width: 100%;
background-color: powderblue;
}
#sidebar {
float: right;
width: 200px;
margin-right: -200px;
background-color: palevioletred;
}
#cleared {
clear: both;
}
<div id="wrapper">
<div id="content">Column 1 (fluid)</div>
<div id="sidebar">Column 2 (fixed)</div>
<div id="cleared"></div>
</div>
Fixed/Second Column on Left
#wrapper {
margin-left: 200px;
}
#content {
float: right;
width: 100%;
background-color: powderblue;
}
#sidebar {
float: left;
width: 200px;
margin-left: -200px;
background-color: palevioletred;
}
#cleared {
clear: both;
}
<div id="wrapper">
<div id="content">Column 1 (fluid)</div>
<div id="sidebar">Column 2 (fixed)</div>
<div id="cleared"></div>
</div>
Alternate solution is to use display: table-cell; which results in equal height columns.
Hey, What you can do is apply a fixed width to both the containers and then use another div class where clear:both, like
div#left {
width: 600px;
float: left;
}
div#right {
width: 240px;
float: right;
}
div.clear {
clear:both;
}
place a the clear div under left and right container.
I have simplified it : I have edited jackjoe's answer. The height auto etc not required I think.
CSS:
#container {
position: relative;
margin:0 auto;
width: 1000px;
background: #C63;
padding: 10px;
}
#leftCol {
background: #e8f6fe;
width: auto;
}
#rightCol {
float:right;
width:30%;
background: #aafed6;
}
.box {
position:relative;
clear:both;
background:#F39;
}
</style>
HTML:
<div id="container">
<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 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>
Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.
</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>