Home/ Questions/Q 470963
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T23:56:17+00:00

Html=> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> </head> <body>

  • 0

Html=>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
</head>
<body>
  <div style='border: 1px solid red; width: 100px;'>
    <a href="#">foo</a>
    <a href="#"style="border-color: blue; float: right;">bar</a>                
  </div>
something
</body>
</html>

I got problems with IE7 (IE6 support is not needed)

On IE7 rendered html looks like this=>
alt text

I need it to look like this (works on chrome/ie8 at the moment)=>
alt text

What should i change? 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to float both elements and clear it.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
</head>
<body>
  <div style="border: 1px solid red; width: 100px;">
    <a href="#" style="border-color: blue; float: right;">bar</a>    
    <a href="#" style="float:left;">foo</a>            
    <div style="clear:both;"></div>
  </div>
something
</body>
</html>

    Or simply put the floating element in front of the normal element like this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
</head>
<body>
  <div style="border: 1px solid red; width: 100px;">
    <a href="#" style="border-color: blue; float: right;">bar</a>    
    <a href="#">foo</a>            
  </div>
something
</body>
</html>

    Brief Explanation:

    Pardon my english and drawing, but here’s briefly how float and clearing works in cross browser:

    An element can be floated left or right. When you have element floating, the element doesn’t push “normal” content downwards. See why –

    Float and clear:

    alt text
    Legend: Orange/Float Right, Blue/Float Left, Gray Lines/Clear divider, Red Rect/bounds

    In this case, you have 2 elements of one line text – one float left, and the other float right. When floating, it will not push the contents downwards aka taking space. Thus if you do not use clear:both at the gray lines, the contents below will stack upwards between the 2 floating elements and thus may not be what you want.

    When you use clear:both below the floats, the content below the floats will be pushed as far as whichever float element is of highest height. This is shown in the diagram’s 2nd and 3rd section.

    Float only:

    alt text
    Legend: Orange/Float Right, Blue/Normal content, Gray Lines/the line that is divded with the next, Red Rect/bounds

    The blue normal content is already by default text-align: left;. Thus it is left oriented. You need the float to be in front of the normal content because you’re telling the browser to float from this line.

    You should experiment different conditions to see its effect: putting float in front, behind, float left right, clear both, clear right and left.

    • 0