IE 7 with backgorund image and position with js hack - css

I am using the js for before hack in IE 7.It displays the background image for the class.But now I want to position the image.Because it is sprite.I dont know why its not working .below is my code.
JS hack.http://jquery.lukelutman.com/plugins/pseudo/
.magento{
list-style-type: none;
margin:0; padding:0;
padding-left: 20px;
}
.magento li:before
{
display: inline-block;
position: absolute;
margin: 9px 0 0 -20px;
min-height: 9px;
background: url(images/bulletsprite.png) no-repeat -116px 0px;
*before: url(images/bulletsprite.png);
*background-position-x: -116px;
*background-position-y:0px;
content:"";
// vertical-align: middle;
width: 9px;
height: 9px;
float:left;
}
HTML code
<ul class="magento">
<li>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla sapien, varius id dignissim sit amet, luctus elementum nulla. Mauris hendrerit tincidunt nunc condimentum accumsan. Donec semper hendrerit ligula non blandit. Nullam tellus lacus, dictum quis sodales id, consectetur posuere nunc. Maecenas massa nibh, sagittis quis hendrerit ornare, interdum sit amet tellus. Proin lectus neque, posuere at interdum vitae, eleifend id dui. Mauris eget eros magna, sed gravida quam.</span>
</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla sapien, varius id dignissim sit amet, luctus elementum nulla. Mauris hendrerit tincidunt nunc condimentum accumsan. Donec semper hendrerit ligula non blandit. Nullam tellus lacus, dictum quis sodales id, consectetur posuere nunc. Maecenas massa nibh, sagittis quis hendrerit ornare, interdum sit amet tellus. Proin lectus neque, posuere at interdum vitae, eleifend id dui. Mauris eget eros magna, sed gravida quam.
</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla sapien, varius id dignissim sit amet, luctus elementum nulla. Mauris hendrerit tincidunt nunc condimentum accumsan. Donec semper hendrerit ligula non blandit. Nullam tellus lacus, dictum quis sodales id, consectetur posuere nunc. Maecenas massa nibh, sagittis quis hendrerit ornare, interdum sit amet tellus. Proin lectus neque, posuere at interdum vitae, eleifend id dui. Mauris eget eros magna, sed gravida quam.
</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla sapien, varius id dignissim sit amet, luctus elementum nulla. Mauris hendrerit tincidunt nunc condimentum accumsan. Donec semper hendrerit ligula non blandit. Nullam tellus lacus, dictum quis sodales id, consectetur posuere nunc. Maecenas massa nibh, sagittis quis hendrerit ornare, interdum sit amet tellus. Proin lectus neque, posuere at interdum vitae, eleifend id dui. Mauris eget eros magna, sed gravida quam.
</li>
</ul>
Also its in IE7 standard mode only . why the background-position is not working. The same code works fine in IE8.


IE7 didn't come out until October of 2006. The plugin you're using says that it was last updated on February 6th, 2006. I'm guessing it was never made to work with anything other than IE 5 and IE 6.

Related

css grid - prevent text overflow on right side

<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>

Nav Menu Over Homepage Banner Area

