CSS — Part-3

Eishta Mittal

9 min readMay 24, 2022

All about CSS Layout

#Display

specifies if/how an element is displayed.
Default value depends on the type if element we are using. Most of the times it is block or inline.
Values mostly used are :-
1. inline — displays as an inline element. Any height and width properties will have no effect
2. block — displays as a block element. It starts on a new line, and takes up the whole width
3. flex — Displays an element as a block-level flex container
4. grid — Displays an element as a block-level grid container
5. inline-block — The element itself is formatted as an inline element, but you can apply height and width values
6. table — Let the element behave like a <table> element
7. none —The element is completely removed

Block-level Elements

always starts on a new line and takes up the full width available
<div>, <h1> — <h6>, <p>, <form>, <header>, <footer>, <section>

Inline Elements

does not start on a new line and only takes up as much width as necessary.
an inline element is not allowed to have other block elements inside it.
<span>, <a>, <img>

display: inline-block

display: inline-block allows to set a width and height on the element unlike display: inline
Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element

display:inline

Every span here has the common css and the display is changing :-

span {
  width: 100px;
  height: 100px;
}

Override The Default Display Value

When we want our page to look a specific way, we can override the default display value of that element.

Note: Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. So, an inline element with display: block; is not allowed to have other block elements inside it.

Hide an Element — display:none or visibility:hidden?

Hiding an element can be done both ways:- display:none or visibility:hidden. But do they both behave the same way?

No!!. Let’s look how they both differ.

display:none : — The element will be hidden, and the page will be displayed as if the element is not there

<h1>This is a visible heading</h1>
<h1 style="display: none">This is a hidden heading</h1>
<p>Notice that the h1 element with display: none; does not take up any space.</p>

visibility:hidden : — also hides an element. However, the element will still take up the same space as before. The element will be hidden, but still affect the layout

<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the hidden heading still takes up space.</p>

#Using width, max-width and margin: auto;

a block-level element always takes up the full width available
Setting the width of a block-level element will prevent it from stretching out to the edges of its container.
Setting margin: auto; horizontally centres the element within its container.
The element will take up the specified width, and the remaining space will be split equally between the two margins.
If the browser window is smaller than the width of the element, the browser then adds a horizontal scrollbar to the page. Using max-width will help in this situation

#Position

specifies the type of positioning method used for an element.
Values: — static, relative, fixed, absolute, sticky
default value :— static

position: static;

it is always positioned according to the normal flow of the page

position: relative;

the element is positioned relative to its normal position.
Setting the top, right, bottom, and left properties will cause it to be adjusted away from its normal position.
Other content will not be adjusted to fit into any gap left by the element.

position: fixed;

the element is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.
A fixed element does not leave a gap in the page where it would normally have been located.
top, right, bottom, and left properties are used to position the element.

.element {
  background-color: #0074d9;
  opacity: .85;
  padding: 20px;
  color: rgba(255,255,255,.9);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

the element is placed relative to the document and is unaffected by the scrolling.

position: absolute;

An element with position: absolute; is positioned relative to the nearest positioned ancestor
if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

Note: Absolute positioned elements are removed from the normal flow, and can overlap elements.

If a child element has an absolute value then the parent element will behave as if the child isn’t there at all

<div class="parent">
  Parent element
  <div class="element">Child element</div>
</div>// css.parent {
  border: 2px solid #0074d9;
  color: #0074d9;
  padding: 20px;
}

.element {
  border: 1px dotted #000;
  background-color: #eee;
  padding: 20px;
  color: #000;
  position: absolute;
}

left, bottom, and right properties when set, the child element is responding not to the dimensions of its parent, but the document

.element {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
 }

position: sticky;

it allows you to position an element relative to anything on the document and then, once a user has scrolled past a certain point in the viewport, fix the position of the element to that location so it remains persistently displayed like an element with a fixed value.
It is like a compromise between the relative and fixed values.
It is not part of the official spec and is still experimental.
It is positioned relative until a given offset position is met in the viewport — then it “sticks” in place

nav.nav-sticky {
  position: -webkit-sticky;
  position: sticky; top: 0px;
}

after scrolling, the second navbar sticks to the top

#z-index

specifies the stack order of an element (which element should be placed in front of, or behind, the others)
they can overlap other elements.
An element can have a positive or negative stack order

<h1>This is a heading</h1>
<img src="img_tree.png">
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>// css<style>
img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}
</style>

<style>
img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1;
}
</style>

#overflow

controls whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area
default value:- visible
values: visible, hidden, scroll, auto

Note: The overflow property only works for block elements with a specified height.

overflow: visible

the overflowing text is not clipped and it renders outside the element’s box

div {
  background-color: coral;
  width: 200px;
  height: 65px;
  border: 1px solid;
  overflow: visible;
}
</style>

overflow: hidden

the overflow is clipped, and the rest of the content is hidden

div {
  overflow: hidden;
}

overflow: scroll

the overflow is clipped and a scrollbar is added to scroll inside the box. Note that this will add a scrollbar both horizontally and vertically (even if you do not need it)

div {
  overflow: scroll;
}

overflow: auto

it adds scrollbars only when necessary

div {
  overflow: auto;
}

overflow-x and overflow-y

overflow-x specifies what to do with the left/right edges of the content.
overflow-y specifies what to do with the top/bottom edges of the content.

div {
  overflow-x: hidden; /* Hide horizontal scrollbar */
  overflow-y: scroll; /* Add vertical scrollbar */
}

#float and clear

float is used for positioning and formatting content
values- left, right, none, inherit

<h2>Float Right</h2><p><img src="pineapple.jpg" alt="Pineapple" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet,
</p>// css<style>
  img {
  width:170px;
  height:170px;
  margin-left:15px;
  float: right;
  }
</style>

Without float

With float

div {
  float: left;
}

clear and clearfix

When we use the float property, and we want the next element below (not on right or left), we will have to use the clear property.
Values: — none, left, right, both, inherit
When clearing floats, you should match the clear to the float.
ex- float: left, then clear:left

.div1 {
  float: left;
}.div2 {

}.div3 {
  float: left;
}.div4 {
  clear: left;
}

If a floated element is taller than the containing element, it will “overflow” outside of its container. We can then add a clearfix to the container hack to solve this problem

// with clearfix.img2 {
  float: right;
}.clearfix::after {
  content: "";
  clear: both;
  display: table;
}<h2 style="clear:right">With Clearfix</h2>
<p>We can fix this by adding a clearfix class with overflow: auto; to the containing element:</p><div class="clearfix">
  <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

#Aligning the elements

Center Align Elements

.center {
  margin: auto;
  width: 50%;
}

Center Align Text

.center {
  text-align: center;
}

Center an Image

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

Left and Right Align

— Using position

.right {
  position: absolute;
  right: 0px;
  width: 300px;
}

- Using float

.right {
  float: right;
  width: 300px;
}// on the container add clearfix class
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Center Vertically

- Using padding

.center {
  padding: 40px 0;
}<div class="center">
  <p>I am vertically centered.</p>
</div>

Add text-align: center to centre horizontally with padding:-

- Using line-height

use the line-height property with a value that is equal to the height property

.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}

/* If the text has multiple lines, add the following: */
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

- Using position & transform

.center {
  height: 200px;
  position: relative;
  border: 3px solid green;
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

- Using Flexbox

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green;
}