Question

I’ve spent all morning trying to write what I thought was a simple bit of code.

• Two long columns of content, only column 1 is visible
• On click of a link, column 1 is hidden and column 2 becomes visible
• Both are in exactly the same position, however both have different and varying lengths

I decided to use the target pseudo-class to switch between the columns, setting the visibility of one to show.

This seems to work, but I don’t fully understand what I’ve done. Plus, content below these columns seems to be placed beneath them on the z-axis rather than below them on the y-axis.

My two (related) issues:

1. I’m not sure exactly what the logic is of what I’ve created, I could do with a plain english explanation.
2. I don’t understand why the DIV underneath the two columns and container is not appearing below them on the y-axis.

Here’s my CSS:

#container
{
    background-color: red;
    position: relative;
}

#schools-list
{
    width: 400px; /* Set the width of the visible portion of content here */
    height: 600px; /* Delete the height, let the content define the height */
    background-color: purple;
    position: absolute;
    top: 0;
    left: 0;
}

#boards-list
{
    width: 400px; /* Set the width of the visible portion of content here */
    height: 700px; /* Delete the height, let the content define the height */
    background-color: green;
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
}

#container:target #schools-list
{
    visibility: hidden;
}

#container:target #boards-list
{
    visibility: visible;
}

Here’s my HTML:

<div id="container">

    <div id="boards-list">
    Boards List<br>
    Switch to <a href="">Schools List</a>
    Here's some content
    </div>

    <div id="schools-list">
    Schools List<br>
    Switch to <a href="#container">Boards List</a>
    Here's some other content
    </div>

</div>

<div>Why is this beneath everything?</div>

Answer 1

Absolute positioning removes an item from the flow of the page. This is what is causing your bottom div to appear underneath.

Visibility removes the element from sight but the element will still take up space.

My suggestion is to use display rather than visibility.

Toggle your elements between display:block and display:none and remove the absolute positioning and you should be able to achieve the functionality you desire.