I would like to know the best way to implement a header/nav that sits over the top of a home page banner div so that the banner's background shows through the header. The content of the header would be located in a template file, while the content of the homepage banner would be outside the template. Because of this, I don't think I can/should nest the header inside the banner. Also, because I'm using a template, the same header will be used on pages other than the home page that don't have a banner.
So far I've got something that sort of works, but I had to do some things that seem a bit inelegant:
1) I had to code the header after the banner. It's probably not a big deal, but I suppose it would be better for screen readers if the first part came first and the second part second.
2) In order for the content text to clear the absolutely positioned banner, I put a bunch of padding at the top of the #content div. But unless the banner is a fixed height, the amount of padding required will vary. Also, on pages that don't have a banner, I'd have to remove that padding entirely.
What's the better way?
body {
font-family: helvetica;
margin: 0;
}
#banner {
background-image: url('http://toprival.com/temp/jsfiddle/background.jpg');
margin: 0;
padding: 100px 30px 30px 30px;
position: absolute;
top: 0;
width: 100%;
background-size:cover;
}
#banner h1 {
font-size: 3em;
}
header {
position: absolute;
background: rgba(0, 0, 0, 0.6);
top: 0;
left: 0;
right:0;
padding: 30px;
}
#menu {
padding: 0;
margin: 0;
}
#menu li {
float: left;
margin-right: 30px;
list-style-type: none;
}
#menu li a {
text-decoration: none;
color: #FFF;
}
#menu li a:hover {
color: aqua;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
#content {
padding: 260px 30px 30px 30px;
}
<div id="banner">
<h1>Supacool Website Title Here</h1>
</div>
<header>
<ul id="menu" class="clearfix">
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</header>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
</div>

Slide out menu - text not scrolling

I am using the css from this jsfiddle:
http://jsfiddle.net/fh6p4/
And as you can see, the text is not scrolling .
I know it is related to being position:fixed but i don't know how to fix this ..
SO forces me to show the js fiddle code, so here it is:
$('#button').toggle(
function() {
$('#right').animate({ left: 250 }, 'slow', function() {
$('#button').html('Close');
});
},
function() {
$('#right').animate({ left: 0 }, 'slow', function() {
$('#button').html('Menu');
});
}
);
* {
padding: 0px;
margin: 0px;
}
#menubar {
width:100%;
background-color:#444;
color: #fff;
padding: 10px;
}
#button {
cursor:pointer;
}
#menu, #right {
display:inline;
}
#menu li a {
padding: 10px;
display: block;
color: white;
text-decoration: none;
}
#right {
width:100%;
background-color: #fff;
z-index: 5;
position: fixed;
left: 0px;
height: 100%;
-webkit-box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
moz-box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
o-box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
}
#right p {
padding: 10px;
}
#menu {
float:left;
width: 350px;
height: 100%;
}
#menu li {
background-color:#444;
border-bottom: 1px solid #888;
}
<div id="menu">
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
<li>Menu Item 5</li>
<li>Menu Item 6</li>
<li>Menu Item 7</li>
<li>Menu Item 8</li>
<li>Menu Item 9</li>
<li>Menu Item 10</li>
<li>Menu Item 11</li>
<li>Menu Item 12</li>
</ul>
</div>
<div id="right">
<div id="menubar">
<div id="button">
Menu
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
</div>

