Utilizing a two-column design, position the third sibling element without relying on margins

I am currently working on a two-column layout. The left column (header) is set to be sticky/fixed, while the right column remains static. In my HTML structure, I have 3 sibling elements (header, div.content-column, footer). The footer is positioned below the .content-column.

I am seeking a solution that does not involve nesting .content-column with footer, and avoids using margin-left to position the footer next to the header. Any suggestions?

Thank you in advance!

body, ul {margin:0;}

header {
  background-color: lightgreen;
}

.content-column {
  background-color: lightblue;
  font-size:3rem;
}

footer {
  background-color: lightgray;
}

@media (min-width: 600px) {
body {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  min-height: 100vh;
}

header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  overflow-y: auto;
  display: flex;
  flex: 0 1 40vw;
  flex-direction: column;
  align-self: flex-start;
  height: 100vh;
  max-width: 40vw;
}
.content-column {
  display: flex;
  flex-direction: column;
  flex: 0 1 60vw;
  background-color: lightblue;
}

footer {
  margin-left: 40vw;
}
}
<header>
<a href="#">logo</a>
<span>logo subtitle</span>
  <nav>
    <ul>
      <li>about</li>
      <li>contact</li>
    </ul>
  </nav>
</header>
<div class="content-column">
  <main>
    <article>
Quo consequatur dolores facilis fugiat. Maxime non quam eos nisi voluptatem autem minus autem. Consectetur aut molestiae asperiores at impedit. Quam doloribus ut et impedit hic veritatis quia. Quo consequatur dolores facilis fugiat. Maxime non quam eos nisi voluptatem autem minus autem. Consectetur aut molestiae asperiores at impedit. Quam doloribus ut et impedit hic veritatis quia.
Quo consequatur dolores facilis fugiat. Maxime non quam eos nisi voluptatem autem minus autem. Consectetur aut molestiae asperiores at impedit. Quam doloribus ut et impedit hic veritatis quia.…
Quo consequatur dolores facilis fugiat. Maxime non quam eos nisi voluptatem autem minus autem. Consectetur aut molestiae asperiores at impedit. Quam doloribus ut et impedit hic veritatis quia.…
    </article>
  </main>
</div>
<footer>
2023
</footer>

htmlcss

Answer №1

To achieve the desired layout without having to calculate margins, you can utilize CSS Grid. Here is an example of how it can be implemented:

body,
ul {
  margin: 0;
}

header {
  background-color: lightgreen;
}

.content-column {
  background-color: lightblue;
  font-size: 3rem;
}

footer {
  background-color: lightgray;
}

@media (min-width: 600px) {
  body {
    display: grid;
    grid-template-columns: 30vw 1fr;
  }

  header {
    height: 100vh;
    position: sticky;
    top: 0;
  }

  footer {
    grid-column: 2/-1;
  }
}
<header>
  <a href="#">logo</a>
  <span>logo subtitle</span>
  <nav>
    <ul>
      <li>about</li>
      <li>contact</li>
    </ul>
  </nav>
</header>
<div class="content-column">
  <main>
    <article>
      Quo consequatur dolores facilis fugiat. Maxime non quam eos nisi voluptatem autem minus autem. Consectetur aut molestiae asperiores at impedit. Quam doloribus ut et impedit hic veritatis quia. Quo consequatur dolores facilis fugiat. Maxime non quam eos nisi voluptatem autem minus autem. Consectetur aut molestiae asperiores at impedit. Quam doloribus ut et impedit hic veritatis quia.…
    </article>
  </main>
</div>
<footer>
  2023
</footer>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing a delay in a CSS menu design while still ensuring compatibility with browsers that do not support JavaScript

I currently have a three-tiered menu that relies on :hover and is controlled by css alone. I am now looking to introduce a slight delay to the hovers, which means transitioning my css :hovers to a .hover class and incorporating jQuery. My concern is whet ...

jqueryhtmlcss

What is the best way to center a Bootstrap 4 navigation menu horizontally?

The alignment of the navigation is causing a bit of confusion. I've attempted to set the links to navbar-brand, but while this centers them, it also causes other elements to shift slightly downward. Additionally, it's puzzling why the select opti ...

csstwitter-bootstrap

Stop objects from shifting while easily applying a border

I have a code that adds a red border around elements when you mouseover them and removes it when you mouseout. However, the elements jump around when the border is added because it changes their dimensions. Is there a way to stop this jumping behavior? ...

javascripthtmlcss

Creating a drop-down menu in HTML with PHP and MySQL integration

I'm currently working on populating a list into a drop-down menu, but right now it's displaying each name in its own separate drop-down. I'd like to have all the names listed in just one single drop-down instead. Any ideas on how I could ach ...

