CODEWITHSUNDEEP
htmlcss
Alex
Alex

Reputation: 35108

Make right div fill the remaining space, but first in the HTML code

How can I accomplish the same look as in https://stackoverflow.com/a/1032952/288568 but with the right div being the first in the HTML (so it appears first later when the site is displayed on a mobile where I stack left and right just on top of each other) ?

<html>

<head>
	<title>This is My Page's Title</title>
	<style type="text/css">
		#left {
			float:left;
			width:180px;
			background-color:#ff0000;
		}
		#right {
			width: 100%;
			background-color:#00FF00;
		}
	</style>
</head>

<body>
	<div>
		<div id="right">
			right
		</div>
		<div id="left">
			left
		</div>
	</div>
</body>

</html>

Upvotes: 0

Views: 34

Answers (2)

react_or_angluar
react_or_angluar

Reputation: 1574

#left {
  width: 20%;
  background-color: #ff0000;
}
#right {
  float: right;
  width: 80%;
  background-color: #00FF00;
}    	
<html>
<head>
	<title>This is My Page's Title</title>
</head>
<body>
	<div>
		<div id="right">
			right
		</div>
		<div id="left">
			left
		</div>
	</div>
</body>
</html>

Upvotes: 2

Asons
Asons

Reputation: 87251

If to use float, add this to your #right rule

float: right;
width: calc(100% - 180px);


<html>

<head>
  <title>This is My Page's Title</title>
  <style type="text/css">
    #left {
      float: left;
      width: 180px;
      background-color: #ff0000;
    }
    #right {
      float: right;
      width: calc(100% - 180px);
      background-color: #00FF00;
    }
  </style>
</head>

<body>
  <div>
    <div id="right">
      right
    </div>
    <div id="left">
      left
    </div>
  </div>
</body>

</html>

flexbox would be another option, here using its order property

<html>

<head>
  <title>This is My Page's Title</title>
  <style type="text/css">
    .wrapper {
      display: flex;
    }
    #left {
      width: 180px;
      order: 1;
      background-color: #ff0000;
    }
    #right {
      flex: 1;
      order: 2;
      background-color: #00FF00;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div id="right">
      right
    </div>
    <div id="left">
      left
    </div>
  </div>
</body>

</html>

Upvotes: 3

Related Questions