Adding an overflow: scroll to your code will allow you to scroll inside a fixed element:
$('#button').toggle(
function() {
$('#right').animate({ left: 250 }, 'slow', function() {
$('#button').html('Close');
});
},
function() {
$('#right').animate({ left: 0 }, 'slow', function() {
$('#button').html('Menu');
});
}
);
* {
padding: 0px;
margin: 0px;
}
#menubar {
width:100%;
background-color:#444;
color: #fff;
padding: 10px;
}
#button {
cursor:pointer;
}
#menu, #right {
display:inline;
}
#menu li a {
padding: 10px;
display: block;
color: white;
text-decoration: none;
}
#right {
width:100%;
background-color: #fff;
z-index: 5;
position: fixed;
left: 0px;
height: 100%;
overflow: scroll;
-webkit-box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
moz-box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
o-box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
}
#right p {
padding: 10px;
}
#menu {
float:left;
width: 350px;
height: 100%;
}
#menu li {
background-color:#444;
border-bottom: 1px solid #888;
}
<div id="menu">
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
<li>Menu Item 5</li>
<li>Menu Item 6</li>
<li>Menu Item 7</li>
<li>Menu Item 8</li>
<li>Menu Item 9</li>
<li>Menu Item 10</li>
<li>Menu Item 11</li>
<li>Menu Item 12</li>
</ul>
</div>
<div id="right">
<div id="menubar">
<div id="button">
Menu
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
</div>
However, I think this is the wrong approach. Your main content almost never has a reason to be fixed, only your menu should be fixed. Just as an example, view the below as a simple and easy way to create a menu like the one you are trying to make and see how easy it could be if you separate out some elements and keep your content rigidly detached from your data.
document.getElementById('menuButton').addEventListener('click', function(e){
e.preventDefault();
this.className = this.className === 'active' ? '' : 'active';
});
// This code is here to quickly create some content
for(var i = 0; i < 1000; i++){
document.querySelector('article').textContent += 'Lorem Ipsum Dolor Sit Amet. ';
}
nav {
width: 400px;
left: -400px;
top: 0;
position: fixed;
height: 100%;
background: green;
-webkit-transition: left .5s;
transition: left .5s;
}
div {
position: fixed;
left: 10px;
top: 10px;
width: 20px;
height: 20px;
background: red;
-webkit-transition: left .5s;
transition: left .5s;
}
div.active {
left: 410px;
}
div.active + nav {
left: 0;
}
article {
padding-top: 40px;
}
<div id="menuButton"></div>
<nav>
<ul>
<li>Menu Link</li>
<li>Menu Link</li>
<li>Menu Link</li>
<li>Menu Link</li>
</ul>
</nav>
<article>
Content
</article>

Adding overflow:scroll; to #right creates the scrollbar. However, it also allows the menu bar to be scrolled.
#right {
overflow:scroll;
}

Add this bit of code to your css style sheet at #right{..}
#right {
max-height:250px; //edit your own height
overflow:scroll;
}

Still not sure the answer, but this fiddle might be a little closer to your desired behavior... still problems to work out
http://jsfiddle.net/eqLypgs1/2/
$('#button').toggle(
function() {
$('#right').animate({
left: 250
}, 'slow', function() {
$('#button').html('Close');
});
},
function() {
$('#right').animate({
left: 0
}, 'slow', function() {
$('#button').html('Menu');
});
});
* {
padding: 0px;
margin: 0px;
}
#menubar {
width: 100%;
background-color: #444;
color: #fff;
padding: 10px;
}
#button {
cursor: pointer;
}
#menu,
#right {
display: inline;
}
#menu li a {
padding: 10px;
display: block;
color: white;
text-decoration: none;
}
#right {
width: 100%;
background-color: #fff;
position: absolute;
z-index: 5;
left: 0px;
height: 90%;
-webkit-box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
moz-box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
o-box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
}
#right p {
padding: 10px;
display: block;
}
#menu {
float: left;
width: 350px;
height: 100%;
}
#menu li {
background-color: #444;
border-bottom: 1px solid #888;
}
<div id="menu">
<ul>
<li>Menu Item 1
</li>
<li>Menu Item 2
</li>
<li>Menu Item 3
</li>
<li>Menu Item 4
</li>
<li>Menu Item 5
</li>
<li>Menu Item 6
</li>
<li>Menu Item 7
</li>
<li>Menu Item 8
</li>
<li>Menu Item 9
</li>
<li>Menu Item 10
</li>
<li>Menu Item 11
</li>
<li>Menu Item 12
</li>
</ul>
</div>
<div id="menubar">
<div id="button">Menu</div>
</div>
<div id="right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas
tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis
lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas
tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis
lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas
tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis
lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas
tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis
lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas
tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis
lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas
tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis
lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas
tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis
lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas
tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis
lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas
tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis
lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
</div>

handling css multiple div's