phphtmlmysql

Obtain and utilize the background color to easily implement the same color in another window

For my Chrome Extension project, I am looking to retrieve the background color of the current page and then set the background color of a window to match. Can someone guide me on how to accomplish this using JavaScript (with or without jQuery), and if ne ...

javascriptcssgoogle-chrome-extensionwindowbackground-color

What could be causing my select element to not display any options after being dynamically generated using JavaScript?

function createDropdown() { const selectElement = document.createElement('select'); selectElement.setAttribute('type', 'text') toolresult.appendChild(selectElement); const optionElement = document.createElement('o ...

javascripthtmlcss

CSS: The button text appears to be aligned to the bottom of a line height that is seemingly larger than

There seems to be a strange issue with the way class styles are being applied to elements, causing them to render differently depending on whether they are applied to an anchor tag or a button. The class 'btn' is defined below; .btn { backg ...

css

Update a variety of CSS properties simultaneously

Is it possible to change multiple CSS attributes of an element with just one line of code? Currently, if I want to alter various CSS attributes of an element, I have to write separate lines of code for each attribute. For instance: $("div#start").cli ...

javascriptjqueryhtmlcss

Collaborating on local HTML and CSS files for a web page

Sharing a website with my colleagues at work has been on my mind lately. The file system I have looks something like this... home.html about.html products.html logo.jpg home_font.webfont [stylesheets] home.css about.css products.css I am ...

htmlcssweb-hosting

The status of the xmlhttp object remains unchanged

I was attempting to create an application showcasing the use of AJAX. Being new to AJAX, I couldn't pinpoint the error in my code. The XMLHttpRequest object is being created, but nothing else seems to be working. The ready state doesn't change to ...

javascriptphphtmlajaxxmlhttprequest

The server unexpectedly crashed while I attempted to log in to input data for validating testing

Experimenting with inputting incorrect data to observe server responses from the database, such as wrong username/password or non-existent usernames. It worked fine for 1 or 2 attempts, but crashed on the third try: Cannot set headers after they are sen ...

htmlnode.jsreactjswebserver

Styling elements with CSS to achieve proper positioning

I am in search of a way to align rows utilizing the style property. The following HTML code is being transformed using XSL: <span style="white-space: pre; font-size: 8pt; font-family: Lucida console, Courier ">&lt;40 : item1</span>&l ...

htmlcss

The width of the inline element is determined prior to the JSON content being loaded

One issue I am facing involves styling an inline element, specifically an <a> element. The code in question is: <a class="text></a> .text{ display:inline-block; background:red; padding:5px } The problem arises when trying to load text ...

htmlcssajax

Illustration tucked beneath the menu

I am looking to create a landing page for my project similar to the design on this website. I am using Bootstrap 4 and HTML, but struggling to hide the background image behind the navigation bar. Can anyone help with this issue? ...

htmlcssbootstrap-4

What are the steps for transferring data from a temperature sensor to an HTML document?

One useful command I use in the terminal is to display the temperature data from my sensor, which looks like this: cat /sys/bus/w1/devices/28-000005330085/w1_slave | grep "t=" | awk -F "t=" '{print $2/1000}'. I want to incorporate this sensor dat ...

htmlsensors

JavaScript - Setting Image IDs upon Page Load

I've encountered a challenge with assigning IDs to elements containing the "img" tag. I've attempted to find solutions from others facing similar issues, but none of them quite align with my own problem. I am fairly new to Javascript and suspect ...

javascripthtmlcss

Enable the set body to have certain sections that are scrollable by setting overflow=hidden

I am currently working on a website that features the following structure: <body> <section></section> <section></section> ... </body> To prevent scroll bars on the body, I have set the CSS property body{overflow:hidden ...

cssscrolloverflow

Issue with virtual keypad on Android tablet causing overlap with textarea element on website

I'm currently developing a web page specifically for Android tablet devices and iPads. Everything seems to be working perfectly fine on the iPad, however, I am having some difficulties with the Android tablets. The issue lies with a textarea element ...

htmlandroid-emulatorandroid

Sprite hover image in IE9 not aligned properly or blurry by 1 pixel

I have implemented a sprite to display my button image and a slightly darker hover image. Below is the CSS code I am using, with my image being 31px tall: a { background-position: 0 0; } a:hover { background-position: 0 -31px; } Although the ho ...

cssinternet-explorer-9spritecss-sprites

if the input field is empty, eliminate the class

Within the code snippet, a function is present which performs the following actions. It searches for an email in the input field, then converts the email to an md5 hash, and finally generates a Gravatar URL that is inserted into a class using fadeIn(); ...

jqueryhtmlcss