Forum Moderators: not2easy
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
#test {
float: left;
width: 300px;
height: 240px;
}
#stuff {
display: inline-block;
width: 600px;
height: auto;
}
</style>
</head>
<body>
<div id="test">Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test</div>
<div id="stuff">Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff</div>
</body>
</html>
The code works just the way I would like it to in Mozilla Firefox, however in IE7 instead of wrapping the "stuff" div text around the "test" div, it places the "stuff" div to the right of the "test" div.
Is it possible to have the text wrap in IE7 the way it does in Firefox?
Thank you! :)
Is it possible to have the text wrap in IE7 the way it does in Firefox?
Yes :)
------------------
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {
height:100%;
}
#wrapper{
max-width: 600px! important;
height:100%;
margin-left:auto;
margin-right:auto;
padding:10px;
color:#FFFFFF;
background-color:#666666;
}
.corner {
float: left;
width: 40%;
height: 300px;
color:#000066;
background-color:#999999;
margin:15px;
padding:10px;
overflow:scroll;
display:inline;
}
#around {
float: right;
display:inline;
}
.shading{
color:#CCCCCC;
background-color: #000066;
}
</style>
<title>
Stuff and Test
</title>
</head>
<body>
<div id="wrapper">
<p>
You can delete this whole paragaph - it's just here to show/prove how it all looks
<br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum adipiscing. Pellente purus diam, posuere
accumsan, tristique eget, gravida id, nulla. Viva mus pulvinar velit sed leo. Etiam con sectetuer venenatis libero.
Phasellus sed justo eget augue ultrices blandit. Aenean elit. Praesent nec metus. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. In auctor egestas justo. Suspendisse potenti.
Maecenas leo mauris, pulvinar vitae, consequat ut, mollis eu, enim. Integer consectetuer commodo eros.
Phasellus ut arcu. Sed pellentesque, nulla eget faucibus pulvinar, sem augue consectetuer massa, in facilisis
mi elit in diam. Mauris fringilla.
</p>
<div class="corner">
<div class="corner">
<p>
<pre>
.corner {
float: left;
width: 40%;
height: 300px;
color:#000066;
background-color:#999999;
margin:15px;
padding:10px;
overflow:scroll;
display:inline;
}
</pre>
This div has <code> overflow:scroll; </code> just in case there more text than the space
(<code> width: 40%; height: 300px;</code>) can accommodate
<br/>
<br/>
If there's <b>definitely</b> going to be MUCH less text than will ever fill this space, then MAYBE
delete the <code> overflow:scroll; </code> and get rid of the scrollbars
<hr/>
Etiam euismod egestas turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Nullam congue, ante cursus elementum egestas, lacus tortor rutrum nisl, sit amet mattis orci lorem at felis. Mauris
euismod, velit id aliquam tristique, ligula ante luctus justo, et tristique diam dui eget magna. In hac habitasse platea
dictumst. Ut consectetuer, sapien euismod condimentum convallis, sapien ligula semper mi, at lacinia metus justo
ut arcu. Duis sapien massa, pharetra vitae, porta sed, sollicitudin et, sapien. Suspendisse id mauris vel quam fermentum
placerat. Donec aliquam quam dignissim mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nunc vel tortor. Ut lacinia scelerisque arcu. Aliquam erat volutpat. Ut consequat urna at est.
</p>
<p>
Mauris erat. Praesent ligula elit, egestas vitae, bibendum non, sagittis et, ipsum. Aliquam erat volutpat. Fusce dignissim.
Morbi quis risus. In turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla
accumsan mattis augue. Ut non lorem. Mauris vestibulum lorem nec mi. Maecenas lacinia justo fringilla neque. Aliquam
erat volutpat. Cras in nisl. Proin tortor. Aliquam mattis, nisl ut facilisis ultrices, erat massa tincidunt erat, id ornare elit
dolor sed urna. Vestibulum aliquam ante vel odio. Pellentesque mollis nisl sed dui.
</p>
</div class="corner">
</div>
<div class="around shading">
<div class="around shading"><pre>
#around {
float: right;
display:inline;
}
.shading{
color:#CCCCCC;
background-color: #000066;
}
</pre>
<hr/>
<p>
Vivamus imperdiet commodo mauris. Nunc metus mi, dapibus quis, mattis vitae, malesuada ut, ligula. Pellentesque
sed nisi sed libero faucibus egestas. Morbi tincidunt, turpis sit amet suscipit euismod, felis eros auctor metus, sollicitudin
nonummy pede elit non nulla. Vivamus pretium dolor et magna. Mauris porta diam sit amet augue. Ut mollis vehicula dui.
Nulla facilisi. Praesent vehicula vestibulum nibh. Suspendisse magna ac libero.
</p>
<p>
Phasellus sed purus tincidunt enim lacinia consequat. Donec mollis dolor sed purus. Fusce fermentum massa. Sed feugiat
nisl a est. Morbi in sapien vel massa cursus consectetuer. Sed condimentum sollicitudin dolor. Aliquam erat volutpat. I
nteger facilisis eros. Morbi viverra est ut nisi congue aliquet. Aliquam erat volutpat. Vivamus ultricies feugiat massa. Ut
pharetra mauris nec ante. Etiam lectus velit, vestibulum a, suscipit id, dapibus at, elit. Curabitur libero mi, molestie quis,
suscipit quis, placerat non, nibh. Donec non leo. Nulla nec massa ut velit gravida pellentesque. Quisque vitae odio.
Suspendisse placerat ullamcorper odio. Donec id lorem. Quisque convallis diam feugiat ante.
</p>
<p>
Suspendisse nisi erat, facilisis sit amet, suscipit vel, luctus eget, tellus. Morbi lorem diam, tincidunt non, ornare eget, malesuada
at, metus. Duis eleifend. Nulla facilisi. Morbi neque. Praesent sollicitudin eros at dolor. Suspendisse facilisis condimentum elit.
Nunc hendrerit consectetuer urna. Duis in libero. In sed nunc. Morbi congue felis. Nulla pellentesque ornare enim. Pellentesque
lacinia. Donec interdum nibh eu massa. Ut vitae leo nec diam volutpat auctor. Fusce nec metus vel massa fringilla pretium. Cras
id mauris at quam viverra fermentum. Mauris nisl felis, auctor a, congue vel, commodo eget, arcu.
</p>
<p>
Nunc felis urna, dictum a, mollis et, consectetuer at, tortor. Nam imperdiet dolor ultricies lorem. Phasellus justo diam, lobortis
quis, pretium non, elementum in, nibh. Sed erat. Aenean non lacus. Sed tristique blandit nisi. Phasellus sodales, leo sagittis
lobortis accumsan, libero tortor consequat mi, sed ultricies orci massa id ante. Curabitur non orci. Vestibulum hendrerit nisi sed
erat. Pellentesque vel pede laoreet orci euismod pellentesque. Cras quis pede id libero placerat blandit. Maecenas ligula.
</p>
</div class="around shading">
</div>
<p>
Vestibulum adipiscing. Pellente purus diam, posuere accumsan, tristique eget, gravida id, nulla. Viva mus pulvinar.
Phasellus sed justo eget augue ultrices blandit. Aenean elit. Praesent nec metus pellentesque habitant morbi.
</p>
<p>
Tristique senectus et netus et malesuada fames ac turpis egestas. In auctor egestas justo. Suspendisse potenti.
Maecenas leo mauris, pulvinar vitae, consequat ut, mollis eu, enim. Integer consectetuer commodo eros.
Phasellus ut arcu. Sed pellentesque, nulla eget faucibus pulvinar, sem augue consectetuer massa, in facilisis
mi elit in diam. Mauris fringilla.
</p>
</div>
</body>
</html>
#wrapper{
max-width: 600px! important;
height:100%;
margin-left:auto;
margin-right:auto;
padding:10px;
color:#FFFFFF;
background-color:#666666;
}
The "max-width: 600px! important;" in this little bit of code was extremely helpful. I have never seen this before.
