I have a parent div with a certain size and inside him I have other divs and if any of those child divs start showing their content out of the parent div I want to delete that div, and no I don't want to put it hidden with the overflow I really want to delete him. I tried to search the solution but I didn't found any. How can I manage this problem?
I have this JSFiddle to a better understading the problem.
Here is the code:
<div style="width: 300px; height: 55px; background-color: gray">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div style="border: 2px solid red">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <strong>I WANT DO DELETE THIS DIV!</strong>
</div>
</div>
I don't know if I can do this with Blazor but I'm here to learn.
Thank you for your attention.
Basically you can do this by looping over the children, and checking if their top corner is “higher” on the Y axis (“higher” value on that axis meaning, it is lower down on the screen), than the parent’s own height. You can use the offsetTop property here, if the parent element is also the offsetParent of the children - if positioning is involved anywhere, that might change the offsetParent, so in that case you might need to work with coordinates relative to the viewport.
var p = document.getElementById('parent'),
c = p.children;
for(var i=c.length-1; i>=0; --i) {
console.log(c[i], c[i].offsetTop, p.offsetHeight)
if(c[i].offsetTop >= p.offsetHeight || c[i].offsetHeight > p.offsetHeight) {
p.removeChild(c[i]);
}
}
#parent { position: relative; }
foo
<br>
<div id="parent" style="width: 300px; height: 55px; background-color: gray">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div style="border: 2px solid red">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <strong>I WANT DO DELETE THIS DIV!</strong>
</div>
</div>
I am looping over the children in reverse order here - that gives less hassle with removing elements, and the index of the remaining elements in the live HTMLCollection returned by children.
I introduced the foo<br> at the beginning here, so that the whole element is set off a bit from the viewport - then you’ll notice how setting the parent to position:relative changes the offsetTop values, remove that from the CSS and see how the values in the debug output change.
Now this is a trivial way to do this, based on your rather trivial example. In more complex layout situations, it might not work that easily.
Edit: Need to check not only the offsetTop, but the offsetHeight as well. Otherwise, the last element might not get removed, if it is higher than the parent itself.
you need to add a css attribute overflow : hidden
See more: https://developer.mozilla.org/fr/docs/Web/CSS/overflow
I think this will work.. Try this code..
css
div div:not(:first-child) {
display: none;
}
See markup + css below, or this fiddle:
http://jsfiddle.net/gq9w6/15/ ... in IE7 (or IE8/9 compatibility view)
The "Lorem ipsum" text should be wrapping around both divs #1 and #3, but in IE7, it clears div #1.
How can I get IE7 to behave in this scenario?
HTML:
<div id="div1">Feature image</div>
<div id="div2">
<div id="div4" class="a">fb like</div>
<div id="div5" class="a">g-plus1</div>
<div id="div5" class="a">tweet</div>
</div>
<div id="div3">related topics list</div>
<div id="div7">bi-line</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
CSS:
#div1{border:1px dotted green;float:left;width:100px;height:100px;}
#div2{height:15px;}
#div3{float:right;clear:both;width:100px;height:30px;border:1px dotted green;}
.a{float:left;width:70px;border:1px dotted red;}
#div7{text-align:left;}
UPDATE:
HTML/CSS and fiddle to (/14) all updated with sample text that shows the purpsoe of each div.
UPDATE
Written description of requirements:
A featured image floated to the left
A series of social-media share buttons to the right of the image, in a horizontal row with the top of the row aligned with the top the featured image
a by-line beneath the social-media buttons (they're not wrapping correctly in the fiddle, but never mind, that's easy to fix)
A "related topics" widget floated right, clearing the featured image (top edge of the former aligned with the bottom edge of the latter)
article text beginning beneath the by-line, wrapping around the rest of the featured image as well as the related topics widget
In your code #div1 is floated to the left which takes out of the document flow, leaving #div2 to occupy the space, although the contents is being pushed by the float. Your #div3 is actually clearing all floats and is floated to the right (it's the reason it's on the same level as the bottom of #div1. Not sure what #div7 is doing. Is it also supposed to float?
What are you trying to achieve?
If you add float: left to #div2 and #div7 and remove clear: both from #div3 you will get the same result in all browsers.
Given a block container
<div>
this is a very long string which contains a bunch of characters that I want to break at container edges.
</div>
are there any css properties I can set to force it to break when it reaches the container width, regardless of the contents of the string, for example a break like:
this is a ve
ry long stri
ng which ...
is pretty much what I want. Right now, it seems to always prefer to break at whitespace characters or other special characters (such as /).
There's a CSS3 property called word-break that may be of some use to you in future.
More information is available here: http://www.css3.com/css-word-break/
The break-all value looks to do the thing you're asking for:
Useful where content contains a majority of Asian character set content, to which this value behaves like ‘normal’. Non-Asian character set content may be arbitrarily broken across lines.
As for more supported versions of CSS, I don't believe there's a way you can do this.
Try this
<style type="text/css">
div {
white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
white-space: -pre-wrap; /* Opera 4 - 6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
word-wrap: break-word; /* IE 5.5+ */
}
</style>
<div style="width:200px">
adsjflk;asjfl;kasdjfl;kasdjfl;kasdjf;lkasdjf;lkasdjf;lkasjdf;lkajsd;lkadfjs;l
</div>
Alternative way achieve the same by enclosing the div in a parent div and setting the width of the parent div. Though it might not be the ideal solution.
<div style="width:50px">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
</div>
Is there a way to fix a position on the x-axis only? So when a user scrolls up, the div tag will scroll up with it, but not side to side?
Its a simple technique using the script also. You can check a demo here too.
JQuery
$(window).scroll(function(){
$('#header').css({
'left': $(this).scrollLeft() + 15
//Why this 15, because in the CSS, we have set left 15, so as we scroll, we would want this to remain at 15px left
});
});
CSS
#header {
top: 15px;
left: 15px;
position: absolute;
}
Update Credit: #PierredeLESPINAY
As commented, to make the script support the changes in the css without having to recode them in the script. You can use the following.
var leftOffset = parseInt($("#header").css('left')); //Grab the left position left first
$(window).scroll(function(){
$('#header').css({
'left': $(this).scrollLeft() + leftOffset //Use it later
});
});
Demo :)
This is an old thread but CSS3 has a solution.
position: sticky;
Have a look at this blog post.
Demonstration:
And this documentation.
If your block is originally positioned as static, you may want to try this
$(window).on('scroll', function () {
var $w = $(window);
$('.position-fixed-x').css('left', $w.scrollLeft());
$('.position-fixed-y').css('top', $w.scrollTop());
});
.container {
width: 1000px;
}
.position-fixed-x {
position: relative;
}
.position-fixed-y {
position: relative;
}
.blue-box {
background:blue;
width: 50px;
height: 50px;
}
.red-box {
background: red;
width: 50px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="position-fixed-y red-box">
</div>
The pattern of base pairs in the DNA double helix encodes the instructions for building the proteins necessary to construct an entire organism. DNA, or deoxyribonucleic acid, is found within most cells of an organism, and most organisms have their own unique DNA code. One exception to this is cloned organisms, which have the same exact DNA code as their parents do.
<div class="position-fixed-x blue-box">
</div>
DNA strands are composed of millions of sub-units, called nucleotides. Each nucleotide contains a 5-carbon sugar, a phosphate group and a nitrogen base. There are four different variations of the nitrogen base group, responsible for all of the variation between two different DNA strands. The four different variations are called adenine, guanine, cytosine and thymine, but they are typically abbreviated and only referred to by their first letter. The sequence of these different nitrogen bases makes up the code of the DNA.
The DNA strand splits in two, and forms two different DNA strands during cell replication. However, sometimes this process is not perfect, and mistakes occur. These mistakes may change the way an organism is constructed or functions. When this happens, it is called a mutation. These mutations can be helpful or harmful, and they are usually passed on to the organism’s offspring.
The traits of a living thing depend on the complex mixture of interacting components inside it. Proteins do much of the chemical work inside cells, so they largely determine what those traits are. But those proteins owe their existence to the DNA (deoxyribonucleic acid), so that is where we must look for the answer.
The easiest way to understand how DNA is organized is to start with its basic building blocks. DNA consists of four different sugars that interact with each other in specific ways. These four sugars are called nucleotide bases and have the names adenine (A), thymine (T), cytosine (C) and guanine (G). Think of these four bases as letters in an alphabet, the alphabet of life!
If we hook up these nucleotides into a sequence--for example, GATCATCCG--we now have a little piece of DNA, or a very short word. A much longer piece of DNA can therefore be the equivalent of different words connected to make a sentence, or gene, that describes how to build a protein. And a still longer piece of DNA could contain information about when that protein should be made. All the DNA in a cell gives us enough words and sentences to serve as a master description or blueprint for a human (or an animal, a plant, or a microorganism).
Of course, the details are a little more complicated than that! In practice, active stretches of DNA must be copied as a similar message molecule called RNA. The words in the RNA then need to be "read" to produce the proteins, which are themselves stretches of words made up of a different alphabet, the amino acid alphabet. Nobel laureates Linus Pauling, who discerned the structure of proteins, and James Watson and Francis Crick, who later deciphered the helical structure of DNA, helped us to understand this "Central Dogma" of heredity--that the DNA code turns into an RNA message that has the ability to organize 20 amino acids into a complex protein: DNA -> RNA -> Protein.
To understand how this all comes together, consider the trait for blue eyes. DNA for a blue-eyes gene is copied as a blue-eyes RNA message. That message is then translated into the blue protein pigments found in the cells of the eye. For every trait we have--eye color, skin color and so on--there is a gene or group of genes that controls the trait by producing first the message and then the protein. Sperm cells and eggs cells are specialized to carry DNA in such a way that, at fertilization, a new individual with traits from both its mother and father is created.
</div>
Now that mobile is over 70% from the internet market you can create something smart and responsive to do that.
You can create this very easy with only css, use a overflow-x:scroll for a container and a overflow-y:scroll for another container. You can easily position the container elements with width:100vw and height:100vh.
Middle click on the example to test it. Works best on mobile because you dont see the scroll bars.
body{max-width:100%}
*{box-sizing:border-box;}
.container{background:#ddd;overflow-y:scroll;width:500px;max-height:100vh;}
.header{background: pink;}
.body{background: teal;padding:20px;min-width: 100%;overflow:scroll;overflow-y:hidden;min-height:300px;}
.body >div{min-width:800px;}
<body>
<div class="container">
<div class="header">
Button 1 > Button 2 > Button 3
</div>
<div class="body">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</div>
</div>
</body>
No, it's not possible with pure CSS. That kind of positioning fixes the element in the viewport. I'd suggest simply fixing the element to one of the sides of the viewport (i.e. top, bottom, left or right) so that it doesn't interfere with other content.
Starx's solution was extremely helpful to me. But I had some problems when I tried to implement a vertical scrolling sidebar with it. Here was my initial code, based on what Starx wrote:
function fix_vertical_scroll(id) {
$(window).scroll(function(){
$(id).css({
'top': $(this).scrollTop() //Use it later
});
});
}
It's slightly different from Starx's solution, because I think his code is designed to allow a menu to float horizontally instead of vertically. But that's just an aside. The problem I had with the above code is that in a lot of browsers, or depending on the resource load of the computer, the menu movements would be choppy, whereas the initial css solution was nice and smooth. I attribute this to browsers being slower at firing javascript events than at implementing css.
My alternate solution to this choppiness problem is set the frame to fixed instead of absolute, then cancel out the horizontal movements using starx's method.
function float_horizontal_scroll(id) {
jQuery(window).scroll(function(){
jQuery(id).css({
'left': 0 - jQuery(this).scrollLeft()
});
});
}
#leftframe {
position:fixed;
width: 200;
}
You might say all I'm doing is trading vertical scrolling choppiness for horizontal scrolling choppiness. But the thing is, 99% of scrolling is vertical, and it's much more annoying when that is choppy than when horizontal scrolling is.
Here's my related post on this matter, if I haven't already exhausted everyone's patience: Fixing a menu in one direction in jquery
I stumbled on this post looking for a nice way to keep my header/navigation bar centered and responsive to size changes.
//CSS
.nav-container {
height: 60px; /*The static height*/
width: 100%; /*Makes it responsive to resizing the browser*/
position: fixed; /*So that it will always be in the center*/
}
//jQuery
$(window).scroll(() => {
if ($(document).scrollTop() < 60) {
$('.nav-container').css('top', $(document).scrollTop() * -1)
}
})
As we scroll, the bar moves upwards off the screen. If you scroll left/right it will stay fixed.
I realize this thread is mighty old but it helped me come up with a solution for my project.
In my case I had a header that I wanted to never be less than 1000px wide, header always on top, with content that could go unlimited right.
header{position:fixed; min-width:1024px;}
<header data-min-width="1024"></header>
$(window).on('scroll resize', function () {
var header = $('header');
if ($(this).width() < header.data('min-width')) {
header.css('left', -$(this).scrollLeft());
} else {
header.css('left', '');
}
});
This also should handle when your browser is less than your headers min-width
I just added position:absolute and that solved my problem.
This is a very old thread, but I have found a pure CSS solution to this using some creative nesting. I wasn't a fan of the jQuery method at all...
Fiddle here:
https://jsfiddle.net/4jeuv5jq/
<div id="wrapper">
<div id="fixeditem">
Haha, I am a header. Nah.. Nah na na na
</div>
<div id="contentwrapper">
<div id="content">
Lorem ipsum.....
</div>
</div>
</div>
#wrapper {
position: relative;
width: 100%;
overflow: scroll;
}
#fixeditem {
position: absolute;
}
#contentwrapper {
width: 100%;
overflow: scroll;
}
#content {
width: 1000px;
height: 2000px;
}
Updated the script to check the start position:
function float_horizontal_scroll(id) {
var el = jQuery(id);
var isLeft = el.css('left') !== 'auto';
var start =((isLeft ? el.css('left') : el.css('right')).replace("px", ""));
jQuery(window).scroll(function () {
var leftScroll = jQuery(this).scrollLeft();
if (isLeft)
el.css({ 'left': (start + leftScroll) + 'px' });
else
el.css({ 'right': (start - leftScroll) + 'px' });
});
}
If you want to fix it on the right, for example, use justify-content: flex-end.
More: http://www.w3schools.com/cssref/css3_pr_justify-content.asp
On parent div you can add
overflow-y: scroll;
overflow-x: hidden;
$(window).scroll(function(){
$('#header').css({
'left': $(this).scrollLeft() + 15
//Why this 15, because in the CSS, we have set left 15, so as we scroll, we would want this to remain at 15px left
});
});
Thanks
Yes, You actually can do that only by using CSS...
body { width:100%; margin-right: 0; margin-left:0; padding-right:0; padding-left:0; }
Tell me if it works
Very easy solution is:
window.onscroll = function (){
document.getElementById('header').style.left= 15 - (document.documentElement.scrollLeft + document.body.scrollLeft)+"px";
}
Sounds like you need to use position:fixed and then set the the top position to a percentage and the and either the left or the right position to a fixed unit.
I am making a layout with divs stacked on top of each other for the top navigation/banner. The layout looks fine in Firefox/Chrome/Opera but in IE there are spaces underneath each div in the top navigation.
I tried using 'clear: left' for each new line in hopes that it would delete the spaces but that did not work. Any help would be appreciated.
URL: Maggio Layout
You're missing a lot of essential HTML, starting with a valid doctype. Once you have this essential markup into place, many (if not all) of your errors may vanish. You can verify your markup by visiting the w3c validation service online at: http://validator.w3.org/
Use the following as a template:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Website Title Here</title>
</head>
<body>
<!-- Body Content Here -->
</body>
</html>
IE is really weird about having spaces in between tags (e.g. between a closing div and the next opening tag). Also you have an orphan closing A tag in your philright div.
Try removing those empty divs if they're not needed. If they are needed, set the line-height, font-size, and padding to all be 0.
You will never get IE to attempt to perform like the other far more modern browsers without a proper doctype. Put this on your first line and see where we stand:
The lack of a valid DOCTYPE declaration causes IE to render the page in Quirks Mode. As a result, for whatever reason, some version of IE's dreaded three pixel bug is active in full force and padding out your DIVs. The easy solution is to just specify a DOCTYPE and hope nobody will be watching from IE6 or worse. Otherwise, it will take some special hacks. For instance, you can add some conditional CSS to reduce margins by 6 pixels, like this:
<div id="wrapper">
<div id="top"></div>
<div id="philleft"><img src="philleft.jpg" alt="" /></div>
<div id="philright"></a></div>
<div id="philbelowleft"><img src="philbelowleft.jpg" alt="" /></div>
<div id="philbelowright"></div>
<div id="techleft" style="margin-top:-6px"><img src="techleft.jpg" alt="" /></div>
<div id="techright" style="margin-top:-6px"></div>
<div id="techbelowleft"><img src="techbelowleft.jpg" alt="" /></div>
<div id="techbelowright"></div>
<div id="testleft" style="margin-top:-6px"><img src="testleft.jpg" alt="" /></div>
<div id="testright" style="margin-top:-6px"></div>
<div id="testbelowleft"><img src="testbelowleft.jpg" alt="" /></div>
<div id="testbelowright"></div>
<div id="locationleft" style="margin-top:-6px"><img src="locationleft.jpg" alt="" /></div>
<div id="locationright" style="margin-top:-6px"></div>
<div id="locationbelowleft"><img src="locationbelowleft.jpg" alt="" /></div>
<div id="locationbelowright"></div>
<div id="rightbanner"></div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />
Lorem ipsum dolor sit amet, consectetur adipisit, incididunaliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor inlum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />
Lorem ipsum dolor sit amesed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exerliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="bottom"></div>
</div>
Just remember to make sure your implementation of it would actually be conditional. Or, you can toss the entire book of modern coding practices out of the window and format the page with tables instead of DIVs and CSS. This way you can be comfortably assured everything will line up properly while making any standards adherent reading your code want to bang his or her head against a brick wall (which your lack of doctype, html, head, and body tags is already accomplishing admirably). If you choose to go down this route, I recommend you uppercase all your HTML code.
If I were you, I would just specify a doctype and add the following code to all your pages:
<script>if (document.all && Number(navigator.userAgent.split("MSIE ")[1].split(";")[0])<7) alert("You are using an outdated version of Internet Explorer. Please update to version 7.0 or newer for the page to display properly.")</script>
With any luck, the popups on every single page will get them to either update or give up on visiting your site completely.