I need to arrange multiple div's like,
code:
<style>
#div1 {
background: yellow;
float:left;
position:relative;
width:177px;
}
#div2 {
background: green;
overflow: hidden;
position:relative;
width: 177px;
clear: left;
}
#div3 {
background: blue;
margin-left:180px;
position:relative;
}
#div4 {
position: relative;
}
</style>
<div id="div1">
<p><strong>DIV1:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante leo. Fusce at lacus risus. Fusce felis tortor, vehicula ut vulputate sit amet, ultricies sit amet risus.</p>
</div>
<div id="div4">
<div id="div2">
<p><strong>DIV2:</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante leo. Fusce at lacus risus. Fusce felis tortor, vehicula ut vulputate sit amet, ultricies sit amet risus.</p>
</div>
<div id="div3">
<p><strong>DIV3:</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante leo. Fusce at lacus risus. Fusce felis tortor, vehicula ut vulputate sit amet, ultricies sit amet risus. Donec venenatis, nulla et ultrices varius, ligula sapien pharetra dolor, eget vulputate justo felis ac leo. Morbi nec ullamcorper purus. Nulla mollis dignissim nisi in imperdiet. Phasellus convallis ante a felis tincidunt hendrerit. Praesent ipsum lorem, mollis sed dignissim non, consectetur non ipsum. Nam euismod, nisi ut ultricies aliquet, lorem erat pretium tortor, eget volutpat lectus tellus at magna. Curabitur a est ante, interdum faucibus ipsum. Mauris vitae tincidunt nisl. Praesent semper erat sit amet augue pharetra tristique. Morbi imperdiet, magna et malesuada interdum, massa ipsum venenatis est, sit amet egestas risus sem a purus.</p>
<p>Duis in sagittis justo. Quisque sit amet felis in tortor pharetra bibendum. Mauris eget purus sit amet magna vulputate ultricies. Nam non dignissim nisl. Suspendisse pretium malesuada dolor, non lacinia tellus imperdiet ullamcorper. Sed commodo placerat lacus eu bibendum. In id elit sed velit iaculis pulvinar et id elit. Cras sagittis porttitor tristique. Vivamus sed sodales lectus. Nulla interdum, mi sit amet volutpat feugiat, nunc erat consectetur neque, rutrum rutrum lorem nisl pellentesque magna. Maecenas mollis consequat fringilla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam eu mi pellentesque turpis faucibus vestibulum quis in ligula. Donec mollis tempor velit, eget vestibulum ante elementum ac. In gravida, purus sed faucibus rhoncus, arcu augue pretium nibh, ut faucibus justo ante vitae metus. Nunc sit amet mauris urna.</p>
</div>
</div>
Please help on this div3 to go top
Thanks in advance.

Based on the beginning of your question :
I need to arrange multiple div's like,
[ div1 ] [ div3 ]
[ div2 ] [ "" ]
I simply ignored the code you supplied. I noticed you wanted a 2 columns system.
Here's a jsfiddle of my suggestion.
Code :
.col {float:left; border:2px solid red;}
.row{width:100px;border:1px solid blue; margin:3px;}
<div class="col">
<div class="row">row1</div>
<div class="row">row2</div>
</div>
<div class="col">
<div class="row">row3</div>
<div class="row">row4</div>
</div>
Would that work for you? If not, why?

Do you mean something like this fiddle?
Tested on Win7 in IE8, IE9, Opera 11.50, FF4, FF5, Safari 5, Chrome 12.
Only IE7 fails. For that you need an extra conditional stylesheet like in this fiddle:
<!--[if lt IE 8]>
<style type="text/css">
body {
position: relative;
}
#div3 {
position: absolute;
margin-left: 0;
top: 0;
}
</style>
<![endif]-->
If you really want it cross browser compatible, without consitional stylesheet for IE7, then I suppose there is no way around partially absolute positioning. See this demo fiddle.

