Home/ Questions/Q 7560071
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T12:48:11+00:00

I have a regular layout that looks that this: This layout is done using

  • 0

I have a regular layout that looks that this:
enter image description here

This layout is done using CSS floats.

When I switch to mobile, I want my layout to do this:

enter image description here

That is, I want my sidebar to be below the content. I can do this using absolute positioning, but I was wondering, is there a way to do this using floats so that if my content changes the sidebar will adjust for the height difference?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s how I would do it. The DIVs are floated on your desktop version, but displayed on top of eachother (default block display) on mobile.

    CSS:

    #sidebar {
    float: left;
    width: 30%;
}

#content {
    float: right;
    width: 70%;
}

.mobile #sidebar,
.mobile #content {
    float: none;
    display: block;
    margin-bottom: 15px;
}

    Standard HTML:

    <body>
<div id="content">
...
</div>
<div id="sidebar">
...
</div>
</body>

    Mobile HTML:

    <body class="mobile">
<div id="content">
...
</div>
<div id="sidebar">
...
</div>
</body>
    • 0