Two columns with one column having a fixed width

I am looking to create a layout with two columns, one for content and the other for a sidebox. The sidebox should have a fixed width while the content column can shrink as needed.

Eventually, both columns will stack to 100% width, but I want the content column to come first. The current issue is that the sidebox comes before the content column.

I prefer not to use floats and percentages because I do not want the sidebox to shrink.

html:

    <aside class="sidebox"> <!-- I don't want this to be displayed first after applying media query -->
        sidebox
    </aside>
    <section class="content">
        content
    </section>

css:

.content {
    margin-right:200px;
    height:100px;
    background-color:red;
}

.sidebox{
    width:180px;
    float:right;
    height:100px;
    background-color:yellow;
}


@media (max-width: 500px) {
    .sidebox {
        float:none;
        width: auto;
     }
     .content {
         margin-right:0px;
      } 
}

DEMO: https://jsfiddle.net/72Lad2zf/

Answer №1

To achieve the desired layout, you can implement the following CSS:

.container {
    display:table;
    width:100%;
}
.content {
    display:table-cell;
    height:100px;
    background-color:red;
}
.sidebox {
    display:table-cell;
    width:180px;
    height:100px;
    background-color:yellow;
}
@media (max-width: 500px) {
    .content, .sidebox {
        width:100%;
        display:block;
    }
}
<div class="container">
    <section class="content">content</section>
    <aside class="sidebox">sidebox</aside>
</div>

Check out the updated Fiddle for more details.

Answer №2

To modify the layout of the webpage, you will need to adjust the HTML structure and utilize the float property within the .content class, although it's important to note that using float does not reduce the width.

html

<section class="content">
    content
</section>
<aside class="sidebox">
    sidebox
</aside>

css

.content {
    height:100px;
    background-color:red;
    float:left;
    width:calc(100% - 200px);
}

Check out the working demo here

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

Having trouble resizing divisions using three.js?

Three.js is an incredible library that offers thorough documentation and functions perfectly. I am currently attempting to display a plane with trackball control inside a div that resizes according to the window or browser size. However, I am encountering ...

jquery selector targeting a select optiongroup that contains a specific label value

In my code, I have a select multiple with option groups: <select _ngcontent-oeq-14="" class="form-control" id="category-select" multiple=""> <optgroup label="grocery products"> <option>meat</option> <option>dai ...

"Discover the steps to seamlessly integrating Snappuzzle with jQuery on your

I am a beginner when it comes to javascript and jquery, and I recently came across the snappuzzle plugin which caught my interest. After visiting snappuzzle plugin, I decided to download and link jQuery, jQuery UI, and the snappuzle.js in my HTML file. I a ...

Can a local image be incorporated into an HTML or CSS project through the use of Javascript or alternative methods?

I've been trying, but all I can manage is: <img width='220' height='280' src='chrome-extension://okjaohhbffepkcfacapapdhkmnebgiba/johnny.jpg' class="me"/> Unfortunately, this code only works in Chrome. Is there a ...

Deleting a property once the page has finished loading

My issue is a bit tricky to describe, but essentially I have noticed a CSS attribute being added to my div tag that seems to come from a node module. The problem is, I can't seem to find where this attribute is coming from in my files. This attribute ...

Tips for embedding HTML code within {{ }} in Django templates

I'm curious about how to incorporate HTML within {{ }}: {{ article.tags.all|join:", " }} This code snippet returns tags separated by commas, for example: sports, cricket, nature, etc. What I would like to achieve is: {{ <span class="label"&g ...

Ways to retrieve the index of an element with a certain class

When I click on an item with a specific class, I want to retrieve its index within that class only. <div class="gallery"> <div class="gallery-item"></div> <div class="gallery-item"></div> <div class="gallery-item ...

Is it possible to use only CSS to determine if text has wrapped and apply different styles to it?

Let's say we have a button with lengthy text: [Click here to find out more] Due to its length, the text may be split on smaller screens like this: [Click here to find out more] The goal is to align the text to the left when wrapped and to the ce ...

Error Encountered when Using JQuery AJAX: Unexpected Identifier Syntax Issue

I've been struggling with a strange error for quite some time now. I want to believe that this is one of those errors where the solution will magically appear, but only time will tell. Here's the piece of code causing the issue: var images = ...

bring in all the files located within the Directory

Is there a way to import all CSS files from a specific folder without having to import each file individually? Looking to import assets/css/* ? <link href="<?php echo base_url(); ?>assets/css/*" rel="stylesheet"/> <title&g ...

Encountering issues with custom.css.scss not being properly overridden in Rails while using Bootstrap

My Configuration I made modifications to the .col-lg-4 class in Bootstrap for Rails and added them to my custom.css.scss file after the import statements to remove padding completely. The Issue at Hand I am trying to override the styling of .embed-respo ...

Discover the hidden content within a div by hovering over it

Here is an example of a div: <div style="width:500px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tinc ...

How can I show HTML content in a ListView on an Android device?

One way I am populating a ListView from a database is by using the following code. The only difference is that the COL_TXT_TRANSL2 field contains HTML formatting: public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); ...

In React, I'm unable to navigate to a different page

My English may not be the best, but I am working on creating a Login Page. The issue I'm facing is that when I click the Login button, I want to navigate to the Home Page I designed using React. However, whenever I try to implement Link or Route comma ...

Retrieve data from a table with XPath expressions

Looking to gather details from this specific website link: Focusing on extracting the number of bedrooms from a table. <div class="panel panel-primary"> <div class="panel-heading">Property Details</div> <div class="panel- ...

Can someone explain why my table in Laravel is only showing the third set of data and not the others?

I'm facing an issue with displaying all of the data in my table named taglineImageCarousel. The problem lies in the slide_ID column, where it is being populated with data from slide-01, slide-02, and slide-03. Below is the code snippet: taglineImage ...

Design a PHP tool for generating custom CSS frameworks

After attempting to create a CSS frame generator similar to this one, I stumbled upon a solution that works well with one exception. PHP Code: <?php function print_css($parentTag, $prefix, &$dup_checker) { if ($parentTag->nodeName == &apos ...

What could be the reason for the email not being displayed in the form?

I am attempting to automatically populate the user's email in a form when a button is clicked, preferably when the page is loaded. However, I am encountering issues with this process. This project is being developed using Google Apps Script. Code.gs ...

Require assistance with displaying a menu on a website using JQuery

Is there a way to create a menu similar to the one shown in the image below?https://i.sstatic.net/QxNPL.png To learn more about this menu, you can visit their website by clicking on this Link. I have copied some code (HTML code and links to CSS and .js fi ...

The accordion feature fails to function properly when incorporated into an ajax response

When I click a button, an Ajax response is loaded. The response is successfully appended where it should be, but the issue arises with the accordion not working for the response part. Below is the structure of my response: <div class="articles-content ...