While working on the redesign for the Moss Construction website we used a layout structure that consisted of an image section and content section side by side where the image was locked in place until the content scrolled completely. (You can view this in action throughout the Moss Website – Visit Now)  We really liked our clean technique for achieving this stylistic yet functional layout so we decided to share our approach with everyone. In this tutorial we will teach you the basic bare bones coding approach we used to achieve a side by side locked image layout.

*Please note that this is a very bare bones example of how to set up the structure for this particular layout and you will need to have an understanding of HTML and CSS to style this to fit your particular needs.

Step 1: The Basics

While this step is not necessary we always use this line of code in our projects to clear out any unwanted margin and padding so that we have full control over all spacing. If you are unfamiliar with this line of  CSS code it serves as an override to clear out all default margin and padding settings. This code should be placed at the top of your stylesheet.

CSS

*{ margin: 0; padding: 0; }

Step 2: Container Element

In order to get started with our layout, we will first create our container element, this can be any structural element you want to use but for the purposes of this tutorial we used the ‘section’ element.

HTML

<section class="section">
</section>

CSS

.section{ 
width: 100%; 
float: left; 
position: relative;
 }

Step 3: Sticky Element

The next item we will set up is whatever you want to make stick(lock) to the left side next to the content, on the Moss website we used a few different options like; standard images, slideshows, and video pop-ups. We typically set this item up utilizing a background image but for purposes of this tutorial we will set this item up as a very basic example with just a background color and you will need to determine how you want to handle the image aspect of this element in your application.

HTML

<section class="section">
  <figure class="image">YOUR IMAGE HERE</figure>
</section>

CSS

.section .image{ 
width: 50%; 
height: 100vh; 
float: left; 
position: sticky; 
top: 0; 
left: 0; 
background-color: #000; 
}

Items to Note:

1. Height 100vh will use the screen size to determine the height of the element.
2. Position Sticky will keep the element locked in place until the content scrolls completely.
3. Top 0 and Left 0 positions the element in place to the left side of the screen.
4. For purposes of this tutorial we just added a background color, you will need to determine how you want to implement the displaying of the image. (We recommend as a background image)

Step 4: Main Element

The final element to create is the main element that contains all of the content. The way we created this element allows for the content to align in the center if the content is shorter than the screen height.

HTML

<section class="section">
  <figure class="image"></figure>
  <div class="main">
    <div class="wrap">
      <header class="header">
        <h1>YOUR TITLE HERE</h1>
      </header>
      <div class="content">
        <p>YOUR CONTENT HERE</p>
      </div>
    </div>
  </div>
</section>

CSS

.section .main{ 
width: 50%; 
min-height: 100vh; 
float: right;
display: table; 
position: relative; 
overflow: visible; 
position: relative;
}
.section .main .wrap{ 
display: table-cell; 
vertical-align: middle; 
padding: 60px; 
}
.section .header{ 
width: 100%; 
float: left; 
}
.section .content{ 
width: 100%; 
float: left; 
}

Items to Note:

1. Min-Height 100vh will use the screen size to determine the height of the element.
2. Display Table will allow us to position the wrap element in the center of the screen if the content is shorter than the screen height.
3. Display Table-Cell and Vertical-Align Middle will position the wrap element in the center of the screen if the content is shorter than the screen height.

Final Code

HTML

<section class="section">
  <figure class="image">YOUR IMAGE HERE</figure>
  <div class="main">
    <div class="wrap">
      <header class="header">
        <h1>Your Title Here</h1>
      </header>
      <div class="content">
        <p>Your Content Here</p>
      </div>
    </div>
  </div>
</section>

CSS

*{ margin: 0; padding: 0; }

.section{ 
width: 100%; 
float: left; 
position: relative;
 }

.section .image{ 
width: 50%; 
height: 100vh; 
float: left; 
position: sticky; 
top: 0; 
left: 0; 
background-color: #000; 
}

.section .main{ 
width: 50%; 
min-height: 100vh; 
float: right;
display: table; 
position: relative; 
overflow: visible; 
position: relative;
}
.section .main .wrap{ 
display: table-cell; 
vertical-align: middle; 
padding: 60px; 
}
.section .header{ 
width: 100%; 
float: left; 
}
.section .content{ 
width: 100%; 
float: left; 
}

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again. Please do not email us with problems regarding this tutorial unless you want to hire us.

Hire Us

If you are unfamiliar with web development and need hep with your website we are available for hire. Please contact us in order to receive a quote for this or any other service.

Request a Free Quote