Fix CSS so #left and #right don't overlap.

So that the elements in left don't go underneath right.
This commit is contained in:
voussoir 2017-07-16 18:20:30 -07:00
parent 2c5617207a
commit 6986d56b71

View file

@ -17,55 +17,59 @@ body
{
display:flex;
}
#left
#content_body
{
height:100%;
flex: 1;
}
#left
{
flex: 1;
height: auto;
padding: 8px;
}
#description_text
{
padding: 8px;
background-color: rgba(0, 0, 0, 0.1);
font-family: initial;
}
#right
{
width: 316px;
}
#right_inner
{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1;
position: fixed;
top: 30px;
right: 8px;
bottom: 8px;
top: 30px;
width: 300px;
padding: 8px;
background-color: rgba(0, 0, 0, 0.1);
}
#description_text
{
font-family: initial;
padding: 8px;
background-color: rgba(0, 0, 0, 0.1);
}
#editor_area
{
display: flex;
flex: 1;
flex-direction: row;
justify-content center;
align-items: center;
flex: 1;
}
#message_area
{
display: flex;
flex: 2;
flex-direction: column;
justify-content center;
align-items: center;
flex: 2;
width: 100%;
height: 100%;
overflow-y: auto;
background-color: rgba(0, 0, 0, 0.1);
@ -116,6 +120,7 @@ body
</ul>
</div>
<div id="right">
<div id="right_inner">
<div id="editor_area">
<input type="text" id="add_tag_textbox" autofocus>
<button class="add_tag_button" id="add_tag_button" onclick="submit_tag(receive_callback);">add</button>
@ -123,6 +128,7 @@ body
<div id="message_area">
</div>
</div>
</div>
</div>
</body>