This worked, Thanks NGLN, Your suggestion helped me a lot.
<style>
#div1 {
background: yellow;
float:left;
width:177px;
}
#div2 {
background: green;
overflow: hidden;
width: 177px;
clear: left;
float: left;
}
#div3 {
background: blue;
margin-left: 185px;
position: relative;
}
#div4 {
display: inline;
}
</style>
<div id="div1">
<p><strong>DIV1:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante leo. Fusce at lacus risus. Fusce felis tortor, vehicula ut vulputate sit amet, ultricies sit amet risus.</p>
</div>
<div id="div4">
<div id="div2">
<p><strong>DIV2:</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante leo. Fusce at lacus risus. Fusce felis tortor, vehicula ut vulputate sit amet, ultricies sit amet risus.</p>
</div>
<div id="div3">
<p><strong>DIV3:</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante leo. Fusce at lacus risus. Fusce felis tortor, vehicula ut vulputate sit amet, ultricies sit amet risus. Donec venenatis, nulla et ultrices varius, ligula sapien pharetra dolor, eget vulputate justo felis ac leo. Morbi nec ullamcorper purus. Nulla mollis dignissim nisi in imperdiet. Phasellus convallis ante a felis tincidunt hendrerit. Praesent ipsum lorem, mollis sed dignissim non, consectetur non ipsum. Nam euismod, nisi ut ultricies aliquet, lorem erat pretium tortor, eget volutpat lectus tellus at magna. Curabitur a est ante, interdum faucibus ipsum. Mauris vitae tincidunt nisl. Praesent semper erat sit amet augue pharetra tristique. Morbi imperdiet, magna et malesuada interdum, massa ipsum venenatis est, sit amet egestas risus sem a purus.</p>
<p>Duis in sagittis justo. Quisque sit amet felis in tortor pharetra bibendum. Mauris eget purus sit amet magna vulputate ultricies. Nam non dignissim nisl. Suspendisse pretium malesuada dolor, non lacinia tellus imperdiet ullamcorper. Sed commodo placerat lacus eu bibendum. In id elit sed velit iaculis pulvinar et id elit. Cras sagittis porttitor tristique. Vivamus sed sodales lectus. Nulla interdum, mi sit amet volutpat feugiat, nunc erat consectetur neque, rutrum rutrum lorem nisl pellentesque magna. Maecenas mollis consequat fringilla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam eu mi pellentesque turpis faucibus vestibulum quis in ligula. Donec mollis tempor velit, eget vestibulum ante elementum ac. In gravida, purus sed faucibus rhoncus, arcu augue pretium nibh, ut faucibus justo ante vitae metus. Nunc sit amet mauris urna.</p>
</div>
</div>

When nesting two divs with automatic heights, how can I have the smaller one stick to the top?

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
}
</style>
</head>
<body bgcolor="#00CC99">
<div style="position: relative; min-height: 600px; height: auto; width: 800px; border: 3px solid #000000; padding: 10px;">
<div style="position: relative; display: inline-block; min-height: 500px; width: 300px; border: 3px solid #000000; overflow: auto; padding: 10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p>
</div>
<div style="position: relative; display: inline-block; min-height: 500px; width: 400px; border: 3px solid #000000; overflow: auto; padding: 10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p><br><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p><br><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p>
</div>
</div>
</body>
</html>
Clearly, the nested div on the left is the shorter of the two. How can I make sure that the left div can stay at the same level from the top as the div on the right?

Setting vertical-align:top in the styles of the first (left) div works in Chrome and Firefox (didn't try IE or Safari, I assume Safari works).

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
}
</style>
</head>
<body bgcolor="#00CC99">
<div style="min-height: 600px; height: auto; width: 800px; border: 3px solid rgb(0, 0, 0); padding: 10px; overflow: auto;">
<div style="min-height: 500px; width: 300px; border: 3px solid rgb(0, 0, 0); overflow: auto; padding: 10px; float: left;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p>
</div>
<div style="min-height: 500px; width: 400px; border: 3px solid rgb(0, 0, 0); overflow: auto; padding: 10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p><br><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p><br><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p>
</div>
</div>
</body>
</html>
Hope this solves your issue.

Resources