Today’s session was spent on one concept, with most of the time being dedicated to prototyping.

A central component of CSS was covered:

  • Floating Elements

Floating Elements:

Floating elements are elements that are floated above other elements to the left or right (horizontal margins).

.textblock {
  float: left/right/center;
}

Elements defined with [Clear] are moved such that they do not overlap with floating elements.

.aftertextblock {
  clear:left/right/both;
}

Together these can create horizontally ordered elements:

.header {
    background-color: rgb(207, 207, 207);
    padding: 15px;
    text-align: center;
    letter-spacing: 5px;
}

.intro{
    text-align: center;
}

p:not(.intro){
font-size: 0.8em;
text-align: justify;
}

ul{
    list-style-type: none;
}

li{
    float:left;
    width:20%;
    padding-inline: 10px;
}

h1:not(.header){
    text-align: center;
    color: white;
    padding: 20px;
}

.tulip>h1{
    background-color: lightcoral;
}

.jebi>h1{
    background-color: lightblue;
}

.pumpkin>h1{
    background-color: lightsalmon;
}

.sunflower>h1{
    background-color: lightgreen;
}

Yielding the following result together with html code:

Floating blocks may potentially collapse, as is their intended behavior. To prevent this, there are three solutions:

  • Create a virtual element with the :after suffix to create a virtual table.
  • Create an empty html tag. For its css attributes add [clear:both].
  • In the container element, define height.

Finally, [display] can also be used to manipulate layout by changing the behavior of certain elements.

#gnb li{
      display:inline;
  }

-gonkgonk

<
Previous Post
HTML CSS Selectors
>
Next Post
HTML Overflows and Positioning