Adjust the right and left columns to be fixed, while allowing the center column to

I'm attempting to create a layout with three columns set up as follows:

left column fixed width: 200px
right column fixed width: 300px
center column dynamic width;

Unfortunately, I'm encountering difficulty in achieving this. Here is the code I currently have:

#one {
    float:left;
    background-color: red;
    width: 300px;
    height: 20px;
}

#two {
    background-color: blue;
    height: 20px;
    margin: 0 200px 0 300px;
}

#three {
    position: relative;            
    background-color: yellow;
    width: 200px;
    height: 20px;
    float: right;            
}

Answer №1

If I were to tackle this issue, I would suggest setting the width of your container as desired and specifying fixed sizes for your left and right columns. Then, add padding to the container on the left and right sides based on the widths of the two columns. This way, the middle column will automatically adjust to take up the remaining space within the container.

Here is an example of how you can structure your HTML and CSS:

<div class="container">
    <div class="col">
        1
    </div>
    <div class="col">
        2
    </div>
    <div class="col">
        3
    </div>
</div>
.container {
    width:100%;
    position:relative;
    padding:0 300px 0 200px;
    box-sizing:border-box;
}
.col:nth-of-type(1) {
    width:200px;
    position:absolute;
    left:0;
    top:0;
    background-color:yellow;
}
.col:nth-of-type(3) {
    width:300px;
    position:absolute;
    right:0;
    top:0;
    background-color:blue;
}
.col:nth-of-type(2) {
    width:100%;
    background-color:green;
}

For a live demo and further experimentation, you can visit this link.

Answer №2

When utilizing the float property, floating elements should be positioned first in the flow, allowing static elements to fill any remaining space between them: example

#one {
  float: left;
  background-color: red;
  width: 300px;
}
#two {
  background-color: blue;
  overflow: hidden;
}
#three {
  background-color: yellow;
  width: 200px;
  float: right;
}
/* This is a demo to display the purpose of overflow */
div {
  margin:0 5px;
  border:solid;
}
<div id="one">
  1 is floated. Make me full page as well.
</div>
<div id="three">
  3 is floated
</div>
<div id="two">
  2 is just there
</div>

Answer №3

With the decline of older IE versions, utilizing calc is now a safe option to consider. While Flexbox may present some challenges, it could also be a viable alternative.

By using calc, you can easily float all columns and assign the middle column a dynamic width. It's a simple solution.

.col-1 { float: left; width: 200px; }
.col-2 { float: left; width: calc(100% - 200px - 300px); }
.col-3 { float: left; width: 300px; }

Take a look at this fiddle.

Answer №4

Markup :

<div class="wrapper">
    <div class="header"></div>
    <div class="main"></div>
    <div class="footer">Your content here</div>
</div>

Styling :

