Elements that can be adjusted in fixed (two) and fluid (one) arrangements

Question

Elements that can be adjusted in fixed (two) and fluid (one) arrangements

My goal is to design a layout with 3 elements, two of which have fixed width while the third will occupy the remaining width of the parent container.

(1): fixed-fluid-fixed The fluid element contains 2 divs, one floated left and the other floated right inside the middle fluid div.

(2): When the fixed divs are placed beside each other, the arrangement should be like this: fixed-fixed-fluid.

(3): If one of the fixed divs is removed, the fluid div should expand to fill the space, resulting in a fluid-fixed layout.

(4): Similarly, if the later fixed div is deleted, the fluid should grow to take up the space, creating a fixed-fluid layout as illustrated.

My Attempts: http://jsfiddle.net/nagendra_rao/28QUr/ (currently unable to rearrange the divs)

I prefer not to use JavaScript, I believe that achieving this layout is possible solely through HTML and CSS.

html css

Answer 1

Answer №1

To create a layout with two or more <div> elements, follow these steps:

<div id="left_column_200px">
    <!-- insert content here -->
</div>
<div id="column_100%_of_remaining>
    <!-- insert content here -->
</div>

#left_column_200px {
    width: 200px; height: auto; overflow: hidden;
    position: absolute; top: 0; left; 0;
    z-index: 2;
}
#column_100%_of_remaining {
    width: auto; max-width: 100%; height: auto; overflow; hidden; padding-left: 200px;
    float: left;
    z-index: 1;
}

By implementing this code, you can achieve the desired layout.

Answer 2

To create a layout with two or more <div> elements, follow these steps:

<div id="left_column_200px">
    <!-- insert content here -->
</div>
<div id="column_100%_of_remaining>
    <!-- insert content here -->
</div>

#left_column_200px {
    width: 200px; height: auto; overflow: hidden;
    position: absolute; top: 0; left; 0;
    z-index: 2;
}
#column_100%_of_remaining {
    width: auto; max-width: 100%; height: auto; overflow; hidden; padding-left: 200px;
    float: left;
    z-index: 1;
}

By implementing this code, you can achieve the desired layout.

Elements that can be adjusted in fixed (two) and fluid (one) arrangements

Answer №1

Similar questions

Why do my tablet media queries take precedence over mobile view media queries?

An interactive selection tool for a website's navigation bar

On a Samsung tablet with Moodle, the body background image is set to display at the top

I am attempting to create a webpage with a primary center image and two additional images on either side using PHP or HTML

Display an image in a new window

What is the best way to prevent a modal from being triggered specifically on mobile devices such as phones and

Asymmetrical Edges for a Pair of Divisions

During the initial cycle, the CSS keyframes animation may experience glitches, but it will run smoothly in subsequent cycles

Ways to eliminate the blue outline on a checkbox in bootstrap 4.1

Issues with Bootstrap loading correctly within a Ruby on Rails application

Refresh the interval variable displayed on the webpage in HTML

What is the best way to connect my JavaScript to this HTML for seamless functionality?

Monitor and follow a specific row in a table on a web client page that does not have a unique identifier, while this table continuously fills with data in real

Combining ThreeJs with AngularJs and OBJLoader results in no rendering or error messages being displayed

How can I extract substrings bounded by certain patterns using regex for parsing HTML?

Clearing selections from a multiple-choice input field

Problem with connecting CSS to HTML in Django

Steps for making a floating header with jquery.floathead

Tips for linking two project routes in NodeJS and incorporating React (I am interested in invoking React within the NodeJS project)

Is there a way to make my DIVS update their content dynamically like buttons do, without manually adding an onclick function in the HTML code?