Layout Example CSS - Float, Display, Clear, Overflow properties

hi in this tutorial we're going to find out about laying out our website using different basic tools as for layout in HTML and CSS namely float the clear property in CSS and display so I've got a wireframe here and I want to do a website for a festival and I want a few different sections I'm gonna the header section our footer section I'm gonna have some social media sections down on the left-hand side and then I'm going to push it's not profess what I'm gonna do so there's gonna be a main section in the middle and I'm gonna have three main operas that I'm going to display information about so I want to lay out that using different divs and like I said the floor property the clear property the display property so going over to my HTML and I've just got the bare bones of a HTML page and my first job really is to start putting in each of those different sections now I could easily use just normal dibs but since html5 has come out we've got these semantics elements as well in HTML and they are essentially davis but we have names on them instead for certain commonly used sections so header a side nav main and it's a good idea to use those because they give your cold extra readability but also it helps search engines rank your code a little bit better or rank your pages a little bit better because it can divide up the sections in appropriate ways for readers so I've got a header section I'm going to have an aside section first of all and I'm essentially gonna have three different asides if I go back to my wireframe so SoundCloud Twitter and Facebook all the social media they're gonna go in there at the side I'm just gonna put in one for the moment because I'm gonna be using floor to lay this out so I want a floor as an aside here for SoundCloud then going from left to right I'm then gonna have the main section that's gonna be aligned at the top here and then I move on to Twitter and Facebook so laying those out as I've described I'm going on the side there a main section and again these are all the html5 semantic elements and I will also have two more sides that's two and a third one and finally a footer so that is the way that I'd lay the mouse to start off with I could leave all of those different deep sections on their own and lay them out as they are but I always find it's a good idea and it's common practice to put them in some enclosing div container and difficult in here I'm gonna put in an ID of wrapper honest which is a commonly used name for this type of Dave and this wrapper Dave is something that encapsulate all of the different divs that I've described in one outside netting and once I've got that wrapper to vanish I can control it in one group now that they're all encapsulated in it to help me get my bearings I'm going to put in some some content in each of those and to start off with I might just put in a single word image and this will just allow me to kind of tell them apart and to actually see the divs without any styling of a height or any content in a div divs are essentially invisible so I'll just finish this off so those are my content inside the days and I'm just gonna go over and refresh and I see you should the div different Dave's pop-up here at this stage it's a good idea to put borders on each of those Dave's as well and so we'll be able to see them a little bit more clearly so I'm gonna go back and I'm gonna add in the style like so and I've created that style sheet and to just put a border on each one of those divs one of the disadvantages of using semantic containers like this is we have to put in long-winded selectors in the strategies but no matter I got my border to be and let's go back to the browser and see that in action and there it is now at this stage it's a good idea to start laying things out and my first place to start is the rapper at the moment it's spanning the whole width of the page I'd like to just move that in a little bit and half just gaps at the side the left and right so going back to my stylesheet that's the first thing so I've got my div my rapper Dave's ID'd as rapper I'll go in and just identify rapper and as a selector and I want to make a width of 80% of the screen and I'll also put in a min width and a max width so I mean with I will try it as 140 so 340 pixels on it and a max width I will put it in as 1100 pixels I'll also float it to the center so that means I will go margin-left:auto margin-right:auto there we go I've got all of my inner sections header aside the main the footer of all of them in a black border and I've got the wrapper encapsulating them all but I can't actually see the wrapper and just find develop English I'm just gonna put a slight color on the wrapper just so I can see where it is so I will go back and put in a background color yeah the first color is fine and there we go it's a slight background color there just to revisit my wireframe this is the layout that I'm going for so my three sides will be on the left hand side my main will be over on the right my header and my footer span 100% width so I want to start getting those into shape and the first thing I'm gonna do here is my three sides so they're all labeled aside so within a site selector I can put a width of 33 percent on each of those and you see they have shortened up there and just to make sure that I don't have any discrepancy between my width and sometimes the border can take an effect and on increasing the width and also margins and padding inside as well it's a good property to try and avoid that is is the box sizing property and we'll set that to border box and again that just means that the the borders or any padding inside won't increase the overall size the container that the container if I say it's the width is 33% of the container that they will stay at that so let's see a side and I will also float all of those sides and left so that other things can flow in around them and then for the main I am going to take up the remainder of the width so if my size with 33% then I'll need to go 67% with for my main so percent I'll float back to the right and that's easy to do when I'm going to get two columns and content and a little bit trickier but I've got more than that so I'm seeing my main is 33 my side my main is 66 or 67 sorry my side there's 33 my footer is floated up here and I'm not exactly getting exactly what I need so some of the different things that I need to do here one of the reasons that the main isn't flowing in there is again I don't have my box sizing set so again I go in box sizing border box and it's a little bit of an improvement but nothing much happening there and again I'm not getting that roof working there we go so my main has flown up there beside a side one a slide two and si three they're floating beside one another as well I want to guess all these sides going down the side so the left hand side so what I can do is I can come along and I can use a clear property and say I want to just clear on the left so that I don't want to share any space on the left of the asides I want that to be right up against the edge of the left-hand side of the wrapper container so those are three sides my main now is 33 percent or so 67 percent across the remainder of the wrapper container the last one here is footer for personality because I've set the float of my three asides at my main so any other content that's down beside it it can flow up there on the side beside these sides to stop that from happening I can move in here to my star sheet and put in a footer selector and I can say fear both but I don't want anything to share the line with the photo the photo takes over a hundred percent of the width and that's that's it so I've got a good layout there that's starting to approach my layout that I did of my wire diagram my wireframe and but what will really make this is when I start putting in content into it and that's what I'm about to do now back in my HTML I'll put in h1 in the header and let's take a look at how that looks so I can see that my content is starting to shape out the different containers that were within for my three sides I'm just gonna grab some embed code from some of the different big social media platforms so SoundCloud I started off at first of all than I love Twitter that I Facebook I would just drop those into their respective areas so we're a slide one is written their site to Eunice I three as from my embed code will go so there is my soundcloud iframe and again I can get those from adding sound loud plug-in that I see where music is playing I can just take the embed section there and get cold copy and paste it in here so let's have a look at that and that's what it looks like so I've got some nice music there yeah and then next will be Twitter looking for some Twitter embed code which will go in here instead of that to contact text si - there goes my Twitter embed code I'll save that go back and refresh so there are my tweets from the festival now that Twitter embed code is giving me a very very long Twitter feed I may need to restrict that and I'll need to target just that individual div just that individual a slight section so I will need to idea so going back into my HTML code aside this is a particular site it has to do with Twitter and so am I doing it with a Twitter and value and I go back then to my stylesheet and I can target that with the rule hashtag because it's an ID and Twitter is the me macho's first that's the selector and then I can restrict the height swear to some value and there we go now it is actually still overflowing and past that height so I can see the actual border of the Twitter div or the Twitter aside there in the background though I've said the Twitter feed is actually overflowing past that so another property is needed there I need to use the overflow property and just say that we want a scroll to happen when there's an overflow rather than overflowing past actual a side section and just rolling down the rest of the page now I need to add there's an order floor the users can just scroll through the Twitter feed like so so that's that and then lastly I'll put in a Facebook Twitter feed or a Facebook embed code and the Facebook embed code has gone in and just to see it in action then in the browser and there it is in the browser and moving on to a different section to force reception I just need to put in some code for that back in my HTML I'm just gonna drop in some cold now I've just got content here and I've got a phone number I've got an address of the festival and some other piece of text a copyright statement or something like that I'm putting them each in a different element called a span element which is specifically to do with text and it's an inline element and so I can move along again and just put in some styling on that and what I'm really looking for is affecting the font and making each of those sections 33% and I am centering all the text in them and making them share the space so moving back to my browser let's see how that looks so we get that photo section down there with the three pieces of text all spread out nice and evenly the layout of my web site is starting to take shape and it Stratton to resemble the wireframes that I had before I started now I need to just fill out the main section and I've got three main opera's in this festival and I'd like to show some information body to them now I've just added in three different sections here for this opera festival and and they're just semantic section tags and I've ID'd them each ID'd one as opera one second is opportu and the third is opera three so let's move back in and take a look at the content and we can see that they're all spreading out one after the other there I've got an Instagram beside one of them as well and it just flows down the page the main type of styling that I'm gonna put on those three different sections again I'm gonna use box sizing I'm gonna make the width 100% at the moment putting a little bit of padding and floating them and that doesn't make a whole lot of difference but it does allow me to actually change the layout if I want rather than have them one stacked on top of the other if I actually change it to 33% because they're floating left they should float around one another I should get a change of layout so now I've got three columns for one for each of the different operas so that again is starting to resemble my wireframe and I'm just gonna take all of the borders off now and that's just an introduction to laying out my site using again float display and the clear properties and I can just start filling up all of those different sections with with content just one thing before I leave it I might add some padding in here to some of the different sections and I also might share we Jake the splish between the actual social media pane on the left and the main content on the right so let me just till it doors quickly gone back into my star sheet whatever it is here we go so I'm going to take that down a little bit maybe set it to 27% because I've got box-sizing border box set on on both my operas and my that's the wrong place it's about 33% of the aside I'm going to do so because I've got my border a box value set up box sizing that means that I can play with whole numbers here in terms of things that add up to 100% so I can set my aside 27 percent that should adapt and then I should just make up the remainder with my with my main so my sides have now gone to 27 percent my main spread across those three operas hours now as 73% and I'm just going to add in some padding to some of those because there's hatching to conflict with one another so move back in and my three opera is just adding a little bit of padding five percent our five pixels rather again because they've got box-sizing border box on it's not going to affect the overall size of those boxes but just add some padding in there and then I'll also put in a little bit of padding on these sides and I might just focus in on padding right while I'm here as well I noticed that the actual social media sections are quite stacked closely one on top of the other so it might be a good idea to have a little bit of space here underneath each of them so again on both sides I'm gonna come along and I'm gonna say margin bottom put in 10 pixels and I see a bit of a gap there it just makes them easier to differentiate between them so that's all I want to do in this in this tutorial and again it's just about an introduction of strategy lay out my different sections making them flexible enough also that there are slightly responsive if I resize the actual screen so that there's a little bit of give and take their things resize and have a little bit of flexibility so thanks for watching and in later videos I'll go into some more sophisticated layout tools that are built-in in CSS now namely grid in Flex box and they open up a lot more possibilities and make things a little bit more controllable for web designers going forward

Channel: Q Visible

Views: 16,477

Keywords: Web Design, HTML Layout, CSS Layout, CSS, HTML

Id: _VAYGAnwmWc

Length: 19min 13sec (1153 seconds)

Published: Tue Oct 30 2018