Hello there every one,
I know that I’m going to ask a long answer question, but It will be very helpful If anyone could
Help my get some order with this subject…
There’s so much css commands that I don’t know when to use what and I’m like shooting in the dark…
What’s the difference between:
align/text-align/align-item | float | top left etc’ | using margins to center | and using of columns to move every thing
It’s like every thing is a giant mass right now.
Basically:
The element flow of a document is that all elements gravitate to the upper left of a document/page.
Block elements stretch to fill the width of a container, causing sibling elements to rest on top or below them.
Float refers to the alignment and wrapping of sibling elements or content around a block element. Float is analogous in a way to a word document. You can have one element occupy the left hand space of a container, and another occupy the right hand of a container.
Text-align too is similar to this, however it only affects elements residing in the content section of a container. If you are using mozilla firefox, their dev tools (though even chrome might have this) provide a diagram of an elements’ box model. Here is a sketch I made of it.
The flow of elements in a document gravitates to the left and top of all documents.
Block elements are elements that behave kind of like a tetris line block, they stretch across all available space taking up one ‘row’ of this document flow.
Inline elements do not automatically fill up all available horizontal space.
Therefore, assigning margin: 0px auto; will set 0px to the top and bottom of an element, but auto will cause left and right margins to be all available space of that container after calculating an elements width. So if you have a block element with a defined width less than it’s container, margin auto will respond to that.
Text-align has to do with aligning nodes in an elements content area. Gonna share a sketch I made of this
Top/left/bottom/right has less to do with flow or alignment and more to do with positioning. Position is defined by one of three states, relative, absolute, and fixed. If there are any others I missed it’s because I don’t use or understand them atm. Fixed places an element in a position relative to your browser, regardless of the document flow or scroll. Fixed elements persist in their position as you scroll a page. Relatively positioned elements are relative to their container. Absolute positioned eleents too are relative to the nearest parent container with a defined position, otherwise they are relative to the document root.
Using the top/left/bottom/right properties adjusts that elements position relative to whatever parent container they inherit.
Finally flexbox is a relatively new alignment system that replaces the old word document-like flow. The best way to understand it is to read MDN’s documentation on it and look at their diagram.
Thank you so very much! For of this.
So if understand you corectly,
Did I understand you correctly?
And can you relate it to the problemm I having in my code-pen?
Mostly, there are some elements which only are a single tag, therefore you cannot nest others inside them, such as <input type="" name="" value=""/>. Also W3C standards defines certain relationships between elements and how they should be used. They also further define and clarify specific types of content. While I described two types of element displays - block and inline - they also describe types of content and provide a vocabulary and associated APIs for HTML, They say the Editors Draft may be most up to date on this issue.
Yes, yet if you play with the position properties as I described you will find that it interrupts this behavior. For using position: absolute; left: 50%; top: 50%; will set your element to be 50% of the container/document width - only on the left hand side of the element though, as the top left of an element serves as an anchor point as well, just like the top left of a document.
To give you a better idea, a paragraph element <p> is a block element, but inside a paragraph you might use an <strong> inline element to embolden and make a word or phrase more significant.
Example
<p>Some paragraph with <strong>heavy emphasis</strong> on a word.</p>
Yes but it also affects how other elements and content flow around it. It can have adverse effects if you don’t understand what it does. Read more about it here
MDN Web Docs: float
The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning).
Yes. You can read up more about position below:
https://developer.mozilla.org/en-US/docs/Web/API/Positiona
I didn’t see your code included, but the best way to learn the CSS properties is ultimately practice and memory. I have not come across a solution yet that completely replaces the need to know the properties.
First, again, thabk you very for soending this time to explain all of this!
Im trying to make 2 container one align left the other right and nothing I did worked. and top of all that, when the screen is in mobile width,it get massier…
and I dont know if I need all the div or can I do it more simple…
https://codepen.io/nadav-himmelfarb/pen/mLREMO
I know the best why is to practice but right now I lost my legs and hands there and I need some anchor points to understand some ground roles
I’ve got a few little fixes, hopefully they’ll work for you:
1.) You’ve got two different Bootstrap versions linked on the page, just use the 4.0 and delete the second one. With any project you’re going to use BS with, you should always only use one version. As to which version to use, that’ll depend on what you’re looking to do, 4.0 comes with a lot of nice built-in flexbox functionality so that’s usually my recommendation.
2.) Change <div class="container-flowed"> to <div class="container-fluid"> that’ll get rid of that horizontal scroll at the bottom and also aligned to the two bottom divs. Though they might still not be exactly how you want them displayed, at the very least they’re side by side.
Thank you very much I’ll try it soon!
You said to choose one, how you pick witch?
Is every one just lern that there is,
align, margin, float, position, and start playing with all until thay understand it?
Well, I would say two factors in deciding which one to use is, what do you need to do and which version you’re more familiar with.
You can check out this article Bootstrap 3 vs Bootstrap 4: Should you move? What are the Differences? which goes over some of the differences between 3 and 4. Personally, I really like the move to using flexbox for responsiveness in BS 4. I’ve been using just flexbox on its own and I’m really enjoying it for doing portions of my layouts.
Yeah basically. I mean when I started learning HTML/CSS we were still using tables to do layouts. Then we moved on to using frames, then using layers was a huge thing, now it’s all about containers and working with blocks. Granted, it was kinda always about working in blocks but there’s a greater emphasis on it now. Now with the implementation of something like CSS Grid, we’re moving out of working with stacks of blocks into freely moving them where we want them when we want them to. It’s a huge improvement. It’s going to make designing layouts a whole lot more logical and easier to manipulate.
But yeah the BEST way to learn about align, margins, padding, floats, positioning, etc is to just play around with them. I would suggest setting up some codepens and just playing with each styling concept on a few test elements. Like make three divs for example and put float: left; on the first one and observe what it does. Then try putting it just on the second div, then try the third. Now try float: right; Then try floating let’s say the first one left and the second one right, what happens then?
Do the same thing for different types of positioning: position | CSS-Tricks - CSS-Tricks
Eventually the behavior gets predictable and you’ll start mentally connecting what you want to do with how to achieve it.
I’m just in my mm. starting my third week and it seems to me that,
If I’m looking at what I know right know, I’ts like all the stuff that we talking about is the very basic and right now I’m trying diffrent things for what I want to do an It’s fruqing hard 
So for what I’m doing right now, and correct me if I’m wrong,
I choose a container-fluid + row + col-xs-4 because I wanted an image to the right of it some text. If I’ll choose float insted the text will continue at the bottom of my image (wrapped) ?
this is the best way? columns ?
And more…
Y is it, that the 2nd img didn’t get my width=300px when the class .img-right was in the <div class="col-xs-4 img-right>
and only get it when I put it in the ? is it because the class in that div belong to bootstarp style ?
And Y when I putted position / float to the 2nd img, If it’s in the class=img-right
or in the nothing append, only when I entered to the <div class=“col-xs-4” this— col-xs-4 col-xs-push-8, only then it worked ?
I’v read all and see youtube on grid, flex and I dont how the thirs one called…
If iI understand correctly,
they all preffer to the way the content will be layout in the container. And I can give to flex, grid etc’ the position, mergin, align and so, but the float will not work on the flex and grid, and also I can’t give col-xs (and other columbs) to them becauseby default they spread as columns / rows or both ?
Am I right or…?
You are not supposed to use float in a flexbox. It’s a completely differen’t alignment system, so is a grid.
It sounds like your biggest challenge or obstacle right now may be that you are trying to understand CSS through Bootstrap. This is similar to when FCC introduces jQuery, and beginners try to understand Javascript through jQuery. It has to work the other way around.
Here is how you could easily go about doing this using the flexbox system.
.wrapper {
display: flex; /* DECLARES FLEXBOX ALIGNMENT ON THIS CONTAINER AND IMMEDIATE CHILDREN */
flex: auto 0 0; /* DETERMINES HOW CHILDREN ELEMENTS BEHAVE */
justify-content: space-between; /* ADDS SPACE EVENLY BETWEEN NESTED ELEMENTS BUT NOT BETWEEN ELEMENTS AND THE BORDER */
align-content: flex-start; /* CONTROLS ALIGNMENT OF ROWS WITHIN THIS CONTAINER */
width: 100%;
}
<div class="wrapper">
<div id="child1">Nested Child #1</div>
<!-- WHEN PAGE RENDERS, THERE WILL BE SPACE BETWEEN THEM AND EACH WILL BE ALIGNED TO EITHER SIDE OF THE div.wrapper CONTAINER -->
<div id="child2">Nested Child #2</div>
</div>
Im trying to understand how to put elements in the way I wireframe them and on the way Iv been intreduced to flex and grid I wanted the understand how my container work in each…
By the… col-xs etc sopposed to respond to position? cause it didnt work for me.
And if I whan that my left and right side will get 0px position so if I wanted to move element from the side I want need to calculate what is my px ther… like left is 260px and if I want to move my element 80px from the left I need to give margine-left: 340px? If I explaining my self correctly
Im trying to understand how to put elements in the way I wireframe them and on the way Iv been intreduced to flex and grid I wanted the understand how my container work in each…
By the… col-xs etc sopposed to respond to position? cause it didnt work for me.
And if I whan that my left and right side will get 0px position so if I wanted to move element from the side I want need to calculate what is my px ther… like left is 260px and if I want to move my element 80px from the left I need to give margine-left: 340px? If I explaining my self correctly
Are you going through the regular FCC Curriculum? I’m currently trying the new curriculum in beta and find it to be very relevant to modern development, the first few lessons cover all the questions you have asked. Element positioning and flow, centering with margin, position, and other alignment properties in CSS.
Nope, the old one… It’s looks interesting but I don’t know if I like to start everything all over 
But thank you very much and maybe I’ll dive in to the beta
It might be a good idea. The basic lessons/examples (within the first 10 HTML lessons) walk you through alignment, position. It covered everything we discussed on this post really.
Anyway, Yw!
By the way I checked it, and it’s great, first because I can review stuff and freecode… improve it very much with updated stuff.
So thanks man!