Issue
I want to align two button bars of independent HTML areas (marked as red and green, splitter between them) at the right bottom of its areas on the same height. Also the button bar should be fixed at the pages buttom, also if the content of an area is smaller or heigher.
Desired result:
I was not able to got them to the right side. Thats my current result:
<html>
<head>
<style>
* { font-size:30px }
html,body { height: 100% }
</style>
</head>
<body>
<nav>
Logo, Navigation, Top Bar etc.
</nav>
<div style="display:flex;flex-direction:row;background:silver;position:absolute;top:65px;bottom:20px;right:20px;left:260px;">
<div style="flex-basis:30%;order:0;border:5px solid red">
<div style="padding-bottom:60px;background:pink">
Content area 1<br/><br/>
Content area 1
</div>
<div style="position:absolute;bottom:0px;background:pink;">
<div style="margin:10px 0;">
<button>Area 1.1</button>
<button>Area 1.2</button>
</div>
</div>
</div>
<div style="flex-basis:auto;flex-grow:1;flex-shrink:1;order:2;border:5px solid green">
<div style="padding-bottom:60px;background:lightgreen">
Content area 2<br/><br/>Content area 2<br/><br/>Content area 2<br/><br/>Content area 2<br/><br/>Content area 2<br/><br/>Content area 2<br/><br/>Content area 2<br/><br/>Content area 2
</div>
<div style="position:absolute;bottom:0px;background:lightgreen;">
<div style="margin:10px 0;">
<button>Area 2.1</button>
<button>Area 2.2</button>
</div>
</div>
</div>
<div style="flex-basis:auto;order:1;;background:gray">S<br/>P<br/>L<br/>I<br/>T<br/>T<br/>E<br/>R</div>
</div>
</body>
</html>Any ideas how to solve this better? I thought about flexbox, but don't know how to get both button bars the same height.
Solution
Without using any position, you can achieve the layout you wanted, way easier and better looking!
Also, use a CSS file, it's more practical and helpful! Have everything organized and you'll see how great it is!
body {
margin: 0px;
}
div {
box-sizing: border-box;
}
.tables {
display: flex;
margin-top: 50px;
margin-left: 250px;
border: 1px solid black;
height: 410px;
margin-bottom: 10px;
height: calc(100vh - 75px);
}
.pink-table {
width: 50%;
border: 5px solid red;
background: pink;
position: relative;
}
.pink-table>.list {
overflow: auto;
height: calc(100% - 50px);
}
.pink-table>.buttons {
display: flex;
align-items: center;
justify-content: flex-end;
height: 50px;
gap: 5px;
border-top: 5px solid red;
padding: 5px;
position: absolute;
bottom: 0;
width: 100%;
}
.green-table {
width: 50%;
border: 5px solid green;
background: lightgreen;
position: relative;
}
.green-table>.list {
overflow: auto;
height: calc(100% - 50px);
}
.green-table>.buttons {
display: flex;
align-items: center;
justify-content: flex-end;
height: 50px;
gap: 5px;
border-top: 5px solid green;
padding: 5px;
position: absolute;
bottom: 0;
width: 100%;
}
.middle-div {
background: gray;
padding: 0px 5px;
color: white;
}<nav>
Logo, Navigation, Top Bar etc.
</nav>
<div class="tables">
<div class="pink-table">
<div class="list">
Content area 1<br /><br /> Content area 1
</div>
<div class="buttons">
<button>Area 1.1</button>
<button>Area 1.2</button>
</div>
</div>
<div class="middle-div">S<br />P<br />L<br />I<br />T<br />T<br />E<br />R</div>
<div class="green-table">
<div class="list">
Content area 2<br /><br />Content area 2<br /><br />Content area 2<br /><br />Content area 2<br /><br />Content area 2<br /><br />Content area 2<br /><br />Content area 2<br /><br />Content area 2<br /><br />Content area 2<br /><br />Content area
2<br /><br />Content area 2<br /><br />Content area 2<br /><br />Content area 2<br /><br />Content area 2
</div>
<div class="buttons">
<button>Area 1.1</button>
<button>Area 1.2</button>
</div>
</div>
</div>Answered By - manjiro sano
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.