.wrapper {
    width: 100%;
}
.header {
    width: 200px;
    float: left;
}
.main {
    width: 300px;
    float: left;
}
footer {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

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

Designing personalized sass components

Seeking advice on developing a custom CSS unit that can be utilized in Sass with Node.js. Is there a tutorial available for creating a Sass plugin specifically for this purpose? For instance, I am looking to establish a unit called "dpx" which functions as ...

Ways to eliminate the navigation button on an HTML5 video player

I'm having a great experience using the HTML5 video player to continuously play videos. However, I have noticed that when my mouse cursor hovers over the video, a navigation button appears at the end of the screen. I would like to either remove or hid ...

How to set a DIV width in CSS to enable scrolling on an iPad 2

Greetings, I have a simple CSS query that I would like assistance with. I am currently grappling with the concept of managing widths in CSS. I have an absolute positioned <div> that contains a relatively wide table. The width of the <div> is s ...

Enhance your JQuery autocomplete with images and automatically populate hidden data fields!

Is there a way to incorporate images into JQuery autocomplete while also populating hidden data fields? ...

Issues arise when attempting to toggle the Angular Bootstrap 4 navbar, along with challenges related to the navbar-dark feature

Whenever I attempt to click the hamburger icon to toggle the navigation on a small screen width, nothing happens. I've tried looking for solutions in previous questions, but I can't seem to find where my error lies. Moreover, when I remove th ...

When posting from IE7/8, the dropdown value is displayed as an array, while it shows the normal value in Firefox. This is achieved using PHP, HTML, and Java (specifically utilizing D

In my code, I am creating a dropdown menu within a nested for loop. When I submit the form in IE7/8, the values are returned as an array (array { [0] = 11_31_2}), but in Firefox, I receive just 11_31_2. Below is the code snippet I am using: for ($k=1;$k& ...

Filtering Images in Laravel 4

Is there a way to retrieve png files or any other image extensions besides jpg using a filter? I'm having trouble understanding the process and haven't been able to find much information about it. If anyone could provide me with an example, that ...

Navigating to a specific div within a container with vertical overflow in an Angular application

I am working on an angular application where I have a left column with a scrollable div that has overflow-y: auto;, and a right column with bookmark links that jump to sections within the scrollable container. I am currently facing two challenges: 1 - Co ...

What is the best method for achieving precise alignment of all my div elements?

My issue is that my three columns are not aligning properly with the rest of my content. While my header, footer, and featured sections all line up correctly, this is because they are contained within a single div rather than multiple ones. demo: http:// ...

Website Task Organizer for Effective Online Management

I need assistance with a task management system I am developing for a class project. The system is not functioning correctly as information is getting lost before reaching the server and some PHP code snippets are visible on the website. Can someone please ...

Align one item in the center with several other elements

I have a div containing multiple spans with varying widths. While I know that using text-align: center can center all content within the div, my goal is to specifically designate one span as the true center, rather than having the center be the average of ...

Revamp selected bootstrap attribute

Imagine a scenario where there is: @media (min-width: 576px) { #projects-edit-middle-column .equal-columns-wrapper .equal-columns { width: 50%; padding-right: 25px; } } This is being utilized within a container: <div class="equal-columns ...

Issues with ordering directives in Bootstrap 4 are preventing proper functionality on various mobile platforms and devices

When I resize the browser window to mobile width, the order column directive in the code snippet above works fine. However, when I test it on a mobile emulator or an actual mobile device, the order columns do not function properly. This issue seems to be r ...

Why is my CSS Grid still not working correctly even though validation services have confirmed it is 100% correct?

After running my HTML and CSS through the validation services, everything seemed to check out fine. However, when I try to implement the grid layout using the CSS below, it doesn't seem to work as expected: body { display: grid; grid-template ...

Having trouble with a basic jQuery selector not functioning as expected

Having trouble parsing this HTML code: <tr id="a"> <td class="classA"> <span class="classB">Toronto</span> </td> <td class="classC"> <span class="classD">Winnipeg</span> </ ...

Is there a way to change ngx-timeago language when the button is pressed?

I was trying to implement ngx-timeago localization. Everything seems to be working fine, but I am struggling with changing the language from German to Spanish when a button is pressed. Here's the template I am using: {{ date | timeago:live}} <div ...

Field for user input along with a pair of interactive buttons

I created a form with one input field and two buttons - one for checking in and the other for checking out using a code. However, when I submit the form, it leads to a blank page in the php file. What could be causing this issue? UPDATE After changing fro ...

Conquering Bootstrap 3's Image Gallery Customizations

I am currently working with Bootstrap 3 RC1 and struggling to set up the image gallery properly. Issue 1 - The ul is adding unnecessary padding-left or margin-left. What do I need to do to eliminate this? Issue 2 - Each li is extending across the contain ...

A guide to activating automatic filling of usernames and passwords in web browsers

On my login page, I aim to make the user experience seamless by automatically filling in the username and password fields once a user has logged in for the first time. This way, when they return to the login page, all they have to do is click the login but ...

Create static HTML web pages using information from a text file

Exploring a new concept of a random joke generator that loads a unique html page with a quirky joke every time. Currently, the main index page is structured like this: <!DOCTYPE html> <html> <head><title>Jokes</title> ...