PDA

View Full Version : horizontal line after float



bucz
Aug 9th, 2009, 07:37 PM
hi there

i want to put some float stuff, and below it, i try to put a horizontal line, but it does not work : ( no line appears. I have used HR and <P> with border-bottom, but no clue. check the code. thanks!



<div style="float:left; width:50%;">
<div style="float:right; margin-right: 10px;">
aaaaaaaaa
</div>
</div>

<div style="float:left; width:50%;">
<div style="margin-left: 10px;">
bbbbbbbb</div>
</div>
<p style="border-bottom: 10px;"></p>
<hr>

Scriptet
Aug 9th, 2009, 11:40 PM
The <hr> does not appear because you have floated stuff above it which you have not cleared via one way or another.

For example try (not the best method but just to show how to clear a float):


<div style="float:left; width:50%;">
<div style="float:right; margin-right: 10px;">
aaaaaaaaa
</div>
</div>

<div style="float:left; width:50%;">
<div style="margin-left: 10px;">
bbbbbbbb</div>
</div>
<p style="border-bottom: 10px;"></p>
<div style="clear:both;"></div>
<hr>

and you will see the <hr> will now appear.

Next, the P border does not appear, because you are only speicfying the size of it. You must at minimum speicfy a border size AND a border style for it to appear.

For example:



<p style="border-bottom: 10px solid ;"></p>


Now you will see it appears. However it is better to get into the practice of specifying the color of the border aswell, which would be like:


<p style="border-bottom: 10px solid green;"></p>