When I have a grids layout that has little content in the yui-main block, some of the sidebar blocks (in my case those outside yui-main) jump down under the main block.
Here is an example page of this issue (and a pastebin'd source if the file no longer exists).
Examples
This one works fine as the content within #yui-main is longer than the content outside of it:
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis libero vitae tellus rhoncus malesuada. Ut tempor ipsum vel orci. Maecenas nec nibh. Aenean sed nisi. In hac habitasse platea dictumst. Etiam augue. Curabitur et felis non tortor commodo porta. Vivamus bibendum viverra tellus. Aliquam erat volutpat. Vestibulum in turpis. Duis bibendum nunc ac lectus. Mauris mi. Mauris neque.</p>
</div>
<div class="yui-b">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis libero vitae tellus rhoncus malesuada. Ut tempor ipsum vel orci. Maecenas nec nibh. Aenean sed nisi. In hac habitasse platea dictumst. Etiam augue. Curabitur et felis non tortor commodo porta. Vivamus bibendum viverra tellus. Aliquam erat volutpat. Vestibulum in turpis. Duis bibendum nunc ac lectus. Mauris mi. Mauris neque.</p>
</div>
</div>
<div class="yui-b">
<h2>Delors sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis libero vitae tellus rhoncus malesuada. Ut tempor ipsum vel orci. Maecenas nec nibh. Aenean sed nisi. In hac habitasse platea dictumst. Etiam augue. Curabitur et felis non tortor commodo porta. Vivamus bibendum viverra tellus. Aliquam erat volutpat. Vestibulum in turpis. Duis bibendum nunc ac lectus. Mauris mi. Mauris neque. </p>
</div>
</div>
However this one does not, as the content outside of yui-main is longer than the content inside of it. Thus it overspills underneath yui-main.
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis libero vitae tellus rhoncus malesuada. Ut tempor ipsum vel orci. Maecenas nec nibh. Aenean sed nisi. In hac habitasse platea dictumst. Etiam augue. Curabitur et felis non tortor commodo porta. Vivamus bibendum viverra tellus. Aliquam erat volutpat. Vestibulum in turpis. Duis bibendum nunc ac lectus. Mauris mi. Mauris neque.</p>
</div>
</div>
<div class="yui-b">
<h2>Delors sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis libero vitae tellus rhoncus malesuada. Ut tempor ipsum vel orci. Maecenas nec nibh. Aenean sed nisi. In hac habitasse platea dictumst. Etiam augue. Curabitur et felis non tortor commodo porta. Vivamus bibendum viverra tellus. Aliquam erat volutpat. Vestibulum in turpis. Duis bibendum nunc ac lectus. Mauris mi. Mauris neque. </p>
</div>
<div class="yui-b">
<h2>Delors sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis libero vitae tellus rhoncus malesuada. Ut tempor ipsum vel orci. Maecenas nec nibh. Aenean sed nisi. In hac habitasse platea dictumst. Etiam augue. Curabitur et felis non tortor commodo porta. Vivamus bibendum viverra tellus. Aliquam erat volutpat. Vestibulum in turpis. Duis bibendum nunc ac lectus. Mauris mi. Mauris neque. </p>
</div>
</div>
The yui-b divs are floating but haven't been cleared. This essentially means that there's nothing to tell them below which elements to float, leaving them to vertically stack as seen.
Setting clear:both on the second yui-b div fixes this.
Related
I want to trigger a circle fadeIn animation based on the user scroll position.
With every scroll down, the circle gets bigger.
With every scroll up, the circle gets smaller.
The animation would stop if the user is not scrolling anymore - so the user has to scroll a few times for the animation to be complete. If the scrolling stops, the circle would remain at a certain width (depending on how much he scrolled up/down).
I only have it running with basic CSS and HTML at the moment. I am missing JS the scroll function that would trigger the circle getting bigger/smaller depending on how much the user scrolls in the background.
.section {
animation: 3s fadeInAnimation reverse;
animation-delay:0s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
background: yellow;
height: 100vh;
}
#keyframes fadeInAnimation {
0% {
clip-path: circle(75%);
}
100% {
clip-path: circle(0%);
}
}
<div class="section">
<h1>
Section Title
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus.
</p>
</div>
Fiddle Here
This is a perfect scenario for using a CSS Custom Property and updating its value via JavaScript whenever the window is scrolled.
If we initially set the following custom property:
:root { --clip-circle: 0% }
We can then update the value of that custom property at any time by:
re-calculating clipCircleValue
document.documentElement.style.setProperty('--clip-circle', clipCircleValue);
Working Example (click Full Page) :
const updateClipCircleValue = () => {
let documentScrollHeight = document.documentElement.scrollHeight;
let documentScrollPosition = window.scrollY;
let documentScrollPercentage = ((documentScrollPosition / documentScrollHeight) * 100);
let clipCircleValue = documentScrollPercentage + '%';
document.documentElement.style.setProperty('--clip-circle', clipCircleValue);
}
window.addEventListener('scroll', updateClipCircleValue);
:root {
--clip-circle: 0%;
}
body {
min-height: 400vh;
}
.section {
position: fixed;
top: 0;
left: 0;
background-color: rgb(255, 255, 0);
clip-path: circle(var(--clip-circle));
}
<div class="section">
<h1>
Section Title
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus.
</p>
</div>
I am working on my portfolio page and as I was writing my html and my css, the site wasn't scrolling. I can't see the code only the first section.
Here is the html:
<navbar id="navbar">
<img id="logo" src="imagini/portfolio.png" alt="my portfolio" title="Bogdan's portfolio" />
<ul type="none" id="list">
<li>works</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
<section id="welcome-section">
<h1>HI, I'M<br /> Pavel Bogdan Mihail</h1>
<p>I make people get amazed by my works because I'm AWSOME!</p>
<button type="button">GET IN TOUCH</button>
</section>
<section id="about">
<h3>A little bit about me</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis neque sed massa sollicitudin interdum. Pellentesque vel libero sollicitudin lectus sollicitudin consectetur. In dictum eu nisi id porta. Ut molestie luctus hendrerit. Nulla ac nisl sit amet urna molestie dictum. Phasellus et turpis aliquet dolor iaculis congue. Nulla eget ligula nibh. Maecenas vel aliquam quam, sit amet semper nibh. Sed consectetur malesuada mauris a posuere. Suspendisse semper, magna ac convallis faucibus, orci eros ultrices diam, ac porttitor enim sem eget lorem. Proin laoreet commodo arcu, nec lobortis felis dapibus quis. Aenean ut arcu mauris. Nunc tempus erat eu felis faucibus facilisis. Donec gravida ullamcorper dolor ac dapibus. Sed pellentesque dapibus neque, quis ornare purus tincidunt ac.</p>
</section>
here is a codepen edit: https://codepen.io/bogdan-pavel/pen/pobgWjg
Your navbar is missing a closing tag. If you ad </navbar> after the navbar is done the rest will scroll.
Try this:
<navbar id="navbar">
<img id="logo" src="imagini/portfolio.png" alt="my portfolio" title="Bogdan's portfolio" />
<ul type="none" id="list">
<li>works</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
<section id="welcome-section">
<h1>HI, I'M<br /> Pavel Bogdan Mihail</h1>
<p>I make people get amazed by my works because I'm AWSOME!</p>
<button type="button">GET IN TOUCH</button>
</section>
<section id="about">
<h3>A little bit about me</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis neque sed massa sollicitudin interdum. Pellentesque vel libero sollicitudin lectus sollicitudin consectetur. In dictum eu nisi id porta. Ut molestie luctus hendrerit. Nulla ac nisl sit amet urna molestie dictum. Phasellus et turpis aliquet dolor iaculis congue. Nulla eget ligula nibh. Maecenas vel aliquam quam, sit amet semper nibh. Sed consectetur malesuada mauris a posuere. Suspendisse semper, magna ac convallis faucibus, orci eros ultrices diam, ac porttitor enim sem eget lorem. Proin laoreet commodo arcu, nec lobortis felis dapibus quis. Aenean ut arcu mauris. Nunc tempus erat eu felis faucibus facilisis. Donec gravida ullamcorper dolor ac dapibus. Sed pellentesque dapibus neque, quis ornare purus tincidunt ac.</p>
</section>
<navbar>
<div class='card'>
<div class='cardleft'><img class='imgcard' src="..." alt='img'></div>
<div class='cardright'>
<div class='cardtitle'>TITLE</div>
<div class='cardintro'>lorem ipsum...</div>
</div>
</div>
css
.card{
display:grid;
grid-template-columns: 320px auto;
}
.imgcard{
display:block;
width:100%;
margin:0 auto;
}
.cardright{
overflow:hidden;
}
.cardintro{
margin-top:9px;
}
Sometimes, cardintro content (lorem ipsum...) is too long and change the height of entire card.
I want the max-height of entire card to be the height of imgcard which is not fixed, and prevent overflow of cardintro text over that card's height.
I suppose this is solvable by javascript, but I hope by grid-template-rows or somehow using css.
Any help?
You could use absolute positioning of the cardright div that contains cardintro and set overflow hidden on the card. Here's a snippet with the same amount of text on three cards that all have different image height.
.card {
display: block;
position: relative;
overflow: hidden;
margin-bottom: 20px;
}
.imgcard {
display: block;
width: 100%;
margin: 0 auto;
}
.cardright {
position: absolute;
left: 330px;
top: 0;
right: 0;
bottom: 0;
height: 100%;
}
.cardleft {
display: inline-block;
width: 320px;
}
.cardintro {
margin-top: 9px;
}
<div class='card'>
<div class='cardleft'><img class='imgcard' src="http://via.placeholder.com/320x150" alt='img'></div>
<div class='cardright'>
<div class='cardtitle'>TITLE</div>
<div class='cardintro'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum metus vitae elit pellentesque pellentesque. Donec vulputate, mi fringilla mattis tincidunt, tellus metus placerat orci, sit amet tincidunt nisl nulla ultrices leo. Duis vitae
porttitor tortor, et imperdiet orci. In eget laoreet turpis, a porttitor metus. Aliquam vitae volutpat mi. Curabitur pellentesque arcu ex, sit amet efficitur ligula porta in. Cras metus justo, eleifend vitae ante non, congue commodo risus. In
hac habitasse platea dictumst. Proin cursus at nulla sed pretium. Maecenas semper nibh ut velit interdum varius. Sed tempus mi sit amet pellentesque rutrum. Phasellus placerat id ipsum quis tempor.</p>
<p>Curabitur est ex, rutrum vel lacus eu, imperdiet dapibus libero. Donec cursus mattis finibus. Cras eget felis et orci consectetur egestas sit amet sed sem. Phasellus ultricies mi eu mauris posuere, sit amet facilisis ante lobortis. Etiam et quam
id sapien gravida lacinia ut non diam. Etiam sit amet iaculis quam, in malesuada erat. Aliquam tristique aliquet elit, vitae maximus enim vestibulum non. Phasellus vitae iaculis orci. Integer in consequat odio, at dapibus quam.</p>
</div>
</div>
</div>
<div class='card'>
<div class='cardleft'><img class='imgcard' src="http://via.placeholder.com/320x250" alt='img'></div>
<div class='cardright'>
<div class='cardtitle'>TITLE</div>
<div class='cardintro'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum metus vitae elit pellentesque pellentesque. Donec vulputate, mi fringilla mattis tincidunt, tellus metus placerat orci, sit amet tincidunt nisl nulla ultrices leo. Duis vitae
porttitor tortor, et imperdiet orci. In eget laoreet turpis, a porttitor metus. Aliquam vitae volutpat mi. Curabitur pellentesque arcu ex, sit amet efficitur ligula porta in. Cras metus justo, eleifend vitae ante non, congue commodo risus. In
hac habitasse platea dictumst. Proin cursus at nulla sed pretium. Maecenas semper nibh ut velit interdum varius. Sed tempus mi sit amet pellentesque rutrum. Phasellus placerat id ipsum quis tempor.</p>
<p>Curabitur est ex, rutrum vel lacus eu, imperdiet dapibus libero. Donec cursus mattis finibus. Cras eget felis et orci consectetur egestas sit amet sed sem. Phasellus ultricies mi eu mauris posuere, sit amet facilisis ante lobortis. Etiam et quam
id sapien gravida lacinia ut non diam. Etiam sit amet iaculis quam, in malesuada erat. Aliquam tristique aliquet elit, vitae maximus enim vestibulum non. Phasellus vitae iaculis orci. Integer in consequat odio, at dapibus quam.</p>
</div>
</div>
</div>
<div class='card'>
<div class='cardleft'><img class='imgcard' src="http://via.placeholder.com/320x350" alt='img'></div>
<div class='cardright'>
<div class='cardtitle'>TITLE</div>
<div class='cardintro'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum metus vitae elit pellentesque pellentesque. Donec vulputate, mi fringilla mattis tincidunt, tellus metus placerat orci, sit amet tincidunt nisl nulla ultrices leo. Duis vitae
porttitor tortor, et imperdiet orci. In eget laoreet turpis, a porttitor metus. Aliquam vitae volutpat mi. Curabitur pellentesque arcu ex, sit amet efficitur ligula porta in. Cras metus justo, eleifend vitae ante non, congue commodo risus. In
hac habitasse platea dictumst. Proin cursus at nulla sed pretium. Maecenas semper nibh ut velit interdum varius. Sed tempus mi sit amet pellentesque rutrum. Phasellus placerat id ipsum quis tempor.</p>
<p>Curabitur est ex, rutrum vel lacus eu, imperdiet dapibus libero. Donec cursus mattis finibus. Cras eget felis et orci consectetur egestas sit amet sed sem. Phasellus ultricies mi eu mauris posuere, sit amet facilisis ante lobortis. Etiam et quam
id sapien gravida lacinia ut non diam. Etiam sit amet iaculis quam, in malesuada erat. Aliquam tristique aliquet elit, vitae maximus enim vestibulum non. Phasellus vitae iaculis orci. Integer in consequat odio, at dapibus quam.</p>
</div>
</div>
</div>
I'm attempting to have text flow around images in the following fashion:
eg, images in two columns, with one image in the "center" column and a number of them in the right column. I tried "floating boxes" via display:inline-block; and I tried a table-like config using display:table/display:table-cell, but I was unable to provide the correct (changing) width for the text on the left.
(The apparent alignment of the 2nd parag of text with the bottom of the center image is not necessary.)
Appreciation for your assistance!
Here's a demo using float - does this accomplish what you want?
.column {
float: right;
}
.column img {
clear: both;
float: right;
margin: 5px;
}
<div class="column">
<img src="http://via.placeholder.com/100x100" />
<img src="http://via.placeholder.com/100x100" />
<img src="http://via.placeholder.com/100x100" />
</div>
<div class="column">
<img src="http://via.placeholder.com/200x200" />
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et velit laoreet, volutpat urna venenatis, porttitor ligula. Ut nulla ipsum, pulvinar et metus sed, luctus volutpat velit. Nam consectetur diam eget dui rutrum imperdiet. Sed ornare tempor
lorem. Cras sed neque fermentum, porttitor tortor eget, efficitur ligula. Maecenas laoreet dignissim arcu vitae semper. Suspendisse ac elementum ipsum, eu convallis urna. Etiam interdum, leo et molestie aliquam, turpis augue mattis neque, a pharetra
diam orci nec augue. Aliquam id nisl a massa rhoncus mollis. Suspendisse et ex sit amet mi consequat efficitur. Nulla at turpis nec ante eleifend consequat. Nulla in molestie magna.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et velit laoreet, volutpat urna venenatis, porttitor ligula. Ut nulla ipsum, pulvinar et metus sed, luctus volutpat velit. Nam consectetur diam eget dui rutrum imperdiet. Sed ornare tempor
lorem. Cras sed neque fermentum, porttitor tortor eget, efficitur ligula. Maecenas laoreet dignissim arcu vitae semper. Suspendisse ac elementum ipsum, eu convallis urna. Etiam interdum, leo et molestie aliquam, turpis augue mattis neque, a pharetra
diam orci nec augue. Aliquam id nisl a massa rhoncus mollis. Suspendisse et ex sit amet mi consequat efficitur. Nulla at turpis nec ante eleifend consequat. Nulla in molestie magna.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et velit laoreet, volutpat urna venenatis, porttitor ligula. Ut nulla ipsum, pulvinar et metus sed, luctus volutpat velit. Nam consectetur diam eget dui rutrum imperdiet. Sed ornare tempor
lorem. Cras sed neque fermentum, porttitor tortor eget, efficitur ligula. Maecenas laoreet dignissim arcu vitae semper. Suspendisse ac elementum ipsum, eu convallis urna. Etiam interdum, leo et molestie aliquam, turpis augue mattis neque, a pharetra
diam orci nec augue. Aliquam id nisl a massa rhoncus mollis. Suspendisse et ex sit amet mi consequat efficitur. Nulla at turpis nec ante eleifend consequat. Nulla in molestie magna.</p>
I have got a div [projItemsContent] that varies in height based on the contents,the problem i have got is that there are two other divs [projItemsLeft,projItemsRigh] that i want to have the same height as projItemsContent div. Any suggestions please?
div.projItems{width:360px;min-height:200px;_height:200px;background:#000}
div.projItemsLeft{float:left;width:30px;background:#990}
div.projItemsRight{float:left;width:30px;background:#900}
div.projItemsContent{float:left;width:300px;background:#ccc}
<div class="projItems">
<div class="projItemsLeft"> </div>
<div class="projItemsContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet nunc eu ligula tincidunt faucibus.
Curabitur eget magna neque, sed porta sem. Fusce eu lorem at orci dapibus faucibus ut eu mi. In eget ligula risus.
Sed id lectus lorem. Integer elit dui, bibendum vitae dictum a, mollis sodales diam. Morbi vehicula lobortis semper.
Suspendisse potenti. Proin eu convallis lectus. Praesent ut sem at enim condimentum dictum vitae id elit.
Phasellus id dolor ante, hendrerit tempus lorem. Proin nisi nibh, convallis et sollicitudin in, interdum vitae nibh.
Fusce ullamcorper dictum nunc, eget bibendum ipsum viverra quis. Aliquam vitae leo non metus ultricies tempus in id libero.
Vivamus mauris tortor, convallis ut luctus at, elementum sed velit. Cras cursus tempus erat adipiscing lacinia.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam risus, sollicitudin sed venenatis a, molestie in turpis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet nunc eu ligula tincidunt faucibus.
Curabitur eget magna neque, sed porta sem. Fusce eu lorem at orci dapibus faucibus ut eu mi. In eget ligula risus.
Sed id lectus lorem. Integer elit dui, bibendum vitae dictum a, mollis sodales diam. Morbi vehicula lobortis semper.
Suspendisse potenti. Proin eu convallis lectus. Praesent ut sem at enim condimentum dictum vitae id elit.
Phasellus id dolor ante, hendrerit tempus lorem. Proin nisi nibh, convallis et sollicitudin in, interdum vitae nibh.
Fusce ullamcorper dictum nunc, eget bibendum ipsum viverra quis. Aliquam vitae leo non metus ultricies tempus in id libero.
Vivamus mauris tortor, convallis ut luctus at, elementum sed velit. Cras cursus tempus erat adipiscing lacinia.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam risus, sollicitudin sed venenatis a, molestie in turpis.
</div>
<div class="projItemsRight"> </div>
</div>
Encapsulate the divs:
div.projItems{width:360px;min-height:200px;_height:200px;background:#000}
div.projItemsLeft{float:left;width:360px;background:#990}
div.projItemsRight{float:right;width:330px;background:#900}
div.projItemsContent{float:left;width:300px;background:#ccc}
<div class="projItems">
<div class="projItemsLeft">
<div class="projItemsRight">
<div class="projItemsContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet nunc eu ligula tincidunt faucibus.
Curabitur eget magna neque, sed porta sem. Fusce eu lorem at orci dapibus faucibus ut eu mi. In eget ligula risus.
Sed id lectus lorem. Integer elit dui, bibendum vitae dictum a, mollis sodales diam. Morbi vehicula lobortis semper.
Suspendisse potenti. Proin eu convallis lectus. Praesent ut sem at enim condimentum dictum vitae id elit.
Phasellus id dolor ante, hendrerit tempus lorem. Proin nisi nibh, convallis et sollicitudin in, interdum vitae nibh.
Fusce ullamcorper dictum nunc, eget bibendum ipsum viverra quis. Aliquam vitae leo non metus ultricies tempus in id libero.
Vivamus mauris tortor, convallis ut luctus at, elementum sed velit. Cras cursus tempus erat adipiscing lacinia.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam risus, sollicitudin sed venenatis a, molestie in turpis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet nunc eu ligula tincidunt faucibus.
Curabitur eget magna neque, sed porta sem. Fusce eu lorem at orci dapibus faucibus ut eu mi. In eget ligula risus.
Sed id lectus lorem. Integer elit dui, bibendum vitae dictum a, mollis sodales diam. Morbi vehicula lobortis semper.
Suspendisse potenti. Proin eu convallis lectus. Praesent ut sem at enim condimentum dictum vitae id elit.
Phasellus id dolor ante, hendrerit tempus lorem. Proin nisi nibh, convallis et sollicitudin in, interdum vitae nibh.
Fusce ullamcorper dictum nunc, eget bibendum ipsum viverra quis. Aliquam vitae leo non metus ultricies tempus in id libero.
Vivamus mauris tortor, convallis ut luctus at, elementum sed velit. Cras cursus tempus erat adipiscing lacinia.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam risus, sollicitudin sed venenatis a, molestie in turpis.
</div>
Right column content
<br style="clear:left;" /></div>
Left column content
<br style="clear:right;" /></div>
</div>
Google turned up this: http://matthewjamestaylor.com/blog/perfect-3-column.htm
I once used this as a guide: http://bluerobot.com/web/layouts/layout3.html
And this too is a good resource: http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html