CSS Layouts & floats

5 min readFeb 21, 2022

Positioning elements side by side the old way…

Hey folks, today we will learn the old fashion way to style layouts and basically the key thing here is to learn why we are using these CSS properties. Thanks to Brad Schiff ( youtuber) whose Udemy course and YouTube videos has helped me a lot.

The article looks like this:

Goals:

Add borders
Have the paragraphs in a column or side by side.

<html>
  <body>
    <div class="container">      <header>
        <h1>What is Lorem Ipsum?</h1>
        <p>Why do we use it?</p>
      </header>      <div class="content-area group">    
        <div class="main-area">
          <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letterset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
        </p>
      </div>     <aside class="sidebar">
      <p>This is sidebar. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humor, or randomized words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. 
      </p>
    </aside>  </div><!-- end of content area div -->    <footer>
     <p>&copy; 2022 - This is the footer.</p>
   </footer>  </div>
 </body>
</html>

At first we will start by adding maximum width to the overall content to prevent eye fatigue. There are many ways of achieving this and one of the ways he taught is by creating a div with a class name “container” and we will move all the contents inside it.
In CSS we will add max-width, which cuts the article from the left side and then we want to move it to the center from both side using margin which creates space outside of the box .

.container {
  max-width: 900px;
  margin-right: auto;
  margin-left: auto;
}

Image of the article with width and margin

3. Now we would like to wrap the content in side a div called “content-area” so that we can make these articles sit side by side and add borders on the top and bottom.

.content-area{
  border-top: 3px solid black;
  border-bottom: 3px solid black;
}

4. Now we will work on the first paragraph and give it width of 66% meaning we are asking it to take only 66% of the width area and in order to make these paragraphs sit beside each other by using this property called float. But after using float we will see the sidebar(second paragraph) tries to wrap itself around the main area(first paragraph). Imagine if the main area was an image and the texts will wrap around the image. Very similar to what medium does when we add images.

.main-area{
  width: 66%; 
  float: left;
}

5. In order to create two distinct floated columns instead of wrapping it round. We will make the sidebar’s width 34% and float it to the left.

.sidebar{
 float: left;
  width: 34%; 
}

6. Just as we do these steps, We will notice that the bottom border will disappear but the articles are in a column. This because the parent div element with the class name “content-area’ will not recognize “.sidebar” and “.main-area” as its children because we have used the property float.

articles are side by side but the bottom border is gone.

7. In order to tackle this issue, we need a way to make sure the parent div (content-area) is aware of its children. We can achieve that by adding a utility class of group, this means we can use this group for any parent element to clear any floated children. This method is referred to as clear fix method. There is nothing to memorize but we can just copy paste code given by Brad Schiff. Here all the selectors are targeting the group class and adding empty bit of content before and after it and then clearing it.

.fix {
  clear: both;
}.group:before,
.group:after {
  content: "";
  display: table;
}.group:after {
  clear: both;
}.group {
  zoom: 1;
}

We learned:

The “float” & “width properties can be used to create columns.
If we are using floats to create layouts, then we must clear floats using group utility class.

Things you may wonder:

Why are we using % for width?
Answer is we can use any values, if we use pixel, we need to know how large is our container ( available space). In this example we have it as “900px”, so we need to make sure the columns add up to “900px. Also we want to make sure the “content area” is set to width instead of max-width.

.container {
  width: 900px;
  margin-right: auto;
  margin-left: auto;
}.main-area{
  width: 460px; 
  float: left;
}.sidebar{
 float: left;
  width: 440px; 
}

CSS Layouts & floats

Written by Saima Rahman