Forum Moderators: not2easy
<table width="100%">
<tr><td width="200">Text 1</td><td>Text 2</td></tr>
<tr><td colspan="2">New Line Text 3</td></tr>
</table>
<div id="float_left_width_200">Text 1</div>
<div id="text_2">Text 2</div>
<div id="new_line">New Line Text 3</div>
Also, if the two peices of text you want side by side will be of different lengths, you may need to apply a margin-left equal to the width of the float, in order to prevent the longer text from wrapping beneath the float.
<STYLE TYPE="text/css">
<!--
#float_left_width_200{
float: left;
width: 200px;
}
#text_2{
clear: right;
}
-->
</STYLE>
<div id="float_left_width_200"><img src="test.gif" height="200" width="200" /></div>
<div id="text_2">Text 2</div>
<div id="new_line">New Line Text 3</div>
[edited by: iProgram at 2:21 pm (utc) on Oct. 6, 2004]
Text disappeared in what browser?
The problem is the background-color of #main. What's wrong with it?
<STYLE TYPE="text/css">
<!--
body{
background-color: #CCCCCC;
}#main{
margin: 10px;
background: #FFFFFF;
}#float_left_width_200{
float: left;
width: 200px;
}#new_line{
clear: left;
}
-->
</STYLE>
<body>
<div id="main">
<div id="float_left_width_200"><img src="temp.gif" height="200" width="200" /></div>
<div id="text_2">Text 2</div>
<div id="new_line">New Line Text 3</div>
</div>
</body>
If I remove the background-color of #main, or remove the clear: left; of #new_line, the texts appare again.
The 'simple' solution is to use the Holly Hack to apply a height: 1%; to the element causing the bug. The height value has to be delivered ONLY to IE browsers, and hidden from IE/Mac (which does not suffer from these bugs). USe the commented backslash hack to hide from Mac, and the star hack to give it only to ie...
/* hide from iemac \*/
* html YOURSELECTOR {
height: 1%;
}
/* end hide from iemac */
Now, the remaining question is which element is triggering the bug (that's what goes in place of YOURSELECTOR above). I think you want to put it on the non-floated element next to the float, in your case, "text_2." Try that and see if it works.
Also, you can read up on these bugs, how they work, why, how to fix them and why the fixes work, here [positioniseverything.net].
body{
background-color: #CCCCCC;
}
#main{
margin: 10px;
background: #FFFFFF;
}#float_left_width_200{
float: left;
width: 200px;
}#new_line{
clear: left;
}
/* hide from iemac \*/
* html .ie {
height: 1%;
}
/* end hide from iemac */
<body>
<div id="main" class="ie">
<div id="float_left_width_200"><img src="temp.gif" height="200" width="200" /></div>
<div id="text_2">Text 2</div>
<div id="new_line">New Line Text 3</div>
</div>
</body>
