All About CSS Layout
Hello! I am on the day 2 at Wecode Bootcamp. The first day was very busy, and I was super tired by the end of the day because I didn’t get a lot of sleep the night before. Anyways, we started covering the very basics of web development, HTML & CSS. On this post, I am going to summarize some CSS layout properties to remember.
Position: Relative, Absolute, Fixed
Let’s look at the three types of positions of CSS property that are used most frequently.
Relative
It is important to keep in mind that the position:relative;means “relative to itself”. When I firstly learned about this property, I naturally thought the position is relative to some other elements, like body.
relativeproperty doesn’t do much if you don’t set other positioning properties like setting top, right, left, bottom. relative also enables to use the z-index where as the element’s position that is set to static (the default property) cannot change the z-index.
Another case to use relative property is when you want to limit the scope of absolutely positioned elements. Any child element under the relative parent element can be positioned absolute. For example:
parent-div {
position: relative;
width: 300px;
}child-img {
position: absolute;
top: 10px;
right:10px;
margin: 0;
}
Above, the parent-div that is set to relative limits its child-img which is absolutely positioned.
Absolute
absolute position property lets you move elements exactly where you want. This property is relative to its parent element that is set to relative or absolute. If there is no such parent, it will go back all the way to html element which means it will be relative to the page itself.
Very important to note that absolute does not follow the flow of other elements on the page. Therefore, we should watch out for misuse of this property.
Fixed
fixed property is positioned relative to the viewport. It lets you to keep the element’s position as you scroll down or up. It is often used for navigation bars on the page.
Float
Like in a newspaper layout, we can use the float property to make an image wrapped around with the texts. Elements with float remain within the flow of other elements on the page.
Not only to wrap an image with texts, we can use float to create a layout of an entire page. float:left; moves the element to the left with other elements wrap around it. float:right; moves the element to the right.
Clear
clear is a sister property to float. clear sets an element to escape the flow of the floated element, but moves past down instead.
clear can be set to both, left, or right. both means to clear floats from both directions, left and right.
It is important to note that the parent element that has floated elements only collapses its height to none, which makes the floated elements go out of its parent element.
To avoid this issue, there are few ways of clearing floats. To briefly cover the techniques, you may make an empty div on HTML with clear property applied at the end of parent element.
<div class=”clear”></div>Or, you can apply overflow: hidden; to the parent element.
.parent-element {
overflow: hidden;
}Display: Inline, Inline-bock, Block
You can also design the layout of web using inline, inline-block, and block.
Elements like <p>, <header>, <footer>, <li>, <div> are all block elements that start at a new line with a full width of the page.
Elements like <span>, <a>, <img> are inline elements that can come next to each other on the same line, and has the width of their contents.
inline-block is very similar to the inline that it can be positioned on the same line with other inlined elements, but it can be also set its width and height where as inline ignores the height and width properties.
