Small layout problem with...

Two column content

[tomda]

Hi, I currently use a simple two-column layout using style sheet.

#gleft {float:left; width:98px; margin:0; padding:0em; }
#gright {margin-left:102px; padding-left:0.15em;}

My layout is as follow :

<div id=gleft>-------<div id=gright>
PICTURE--------------TEXT 
</div>---------------</div>
 <hr>
<div id=gleft>-------<div id=gright>
PICTURE--------------TEXT 
</div>---------------</div>
<hr>
<div id=gleft>-------<div id=gright>
PICTURE--------------TEXT 
</div>---------------</div>

etc...

It works great except when the picture I insert in the left side is higher than the height of the text... In such case, I have to add some <br> at the end of the text so that the <hr> go to a new line.

This method works fine but because I have two stylesheets (web and print view) with different font size, I will never get it right!

Is there anyway, I can force the <hr> to be at a new line whatever the size of the text or the picture.

Thanks a lot
[Edit: Add some more explanation and formatting]

[jo1ene]

One problem I see is that you should not have multiple instances of an ID name. To use a style several times, use classes. (eg .gleft vs. #gleft) One thing that may help a little is setting img {display: block};

[supermanjnk]

add this to your CSS

hr{clear:both;}

[tomda]

Thanks Jolene and Superman

Jolene: Indeed, I forgot that ID is for unique element. Change to class has been done.

Superman: Thanks a lot Superman, it works great!