Is all I’ve got. All the rules must remain, as they’re part of my website. The “calc(x - y)” cannot be used as width changes on multiple dimensions (as seen in CSS).
How do I make blue div fill remaining width? This can’t be fixed value, it needs to adjust to the other div, and be always filling.
PaulOB
September 26, 2016, 9:04pm
2
Hi,
As usual with these types of things there’s a 100 questions I could ask you about the dynamics of the layout least of all being that height:100% is a precarious property to use unless you know the limitation.
Ignoring the problems mentioned above you could do this in one of three ways (to start with).
Float and overflow:hidden:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body, main { height: 100%; width: 100%; margin: 0; padding: 0; }
div#div1 {
background-color: red;
float:left;
width: 200px;
min-width: 15%;
position: relative;
height:100%;
}
div#div2 {
background-color: blue;
overflow:hidden;
height:100%;
}
</style>
</head>
<body>
<main>
<div id="div1">
Ally
</div>
<div id="div2">
Enemy
</div>
</main>
</body>
</html>
Display:table (but min-width won’t work).
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body, main { height: 100%; width: 100%; margin: 0; padding: 0; }
main{display:table;width:100%}
div#div1 {
background-color: red;
display: table-cell;
width: 200px;
/*min-width: 15%; doesn't apply to table-cells */
position: relative;
}
div#div2 {
background-color: blue;
display: table-cell;
}
</style>
</head>
<body>
<main>
<div id="div1">
Ally
</div>
<div id="div2">
Enemy
</div>
</main>
</body>
</html>
Flexbox for modern browsers.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body, main { height: 100%; width: 100%; margin: 0; padding: 0; }
main{display:flex;}
div#div1 {
background-color: red;
float:left;
width: 200px;
min-width: 15%;
position: relative;
}
div#div2 {
background-color: blue;
overflow:hidden;
flex:1 0 0;
}
</style>
</head>
<body>
<main>
<div id="div1">
Ally
</div>
<div id="div2">
Enemy
</div>
</main>
</body>
</html>
Which method you use depends on the criteria required for the layout and what you expect real content to do when squeezed.
4 Likes
system
Closed
December 27, 2016, 4:04am
3
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.