Menu
What I am trying to do is have rows of images, 6 images in each row. Some of these images need to have another image floating on top of them (flush with the lower-right corner). I was able to get that to work from this thread:
How do I position one image on top of another in HTML?
However, now I'm unable to get the new row after the 6th image. Neither <BR> or <P> create a new line. They simply push the next image down several pixels, but the image is still in the same line. It seems like the float style is interfering with the <BR> and/or <P>.
I tried using different styles for the image that starts a new row, like float:none and display:block, but neither worked. The odd thing is that the new line starts after the 7th image.
Here's what I'm using so far:
<style type="text/css"> .containerdiv { float: left; position: relative; } .containerdivNewLine { float: none; display: block; position: relative; } .cornerimage { position: absolute; bottom: 0; right: 0; } </style> <div class="containerdiv"> <img border="0" height="188" src="myImg" width="133" /> <img class="cornerimage" height="140" src="imageOnTop" width="105" /> </div> For the 7th image, when I'm trying to start a new row, I'm simply replacing the 'containerdiv' class with 'containerdivNewLine'.
589
Move the text cursor to where you want the new line to begin, press the Enter key, hold down the Shift key, and then press Enter again.
There are two methods to force inline elements to add new line. Using display property: A block-level element starts on a new line, and takes up the entire width available to it. Using carriage return character (\A): We can add a new-line by using the ::before or ::after pseudo-elements.
To clear a float, add the clear property to the element that needs to clear the float. This is usually the element after the floated element. The clear property can take the values of left , right , and both . Usually you'll want to use both.
I've found that you can move div elements to the next line simply by setting the property Display: block; On each div.
You need to "clear" the float after every 6 images. So with your current code, change the styles for containerdivNewLine to:
.containerdivNewLine { clear: both; float: left; display: block; position: relative; } you can also use
<br style="clear:both" /> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
