Home

Using the FLOAT:value property

Click the link to see w3schools documentation on FLOAT.
(The float property specifies whether an element should float to the left, right, or not at all.
Note: Absolutely positioned elements ignore the float property!
Note: Elements next to a floating element will flow around it. To avoid this, use the clear property or...
click on the documentation and see the clearfix hack at the bottom of the pop-up page.
Note: the clearfix hack is also good when the floating element is taller than the containing element (div) as it will overflow outside its container.)

And for documentation on CLEAR.
(The clear property controls the flow next to floated elements.
The clear property specifies what should happen with the element that is next to a floating element.)

Box 1
Box 2
Box 3
Box 4
Box 5
Box 6
Box 7

And I will clear the float: property by using
clear:both;

Above is using float:left; and
below is using float:right;

Box 1
Box 2
Box 3
Box 4
Box 5
Box 6
Box 7

And I will clear the float: property by using
clear:both;

Let's try floating some text LEFT and RIGHT of an image

Picture of a Spinning Top Here is some text that I want to 'float' around the LEFT HAND side of the spinning top picture.
With any luck it will do just what I want it to do...
...Please, please, pretty please !

Picture of a Spinning Top Here is some text that I want to 'float' around the RIGHT HAND side of the spinning top picture.
With any luck it will do just what I want it to do...
...Please, please, pretty please !

And I will clear the float: property by using
clear:both;

...And now let's try floating some text AROUND an image (sort of)

Picture of a Spinning Top Here is some text that I want to 'float' around the LEFT HAND side of the spinning top picture.
With any luck it will do just what I want it to do...
...Please, please, pretty please !

*****************
In order to accomplish this I had to :-

create one image (half width of 3rd image) that FLOAT:RIGHT and put text to the left of it.

then create a 2nd image (half width of 3rd image) with FLOAT:LEFT and put text to the right.

then create a larger 3rd image that gets displayed OVER the top of the other two images in order to cover them up and display it as one large image.





Hopefully, looking at the code may make it easier???

Here is some text that I want to 'float' around the RIGHT HAND side of the spinning top picture.
With any luck it will do just what I want it to do...
...Please, please, pretty please !

*****************
To do this I had to...
create a main [div] to hold ALL my element as a DISPLAY:FLEX

and set that to the width I wanted to display everything in.

Then create a second [div] (set as POSITION:RELATIVE) to put the 1st image and text in.

Then inside there I created a [p] to hold Images 1 and 3 and the text that displays on the right of the image.

In there I put image 1 (set as POSITION:RELATIVE;)

And also image 3 (set as POSITION:ABSOLUTE) - then I had to set the TOP and RIGHT & TRANSFORM positioning values so it ended up displaying over the top of image 1.

After that I created another [div] that would hold the 2nd image to FLOAT:LEFT so the text would then stay to the right of it.