HTML and CSS for beginners – Part six

Web design and development based in Royston, Hertfordshire, United Kingdom

Griffiths Web Design

HTML and CSS for beginners – Part six

07709 579517

michael@griffithswebdesign.com

HTML and CSS for beginners – Part six

By Michael Griffiths

Created: 06.12.2016 00:00:00, last updated: 01.01.1900 00:00:00

HTML and CSS for beginners – Part six

HTML and CSS for Beginners - Part Six, by Michael Griffiths of Griffiths Web Design

<< Go back to HTML and CSS for beginners part 5


Last time we talked about the CSS box model, padding, margin and borders. If you haven’t read that one yet then I would advise you to do so before continuing on with this guide. In this instalment of HTML and CSS for beginners we will be discussing the overflow property and positioning elements on the page. These are the last pieces of the puzzle needed to create layouts using CSS, which we will cover next time.


The overflow property


In CSS there is a property called overflow. This property addresses what to do with content that spills out of the confines of the element’s box. There are six values that you could assign to the overflow property.



  • visible – This is the default value. This will not clip the overflowing content, so the content will render outside the elements box.


  • hidden – This will clip the content overflow of the element, the content that would be outside the elements box will be invisible.


  • scroll – The content overflow is clipped but a scrollbar will be added to the element so the user can view the content in its entirety from within the confines of the elements box.


  • auto – If the content is clipped then a scroll bar would be added to see the whole content of the element.


  • initial – Sets the overflow property to its default value.


  • inherit – The element will inherit the overflow property of its parent element.



Note – You can also use overflow-x and overflow-y to set different values for horizontal and vertical clipping of the overflowing content. overflow-x decides what to do with the content on the left and right edges if it overflows the element. Overflow-y decides what to do with overflowing content on the top and bottom edges.


Positioning elements in CSS


To position elements in CSS we use the position property. This property, position, can take one of four values.


Static – This is the default value for all elements. This will not put any special positioning on the element, the element will be positioned according the flow of the page.


So with that in mind the two style rules are the same.


div{
position:static;
width:100px;
}

div{
width:100px;
}

The top, bottom, left and right properties will have no effect on an element whose position is set to static.


Relative – This will position the element relative to its normal position.


When using relative positioning the top, bottom, left and right properties will adjust the position of the element relative to its normal position


div{
position:relative;
left:20px;
width:100px;

}

This will position the div 20px away from the left margin of its normal position. A similar effect can sometimes be achieved using the margin property.


Fixed – This will position the element relative to the window. So if you scroll the page the element will still be in the same place on the screen.


div{
width:100%;
height: 50px;
position:fixed;
bottom:0;
}

This style rule will make the div be stuck to the bottom of the window, even if the user scrolls the div is still fixed to the bottom of the window.


Absolute – This will enable you to position the element at specific coordinates relative to its parent container. To use position absolute you need to have your element nested in an element that has its position set to relative, absolute or fixed. Elements that are absolutely positioned are taken out of the flow of the page and do not affect the positioning of elements around them.


div{
width:100px;
height: 50px;
position:absolute;
top:0;
left:0;
}

This will position the div in the top left corner of its parent element (0 pixels from the top and 0 pixels from the left).


CSS Floats


What is float? Well float is a property in CSS that we use to position elements relative to the flow of the page.


Floats can be used to layout entire webpages or they can be utilised to layout smaller instances, for example the float property could be used to layout elements within element.


Float has four possible values



  • left – Places the element on the left and the elements then wrap around it.


  • right – This will set the element to the right hand side and the other elements will flow around it.


  • none – This will ensure that no floats are applied to the element.


  • inherit – This will make the element inherit the float property from its parent element.



Clearing the floats


The float property has a sister, the clear property. The clear property is used to remove floats from an element.


There are several possible values for this property:



  • none - This is the default value of the clear property. This will allow floating elements on the right and left sides of the element.


  • left - No floating element will be allowed to appear on the left of the element.


  • right - No floating elements will be allowed on the right of the element.


  • both - No floating elements will be allowed on either the left or right side of the element.


  • initial - As with other properties that have this value this will set the value to the default.


  • inherit – The element will inherit the clear property from its parent element.



Now we have covered some of the ways to position elements on a page I suggest you go and play around with it. A lot. Positioning elements sounds simple, and it is, but it can sometimes have unexpected results. Practice! Practice! Practice!


I hope you found this article to be interesting, if so please share it around. In the next instalment of HTML and CSS for beginners we will be putting what we have learnt to good use by creating a layout.


<< Go back to HTML and CSS for beginners part 5






About Michael Griffiths

Web Developer and Social Media Coach

Comments