w3resource

HTML CSS Exercise - Calculating Values With CSS3 calc()

HTML CSS Exercise - 18

In this exercise you will calculate values with CSS3 calc().

On completion, the page will look like following

HTML calc

Use the following editor to complete the exercise.

See the solution in the browser

See the Pen html css common editor by w3resource (@w3resource) on CodePen.


Previous: use font awesome vector icons with bootstrap3.
Next: Style first letter and first line.

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.

HTML-CSS: Tips of the Day

How to show multiline text in a table cell?

You want to use the CSS white-space:pre applied to the appropriate <td>. To do this to all table cells, for example:

td { white-space:pre } 

Alternatively, if you can change your markup, you can use a <pre> tag around your content. By default web browsers use their user-agent stylesheet to apply the same white-space:pre rule to this element.

The PRE element tells visual user agents that the enclosed text is "preformatted". When handling preformatted text, visual user agents:

  • May leave white space intact.
  • May render text with a fixed-pitch font.
  • May disable automatic word wrap.
  • Must not disable bidirectional processing.

Ref: https://bit.ly/3pRCXKd

 





We are closing our Disqus commenting system for some maintenanace issues. You may write to us at reach[at]yahoo[dot]com or visit us at Facebook