 Welcome to this third part of the CSS lecture and we have now talked on about the style in CSS and how things are how individual elements are styled. We'll go now into positioning of elements and the first thing to start off with is the CSS box model which is an important thing to understand in order to see how things are layouted, how they are rendered on the browser screen. So when a browser renders HTML when it draws it what it does is it draws a box around each element. You have already seen that when I for example gave a background color to a diff or to a text element you saw that it was basically a rectangular box and that's exactly what HTML does. You have the content area itself so if you for example have a paragraph that's just the area of your text but then there are optional areas around it and you need to understand these in order to do the right layouting. The first thing you add is a so-called padding so you can add a space around the content just white space so for example to leave some space from the previous element or to the above part on the vertical axis so that's around the content itself and then you can have a border so here this is shown rather big but it's just like the ultra-most piece here you can just add a border around it and then finally you have something that's called the margin that's similar to the padding it's a space around the element but the difference is now that the margin is outside of the border so if you want to draw a border it will basically be the space around it and maybe the best way to look at that is the box model example in the material for this lecture and you will see that I have just done a single div with a number of things we'll go into them into detail but I've basically given different colors to two different parts of the element and we can maybe just open that and you'll see some parts of that already so as you have let's have a look at the code again you'll see that I have added a certain margin to the right side I've added a background color to the whole box and I have added a border and a padding and these are the different things that essentially show up here if I resize it you see that the padding is essentially the space around the entire diff here so it's the space that is within the red area so basically it's still part of the element it also gets the background color so it's just space within the element the border you might not see it's a very subtle line here because it's just one pixel but I could just change that to visualize it so if I make the border 10 pixel instead of one you'll clearly see that there is a border around it and then the margin you actually don't see very well because I've added it to the right side it's the spacing here on the right because remember this is a diff it's a block element it should take the entire horizontal space but you see that there is clearly something missing here and that's exactly the margin so I have basically added space outside of the element to make this clearer I could also instead of on the right side I could add it to the left side and then you'll see that there is now a certain spacing there on the left which is 10 pixel and if I make this larger then it will basically move to the right side that's the margin let's just for completeness add some to the top if I do this then the element goes down so essentially what I have are these four elements I have the content itself in this case it's everything that's within the diff I have the padding so that's still part of the element that gets for example the same background color then I have the border and then I can add space outside that will just be drawn as white space or as space with the background color of the parent element so these if you understand these concepts well enough you'll be able to lay out things as you like and you have already seen I've used this left right and so on and CSS will use these orientations to say left right top and bottom now this is just a concept here now we look into how you actually assign the different properties if we look at the content you can do things like the width how wide is the element so even if it's a block element you can say this element should just take 10% of the horizontal space you can also do min and max so you can enable the element to grow and to shrink over time but you can say that okay the element if you zoom in or if you extend your window size the width increases but only until 500 pixels then it stops basically and similar with minimum you can say that even if you make the window very small it should have at least minimum 200 pixels similar to the width you can also assign the height so the vertical spacing and as discussed before you can use relative measures such as percent or em and you can use absolute such as pixels looking at the examples that's exactly what I did here I assigned the width to 60% and that's also the reason why even though there's only 10 pixel on the right side it looked like there's much more space here that's basically because the element itself is only 60% wide now the important thing is the width here is just for the content so if you have a border the size of the border is on top of that and if you have a margin that margin is also on top of it the only thing that's included in here is the padding so basically you are assigning the width of the content box and the padding now the padding you can you can define in very different ways and the same goes by the way for the margin so it will be exactly the same just instead of padding will say margin you can use this one here padding 20 pixel and that basically means we apply 20 pixels of padding on every side so top bottom left and right so if you want to have the same padding in all directions you just use a single value if you use two values then you assign vertical and horizontal space so here we will have 70 pixel at the top 70 pixel at the bottom 0 to the left and 0 to the right there's also this one here which now it gets cryptic you can look up these things but you can have 10% to the top 20% horizontal space so 20% on each side and 5 on the bottom and last but not least you can also assign individual ones by saying padding minus left 10 pixels then it's just here and the same is for all the other dimensions so you can use padding right you can use padding top padding bottom that's the padding we can first maybe jump to the margin because it's analogous basically you can go 20 pixel to the to all directions so if I just do like that it's again as we're padding in the top in the bottom in the left and in the right you can also use auto which just basically tries to align them with other elements now let's look at the borders finally there you can define a number of different things you can define you have this shorthand notation which basically requires you to write three different things one is how large is the border how is the thickness in this case we have a one pixel border what's the style is it solid like here or is it dashed there are other values for this which you can look up in the references I actually don't know them all and then you have the color so one of these color names in CSS what color should the border have but you can also assign these separately so you can say border with one pixel and then it's just instead of this value here you have a single declaration border style border color are the other two instead of setting the entire border you can also just set parts of it so if you do border right it will just assign the border here to the right side and then use the same values as above and finally you can use something that's called border radius to round and the edges here so that's just the radius and again it's the different corners so I guess that's top left but you can experiment with those we can maybe just look into our example so there's one thing I'll get into in a second and that's this box sizing here but what I've done here is I've assigned a 10 pixel solid black border and now we can maybe add a border radius and then let's try with 10 pixel 20 pixels 30 pixel and 40 pixel that's the maybe the best way to see the differences and you'll see that this is the smallest one and then increases in this direction this one has the largest radius so the values go from top left clockwise so that's something else you can do but essentially this way you can get all the different styles you'd like to have okay the last thing that you find in here and I honestly don't remember whether I have it in the slides I believe I don't know is the box sizing property here and one of the issues I already mentioned is that the width property in the content this applies to the content element and the padding but not the border so if you want to have an element that's exactly 500 pixel then you would somehow have to calculate how thick the border is and that might lead to problems so for example if you have exactly 500 pixel screen size and your content and your padding together a 500 pixel if you add a border you suddenly have a break you suddenly doesn't fit anymore you get scroll bars or something like that and quite often you would like to have the width for exactly the element including the border and that's exactly what this box sizing property does so if I use this border box property here if I declare it this way then my 60% width here are for the content for the padding and for the border so now these one pixel on each side are included in the width basically so that's a useful property when you want to exactly define the size of an element including the border and I mean the example has a lot of different things so you just play around with that and change different properties to see what happens okay so as we discussed padding versus margin is basically the space around an element and the space within an element and another way to look at that to get a better feeling for it is to go into Firefox and look at the inspect element property so if I just click on here and I say inspect element I'll get a pop-up and you'll see if you go to the inspector view well first of all you see the code which is very nice because you can actually change things in here and see directly what the effect is so now I've added hundred pixel and something happened if I change this to left you will see that the element jumps around so you can make changes live and see whether it's what you want to do but the other interesting thing is if I click on here you see down here if I resize my window you'll see that there is a picture of the box model so this actually shows you exactly how the different sizes are and if you for example go on content you get up here on the screen you you get a visualization of how the box looks like for the content if you go on padding you see exactly the padding if you go on border the border is visualized even though you do not see that here because it's too small and if you go on margin you actually see the margin which is just the yellow part now on the right side of my element so this can help you for debugging if you want to know what's happening you also see that actually because of this 60% rule and so on the the size here is not exactly one pixel but it's actually 0.833 so there are some strange things happening okay so that's just an excursion it's a very useful element also when you do the assignments this might help you a lot to see what is going wrong and where your problem lies because this padding was margin is something that as a beginner you easily can get wrong now what we have discussed for the box model is about one element so one paragraph one diff has a box but of course in most cases you have more than one html elements and then the question is how is the layout done and what html does or what the browser does is has a so-called flow of elements and by default that's just the order in which they are specified so if we look into this element this part again you have we have h1 and then we have p and then we have h1 again and p and the flow the layout would simply be that this element is drawn before this element before this element and so on so by default the browser just goes through the tree and draws the elements after each other and it draws them depending on their display style so if it's an inline element it just continues where it currently is it takes as much horizontal space as it needs and it draws the box if it's a block element it starts a new line it takes all the horizontal space there is also you can set the display style using CSS to none then it's simply not drawn it's not in the flow of elements and now a lot of the positioning that you would like to do how to lay out things is not like that you would like to change things so for example instead of having two diffs under each other because they're block elements maybe you want to have them next to each other and there are a number of ways to do that to change the positioning to change the flow and we will look into three different ones we look into float which is is a fairly difficult way actually to do it but it's it used to be quite common there is a position element which is a bit more complex maybe and then nowadays there is flexbox which simplifies the process quite a lot now just as a reminder you have to remember the difference between block and inline so the block elements take all the space and a new line inline just as much as they need that's an important part you can change this display style so that's the first thing you can say display colon block then the element has a block style even though if it's for example a span tag it still gets a block display or the other way around you can say it's inline and the last one at least you have display none that simply means the element is not displayed it is not on your browser window you can also set something that is called inline minus block and that's sort of a hybrid between the between the two so it behaves as an inline element it doesn't take a new line it doesn't take as much space as it needs but you can additionally set the width and the height of the element because if you have an inline element and you try to set these properties nothing will change they will just be exactly the same so for example if I take this span tag here and I set the width to 100% it will still look exactly the same it will not take all the horizontal space so to avoid that you can use the combination of the two now floats are a definition and CSS that basically tell the element to float to kind of move into a certain direction so if I say float left then the element kind of sticks to the left side and all inline elements float around it so they basically go to the right side of it and when you want to do that is usually when you want to have blocks next to each other so you want to have for example three boxes in the same line horizontally and you could just for the first one you get to say float left and then the next one will just stick to the right side of it so if you want to have multiple divs next to each other then that's a way to do it or if you want to have a text next to an image let's look at the example of how to do that and there's more coming on the slides but essentially what you see here is a number of divs and you see that I've set them here to 33% so together the 99% of the width they do fit next to each other and I've set the property to float left if you look at what happens is that they are actually somewhat next to each other not completely and that has a bit to do with the with the sizing but if I remove the floating here then you'll see that the text the paragraph is suddenly under so it it still sort of behaves as a block element even though it's smaller there's still a line break so the paragraph gets added under the diff if I introduce the float again it basically tells the browser the next element that comes should kind of be here it should just be to the next of it because this element is floating to the left side so that's why suddenly you have this one here and you can do the same with the two different diffs here so if you look into that you'll notice that these two diffs are just next to each other so I have a line break and then I have two diffs and usually without the float they are under each other so if I remove this here then one diff and the next one if I added then we have two diffs next to each other now this is 33% this is 33 and the next one is 48 and that's actually why the three of them don't fit next to each other so this is why this diff ends up in the next line if I would instead set this to 33 we should suddenly have three boxes next to each other we don't so I probably have done something wrong let me see I have set maybe it's the margins that cause problems here I don't remember it could now the border is included left I do think this should work yeah so now they are next to each other so you already see that messing around with these margins can already cause the problem because here we have added another 2% to the width and then we have 99% plus 2 is 101 so that this box does not any more fit into the same line that's why before that there was a line break so these things can be quite tricky but using the float you can manage that you suddenly have block elements next to each other even though usually they should start in a new line so that's one of the ways to achieve multiple boxes multiple block elements within the same line then you have the position property and this just defines how the position of one element one box is relative to the regular flow so usually you have this you have one element and the next one then the next one and or they could be under each other and you could just set certain offsets to that so the default aesthetic is just the browser does as it should do it leaves a certain space and then after it leaves another space but then you can set the position in a different way one of them is so-called relative where you say that the position should be as usual but there is an offset on top of that so in this case we have added 20 pixel in the top and 20 to the left so the element kind of shifts a bit downwards so you still rely on the regular on the regular positioning but you change it slightly actually I do not have that here I should maybe add it in the examples now the other thing is an absolute position so that's simply you ignore the regular flow you ignore that usually the element should be here and you just say the element should be 20 pixel from the top 20 pixel from the left and I'm fairly certain that this year is a spelling mistake this should of course be absolute so then the element ignores the other flow and it's always 20 pixel from the left and from the top no matter how you position the the page we can maybe try that quickly just so that we have it in the code we can just change this diff this is all fine we just remove the floating and we add the position information so we say top 20 left 20 now we check what's in there it says if you use the box sizing you'll see that suddenly the element is down here so it up here it doesn't care what what else is there it always just leave 20 pixel up here 20 pixel up here and I don't know how much of this we can see in the visualization yeah you'll see here that the 20 and 20 element is this position left position top so that's the kind of stuff you can do with positioning and you see that it always stays there no matter what I do and also if I would have a scroll bar it would be the same thing you would still have the element in the top we can maybe visualize that by adding a very large padding to the top here then we should get scroll bars and now you see it always stays at the very top it doesn't scroll with it there is a final property that is called sticky I'm skipping that here but that would for example achieve that in my example if I scroll that it still stays within the screen it still displays all the time okay these things position and floats are convenient but they're also quite difficult to get right so for example if you have a number of floats together there are can be strange things happening you you saw the picture in the very beginning of the slides of this text going out of the box those things are kind of typical behaviors that when you don't get your your sizing and your positioning right that suddenly things happen that should not happen and this has been one of the big headaches with CSS and now one of the recent changes is to add facilities that make that easier and one of them is flexbox so flexbox is is a technique in CSS that helps to make positioning of multiple elements much much easier and what flexbox does is basically introduce a number of properties for container elements like this so elements that just contain other stuff and the items within those containers so that's what we typically want to do we want to have boxes and these boxes contain for example links text whatever and they are layouted in different ways there is a great introduction in in reference number seven probably much better than what I can discuss so if you do not understand what I'm talking about please have a look at that flexbox knows a number of concepts it knows a so-called flex container so you define a container element that contains other things and within that you have so-called flex items so those are the things that move around those are for example our diffs that should be next to each other the flex container has a main size that's the width you define it has the so-called main axis and has a cross axis and that's the things you define but we'll get into details now now the first thing you define is the flex container so here we have just a container we basically have an element that is of class container and the very first thing you define is display flex so that's just telling CSS for this element just use flexbox so that's basically switching flexbox on and then you have a number of things that help you making this simpler first one is flex direction row so in this case we just tell flexbox that the flex items should be horizontal so the second item should be to the right of the first item instead of going downwards so we basically follow the main axis we set the main axis to horizontal the next thing is flex wrap and that just tells that if I set it to wrap it means that if we run out of space if the items are too large you should wrap around so they should get go to the next line sometimes you want to avoid that so maybe sometimes you always want to have them next to each other and if they get too large then you just want to scroll but in many cases you say that if the screen size gets too small then please wrap them so it still fits without scroll bars then we have justify content that is about the spacing between the flex items so in this case I do space evenly that means that there is always the same space between the items and between the flex container that's a good one and finally you can decide how to lay how to align the items vertically so according to the cross axis if I set this to center then they are like they are here so basically that the middle of each item is aligned you could also define it that for example this box ends up at the top this would be a top alignment if you want to know all the different properties you can set please refer to the seventh reference let's quickly look at the example so here what I've done is I have a diff which I have given the class container so this is my flex container and in there I have a number of diffs that are all of class item and you'll see now if you look up here that I've basically given the container class the flex box property so this container behaves like flex box and I've used exactly the properties from the slides so I'm doing horizontal flow I'm wrapping when there is not enough space there is an even spacing between the elements and on the vertical axis there are aligned central we can have a look at that just to give you an impression you see that the diffs are next to each other we have four diffs I've just given them four different colors you see that the spacing here there's currently no space between them we can check that in a second but that's an important thing to note now one interesting thing is I have set this to wrap so the boxes should wrap around but they don't do that really and that's because I don't I haven't set them any specific size I haven't set the width to for example 100 pixel and that means by default in HTML the size just changes when I when I reposition they just take as much space as possible but that's why I don't have any wrapping behavior if I go in here and I would for example say now I have to check now I've set other properties we'll get into that so this is the container and then you can give properties to the items that are within that in my case that's the diffs within there they are all of class item and I could give them an order and I can give them for example a growth property how large should they be that means a number of things so first of all the order is how things are ordered here I have order one that means it's the first element if I have another flex item that has ordered to that it comes after order one if I have anything that is larger it comes afterwards so it's basically just ordering by increasing number and this way you can reorder things so if we look into my code here you'll see that here I have my diffs and I have order one five three four you'll see that three is smaller than five so you will actually see that the green one should be before the red box here you go so the green comes before the red box even though in the code it's the other way around so this ordering can help with reordering the other thing the other property I have used is the grow and this one just defines how the elements grow relative to each other so in this example here I have flex grow one flex grow one and flex grow two that means the middle item here will always be double the size of the other two and I have done something similar in the code you see that the first item that's the gray box should always be double the size of the other boxes and you can imagine that this is true so this one is roughly double the size then green then red and then blue let's make this a bit larger so that my text does not get out of the box but this way you can very easily position elements next to each other as I said if you want any details on flex box please look up the reference but it is a very useful technique especially for this alignment of different boxes next to each other so this is very very useful also for assignment one okay so this was what I wanted to talk about positioning in overall you now know a lot about CSS you know about selectors combinators you know about the ordering the rules you know different properties that you can declare you can set and we have talked about positioning including flexbox this is all very nice but it's really tricky to actually do this so that's why we have the assignment and we have the optional assignments so that you practice this because in theory it all sounds great until you sit down and actually try to do something and at the same time of course this was a lot in a very short time so you need to practice this