The HTML code starts with a fluid middle column in a 3-column layout, while the other two columns have fixed widths

Question

The HTML code starts with a fluid middle column in a 3-column layout, while the other two columns have fixed widths

I am interested in creating a traditional 3-column layout similar to this:

|  |      |  |
|L |  M   |R |
|  |      |  |

I have been tasked with using the following html structure: as depicted, the Main div is the initial node of #container

<body>
  <div id="container">
    <div id="M">Main</div>
    <div id="L">Left</div>
    <div id="R">Right</div>
  </div>
</body>

Is there a way to achieve this layout with and without the use of css3 new features?

UPDATE: #L and #R have a set width of 200px. #container shares the same width as the window (excluding body margin) and #M's left border connects with the right border of #L, while #M's right border connects with the left border of #R.

html css

Answer 1

Answer №1

Here is my strategy for achieving this specific layout.

#M {
  width: 60%;
  height: 500px;
  margin: 0 auto;
  background: brown;
  position: relative;
  top: 0;
}

#L {
  width: 20%;
  height: 500px;
  position: absolute;
  top: 0;
  left: 0;
  background: #c1c1c1;
}

#R {
  width: 20%;
  height: 500px;
  position: absolute;
  top: 0;
  right: 0;
  background: #c1c1c1;
}

This method ensures that the layout is fully responsive. However, if a fixed width for the outer divs is preferred, that can also be implemented.

JSFIDDLE

Answer 2

Here is my strategy for achieving this specific layout.

#M {
  width: 60%;
  height: 500px;
  margin: 0 auto;
  background: brown;
  position: relative;
  top: 0;
}

#L {
  width: 20%;
  height: 500px;
  position: absolute;
  top: 0;
  left: 0;
  background: #c1c1c1;
}

#R {
  width: 20%;
  height: 500px;
  position: absolute;
  top: 0;
  right: 0;
  background: #c1c1c1;
}

This method ensures that the layout is fully responsive. However, if a fixed width for the outer divs is preferred, that can also be implemented.

JSFIDDLE

Answer 3

Answer №2

Could we achieve something similar to this example?

#A {
  display:inline-block;
  background:blue;
  width:33%;
}


#B {
  float:right;
  display:inline-block;
  background:green;
  width:33%;
}


#C {
  float:left;
  display:inline-block;
  background:orange;
  width:33%;
}

Answer 4

Could we achieve something similar to this example?

#A {
  display:inline-block;
  background:blue;
  width:33%;
}


#B {
  float:right;
  display:inline-block;
  background:green;
  width:33%;
}


#C {
  float:left;
  display:inline-block;
  background:orange;
  width:33%;
}

Answer 5

Answer №3

Note: It is actually feasible to achieve this using flexboxes. However, compromising browser compatibility for the sake of markup order might not be ideal.

Unfortunately, this solution does not accommodate the presence of the #M element at the top. Unless we resort to some clever positioning tricks, I don't see how this can be achieved.

If we were to relocate the #M element to the bottom, the following code would be applicable:

#M {
    background-color: #eeffff;
    height: 200px;
    margin: 0 200px;
}
#L {
    background-color: #ffeeff;
    float: left;
    height: 200px;
    width: 180px;
}
#R {
    background-color: #ffffee;
    float: right;
    height: 200px;
    width: 180px;
}

In such a scenario, unless the parent container has a fixed width, the middle section would be flexible while the left and right sections remain static. Alternatively, you could specify the margin and width of the #L and #R elements as percentages.

Answer 6

Note: It is actually feasible to achieve this using flexboxes. However, compromising browser compatibility for the sake of markup order might not be ideal.

Unfortunately, this solution does not accommodate the presence of the #M element at the top. Unless we resort to some clever positioning tricks, I don't see how this can be achieved.

If we were to relocate the #M element to the bottom, the following code would be applicable:

#M {
    background-color: #eeffff;
    height: 200px;
    margin: 0 200px;
}
#L {
    background-color: #ffeeff;
    float: left;
    height: 200px;
    width: 180px;
}
#R {
    background-color: #ffffee;
    float: right;
    height: 200px;
    width: 180px;
}

In such a scenario, unless the parent container has a fixed width, the middle section would be flexible while the left and right sections remain static. Alternatively, you could specify the margin and width of the #L and #R elements as percentages.

The HTML code starts with a fluid middle column in a 3-column layout, while the other two columns have fixed widths

Answer №1

Answer №2

Answer №3

Similar questions

Conceal the div element when located beneath an ordered list with a designated

Revamp the Bootstrap Form Upload feature

Ensure uniform height for images in the absence of specific dimensions

Press the "Reveal More" button to expand the content to its full size

Let's talk about the CSS properties for centering content and automatically

What is the best method for deleting an uploaded image from a box?

What is the best way to expand a scrollbar's width with CSS?

Issue with header background images not showing up in Safari browser

When the user clicks, display one div and conceal the others

The issue of unselection not functioning properly for multiple items when using both selectable and draggable features

Expanding HTML Editor's Functionality in Eclipse with Custom Tags

Is your MJML column layout not stacking properly on mobile devices?

Issue with Refreshing Header Row Filter Control in Bootstrap Table

Concealing the view-source feature in core PHP or HTML

Customize the background color of highlighted text using HTML and jQuery

The child div vanishes abruptly instead of smoothly transitioning like its parent

When incorporating conditional statements into your code, make sure to utilize the tags <script> along with

Using CSS and JavaScript to create a gradient-style opacity effect for smoothly fading out content

Footer in Bootstrap 3 malfunctions if <h2> tag is missing

Showing error messages in Angular when a form is submitted and found to be invalid