Two divs side-by-side, 1st is fluid on the right, 2nd is fixed-width on the left

StackOverflow https://stackoverflow.com/questions/20931725

  •  24-09-2022
  •  | 
  •  

Question

I've currently got this situation - two divs where the 1st is fixed on the left and the 2nd is fluid on the right. I need to switch the HTML position of the two divs, but leave the webpage appearance unchanged.

So,

<div id="fixed"></div>
<div id="fluid"></div>

needs to become:

<div id="fluid"></div>
<div id="fixed"></div>

But when the webpage is displayed, the fluid div needs to be on the right and the fixed on the left. I can't figure this out. Is there a way to do this?

Was it helpful?

Solution

There are various ways to do this. It's best to have both divs inside a container, even if set to width: 100%.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
.container {position: relative;}
#fixed
{
  width: 300px;
  height: 100px;
  background: #111;
  position: absolute;
  top: 0; left: 0;
}

#fluid
{
  height: 100px;
  background: #555;
  margin-left: 300px;
}

</style>
</head>
<body>
<div class="container">
    <div id="fluid"></div>
    <div id="fixed"></div>
</div>

</body>
</html>

A modern option is to use flexbox, but it's not reliably supported yet.

OTHER TIPS

Add float: right to #fixed-div.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top