Can someone help me understand Float and positioning in Html?

Question

I'm having a hard time arranging multiple elements on a web page. it all just jams up :(

Answer 1

In HTML you can use float, grids or flex box. For positioning I would recommend using flex box because I think it easier to understand and less tricky than float.

To make your elements float the way you want it:
- you should always "clear:both", left or right depending on which side the element is floating

- make sure that your elements width, (height) are not larger than the the page width when added up or they won't float next to each other

-------- Here is a sample code --------

<div>
<p class="left">
This paragraph will float on the left side of the page.
</p>
<p class='left'>
This one too will float next to the first para...
</p>
<p class='clear-left'>
This one here won't float.
</p>
</div>

---------- css ----------

.left{float: left}
.clear-left{clear: left;}

They all in the same block element, applying a float to one element will normally make every element in that block float next to the floating element, by clearing one side or both, the other won't float.
Hope it help.

Answer 2

HTML positioning= Try opening the HTML Fundamentals course again and read the part you didn't understand. I had the same problem before

Float= Sorry I can't help : (

Answer 3

Here an example of the sample code above using flex box

<div class='row'>
<p class="column col-1>
This paragraph will take 50% of the left side of the page.
</p>
<p class='column col-1>
This one too will take 50% one the right side and will be displayed next to the first para...
</p>
</div>

-------- CSS ---------

.row {display: flex}
.column {width: 100%}
.column.col-1 { flex: calc(100/2)}
.column.col-2 {flex: calc(100/3)}

Column width: 100% means the element will take all the width available on the page.
So if you want to have 3 elements display horizontally, you divide 100% by 3 that why I used the expression calc(100/3) which means each elements will occupied about 33,3333% of the page.

The columned element should be wrapped in div with the "row" class which defines how the element should behave.

I omitted a few elements like, the overflow, etc... they make sure that there are no unexpected behavior.

It also important to use browser syntax like Mozilla and WebKit browser like safari

For Mozilla: .row { display: -moz-flex}
For safari, chrome: . { display: -webkit-flex}
And so on

Answer 4

wow awesome. helps!!
What of the flex box??

Answer 5

https://code.sololearn.com/W9LF44ZKo5py/?ref=app

In this code I've used flexbox check it out go to the CSS and scroll down it section so you should see flexbox

Answer 6

@king Emma you're welcome

Answer 7

Thanks mate!

Answer 8

A Float is expressed a number as fractional value as 1.00, 2.00, 3.00, 1.5, 1.50, 1.75, 1.83, 1.333333333333 etc.

An integer means full value,it has no fraction,so it's expressed as 1, 2, 3, 4, 5, 6, 7 8, ...100 etc.

A integer can convert into float and this float is expressed as 1 to 1.0, or 1.00

A float can convert into integer by omitting It's fractional part as 1.333333 to 1, 2.75 to 2

More about Float
https://www.sololearn.com/learn/JUMP_LINK__&&__Python__&&__JUMP_LINK/2272/

[Prabhat Thakir ]

A floating point number is a extension of an older format ,called fixed point numbers.A fixed point number. would store a fixed number of digits before and after the decimal point (in binary).for example ,+1110101.00001000 is an example of a 16 bit fixed point number in 7.8 format(one bit is spent on sign).
The term double is short for "double precision floating point number ".it literally means that twice as many as bits are used in storing it as a regular floating point number.on a typical modern machines,floats are 32 bits( 1 but for sign,8bits for exponent,23 bits for value),while doubles are 64 bits(1 for the sign,11 bits for exponent and 52 bits for the value).

Answer 9

leftandtop

Answer 10

left and right

Answer 11

dhzgrtkcxb;nxbnid[xn[sopgnofnnsnhgungfpfngpfbnfpsdgipbfgbjbgjdgbdkjgnvdlggdphgpusgfjpknsfkdspsdkgnjfdbdnggggggggggggggggggggggggggggggggggggggggggggggggggggggggggpsdorp[nbpsngfgns[ngn gsp[gjdhzgrtkcxb;nxbnid[xn[sopgnofnnsnhgungfpfngpfbnfpsdgipbfgbjbgjdgbdkjgnvdlggdphgpusgfjpknsfkdspsdkgnjfdbdnggggggggggggggggggggggggggggggggggggggggggggggggggggggggggpsdorp[nbpsngfgns[ngn gsp[gjdhzgrtkcxb;nxbnid[xn[sopgnofnnsnhgungfpfngpfbnfpsdgipbfgbjbgjdgbdkjgnvdlggdphgpusgfjpknsfkdspsdkgnjfdbdnggggggggggggggggggggggggggggggggggggggggggggggggggggggggggpsdorp[nbpsngfgns[ngn gsp[gjdhzgrtkcxb;nxbnid[xn[sopgnofnnsnhgungfpfngpfbnfpsdgipbfgbjbgjdgbdkjgnvdlggdphgpusgfjpknsfkdspsdkgnjfdbdnggggggggggggggggggggggggggggggggggggggggggggggggggggggggggpsdorp[nbpsngfgns[ngn gsp[gjdhzgrtkcxb;nxbnid[xn[sopgnofnnsnhgungfpfngpfbnfpsdgipbfgbjbgjdgbdkjgnvdlggdphgpusgfjpknsfkdspsdkgnjfdbdnggggggggggggggggggggggggggggggggggggggggggggggggggggggggggpsdorp[nbpsngfgns[ngn gsp[gjdhzgrtkcxb;nxbnid[xn[sopgnofnnsnhgungfpfngpfbnfpsdgipbfgbjbgjdgbdkjgnvdlggdphgpusgfjpknsfkdspsdkgnjfdbdnggggggggggggggggggggggggggggggggggggggggggggggggggggggggggpsdorp[nbpsngfgns[ngn gsp[gjdhzgrtkcxb;nxbnid[xn[sopgnofnnsnhgungfpfngpfbnfpsdgipbfgbjbgjdgbdkjgnvdlggdphgpusgfjpknsfkdspsdkgnjfdbdnggggggggggggggggggggggggggggggggggggggggggggggggggggggggggpsdorp[nbpsngfgns[ngn gsp[gjdhzgrtkcxb;nxbnid[xn[sopgnofnnsnhgungfpfngpfbnfpsdgipbfgbjbgjdgbdkjgnvdlggdphgpusgfjpknsfkdspsdkgnjfdbdnggggggggggggggggggggggggggggggggggggggggggggggggggggggggggpsdorp[nbpsngfgns[ngn gsp[gjdhzgrtkcxb;nxbnid[xn[sopgnofnnsnhgungfpfngpfbnfpsdgipbfgbjbgjdgbdkjgnvdlggdphgpusgfjpknsfkdspsdkgnjfdbdnggggggggggggggggggggggggggggggggggggggggggggggggggggggggggpsdorp[nbpsngfgns[ngn gsp[gjdhzgrtkcxb;nxbnid[xn[sopgnofnnsnhgungfpfngpfbnfpsdgipbfgbjbgjdgbdkjgnvdlggdphgpusgfjpknsfkdspsdkgnjfdbdnggggggggggggggggggggggggggggggggggggggggggggggggggggggggggpsdorp[nbpsngfgns[ngn gsp[gjdhzgrtkcxb;nxbnid[xn[sopgnofnnsnhgungfpfngpfbnfpsdgipbfgbjbgjdgbdkjgnvdlggdphgpusgfjpknsfkdspsdkgnjfdbdngggggggggggggggggggggggggggggggggggggggggggg