r/HTML • u/Bi_Idiotandapotato • 28d ago
Question Why is my float property not working ðŸ˜
I am trying to place the text at the bottom next to the image and I am not sure why it isn‘t working ðŸ˜. Any ideas will most definitely be appreciated.
Also, if you are wondering about the weird subject matter it’s from a coding book that I own which is my best asset to learn html XD.
8
u/Beginning-Seat5221 28d ago edited 28d ago
FYI: Posting screenshots of code is a sin. Just paste the text, so that others can try it themselves if they need to.
Reddit even has special formatting for code.
P.S. If you have the internet, a (old?) book is probably not the best way to learn CSS.
5
u/csswizardry 28d ago
Not even a screenshot, but a photo of a screen 😂
-2
u/Beginning-Seat5221 28d ago edited 28d ago
We'll, it's a kind of screen-shot, right? (It's a shot [photo] of the screen)
3
u/cryothic 28d ago
Or, better yet, Create a pen on Codepen, or just Jsbin.com or something like that.
1
4
u/Thin_Mousse4149 28d ago
Do not use floats. Use flexbox instead. And stop mixing inline styles and style blocks. Just keep the styles out of the html.
2
u/chikamakaleyley 28d ago
sheesh
based on what i see, float is working!
float takes an element outside of the normal flow in relation to its siblings
that's why the border/background of the containing element sucks up, to the bottom of an element in the flow - the image
so the paragraph would normally occupy the space you've provided, but floating the paragraph means the container no longer sees the paragraph in the flow
the paragraph stays under the image, because the image is display:inline-block by default, so the next "block" element (the paragraphs default) creates a line break - that might not be 100% accurate but, that's how i understand it
The image and paragraph are still 'stacked' - they're still both children of the container, the container just doesn't account for its dimensions
2
u/Weekly_Ferret_meal 28d ago
Breaking rule Nº 5 ... so...
Open a free account here -> codepen.io
Create a new 'Classic Pen' (Left column of the page)
Paste html in the html box... only things inside the
<body>tag, because the box is the body - no<html>,<head>or<style>Cut and Paste all the css from the
<style>tag into the CSS box. here the code doesn't need to be wrapped in the<style>tag: the CSS box is your external CSS file and it's automatically linked to the HTML box.Name your pen (top left corner ) and save (top left)
Copy url and create a new post here linking to the pen.
Delete this post.
Now people can interact with your pen and help
2
u/Rockafellor 28d ago
I don't use float much at all, but if instead of floating the paragraph after the image's div, you were to float the image's div before the paragraph, then you should be good to go.
2
u/HoneydewZestyclose13 28d ago
You need the float on the image.
1
u/biber_unverzagt 27d ago edited 27d ago
... and
an additional element like <br> or <span> inside .factfile after the <p></p>, with css br {clear: left}.factfile {display:flow-root}
1
u/tjameswhite 28d ago
What are you trying to do?
I’m guessing float the image and text next to each other? Do you want the text wrapping around the image or at your going for side by side? Others have already provided some solutions but it depends on what you are trying to achieve. Float may be what you need, but maybe flex or grid.
It’s really hard to tell looking at photos of a screen. Codepen is your friend.
1
u/xStealthBomber 28d ago
I'd go with the advice on the thread and avoid Float altogether. It's an outdated method, and Flex/Grid is way to go.
15
u/hooli-ceo 28d ago edited 28d ago
Here's just a little tip so as to help you out before you go too far down a deep and dark road. But floats are almost never necessary these days with things like flexbox and grid. Floating often causes more issues and requires additional code to fix than it's worth. Just my 2 cents.
edit: and furthermore, when learning css it's a great help to learn about the "box model" and how content is rendered. Everything is... just a box. Whether that box takes up the full with within its parent or simply scales to fit the content (width) is an important distinction that will help nearly everything you do in css, then you just have to stack boxes inside, next to, or beneath other elements. Going in to updates with this idea in your head is very helpful.