I am trying to put a top bar on the right of my left menu.
I put width: 100% of my #top_bar but there is so big. I would like that my top bar take only the remaining space of the screen.
HTML:
<body>
<div id="menu_left"></div>
<div id="top_bar"></div>
</body>
CSS:
#menu_left {
background-color: #354052;
position: fixed;
height: 100%;
float: left;
width: 200px;
}
#top_bar {
border-bottom: 1px solid #EFF0F3;
position: absolute;
background-color: white;
left: 200px;
height: 70px;
width: 100%;
}
Result:
#top_bar {
border-bottom: 1px solid #EFF0F3;
position: absolute;
background-color: white;
top: 0px;
left: 200px;
right: 0px;
height: 70px;
}
You can use the margin left for the large div
CSS :
#menu_left {
background-color: #354052;
position: fixed;
height: 100%;
float: left;
width: 200px;
}
#top_bar {
border-bottom: 1px solid #EFF0F3;
background-color: red;
margin-left: 200px;
height: 70px;
}
HTML :
<body>
<div id="menu_left"></div>
<div id="top_bar"></div>
</body>
Working Demo
Just add this to your css:
body {
margin: 0;
width: 100%;
overflow: hidden;
}
Try to use a 100% width container around your elements.
<div class="container">
<div id="menu_left">
</div>
<div id="top_bar">
NAVIGATION
</div>
</div>
See this pen I just created: http://codepen.io/anon/pen/MwodLx
Maybe this? You could only change width: 100% to right: 0. Also float: left is unnecessary.
html, body {
width: 100%;
height: 100%;
margin: 0;
}
#menu_left {
background-color: #354052;
position: fixed;
height: 100%;
width: 200px;
}
#top_bar {
border-bottom: 1px solid #EFF0F3;
position: absolute;
background-color: white;
left: 200px;
right: 0;
height: 70px;
}
<div id="menu_left"></div>
<div id="top_bar"></div>
Related
Whenever the pink container touches the bottom of green container I want to make it unsticky. Is it possible? I tried but couldn't achieve it.
here's the code
also codepen link : Click Here
.container1 {
width: 500px;
height: 400px;
background-color: lightblue;
text-align: center;
margin: 0px auto;
position: sticky;
top: 0;
z-index: -1;
}
.container2 {
width: 300px;
height: 200px;
background-color: lightgreen;
text-align: center;
margin: 0px auto;
position: absolute;
top: 0;
left: 0;
z-index: -2;
}
.container3 {
width: 500px;
height: 400px;
background-color: pink;
text-align: center;
margin: 20px auto;
}
<div class="container1">
<div class="container2">
</div>
</div>
<div class="container3">
</div>
I have 2 divs displayed vertically inside another div with height: 100%. The bottom div is automatically resizing it's height.
It's there a way that the first div will fill the parent in it's height?
#my_app {
background-color: #ff0000;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
}
#top_container {
display: table-cell;
background-color: #00ff00;
height:auto;
width:100%;
margin-bottom: auto;
}
#container {
position: absolute;
bottom: 0;
left: 5%;
width: 90%;
background-color: #d8d8d8;
display: table-cell;
}
#edit_container {
margin: 20px;
min-height: 44px;
max-height: 80px;
width: 70%;
height: auto;
overflow: hidden;
background-color: #484040;
display: flex;
align-items: center;
}
#edit {
width: 100%;
margin: 0px 20px;
min-height: 20px;
max-height: 80px;
overflow: scroll;
line-height: 20px;
background-color: #ff5e2d;
}
#test {
position: absolute;
top: 0;
right: 20px;
bottom: 0;
width: 30%;
background-color: #ff0;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
[contentEditable=true]:empty:not(:focus):before {
content: attr(data-text);
}
[contentEditable=true]:empty:focus:before {
content: attr(data-text);
}
[contenteditable]:focus:after {
content: '';
}
<div id="my_app">
<div id="top_container">
NEW TEST
</div>
<div id="container">
<div id="edit_container">
<form>
<div id="edit" contenteditable="true" data-text="Insert text"></div>
</form>
</div>
<div id="test">
ACTION
</div>
</div>
</div>
And here is the jsfiddle: https://jsfiddle.net/RoxanaCristea/4460up4s/
Thank you in advance!
You need to specify "height: 100%;" to your body element.
Have a look at this question: How to fill 100% of remaining height?
I have the following arrangement:
I have parent div with class container with width: 100%; and also both html and body have width: 100%, and so far it is working as expected.
But inside div with class container, i have two divs, one div with width: 300px,
and other div with width: calc(100% - 300px),
where parent with class mainpage has width: calc(100% - 300px), and child div with class page has width: 100%;
but width: 100% is not working on this div?
even though parent div width is determinant.
code: https://jsfiddle.net/tj8k0nnw/1/
.container {
width: 100%;
background-color: #d5d5d5;
}
.sidebarcontainer {
width: 300PX;
height: 2000px;
display: inline-block;
box-sizing: border-box;
padding: 5px;
padding-right: 2px;
}
.innersidebarcontainer {
position: relative;
width: 100%;
height: 100%;
}
.sidebar {
width: 293px;
background-color: white;
height: 700px;
top: 1px;
position: absolute;
}
.mainpage {
width: calc(100% - 300px);
padding: 5px;
padding-right: 2px;
height: 3000px;
display: inline-block;
box-sizing: border-box;
background-color: teal;
}
.page {
width: 100%;
width: 100%;
background-color: white;
}
.footer {
height: 500px;
width: 100%;
margin: 0 auto;
background-color: purple
}
.test1 {
background-color: red;
position: absolute;
left: 0;
right: 0;
top: 0;
height: 200px;
}
.test2 {
background-color: red;
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 200px;
}
<div class="container">
<div class="sidebarcontainer">
<div class="innersidebarcontainer">
<div class="sidebar">
<div class="test1"></div>
<div class="test2"></div>
</div>
</div>
</div>
<!--
-->
<div class="mainpage">
<div class="page"></div>
</div>
</div>
<div class="footer"></div>
The code provided is working. You have not specified a height for page so the height is 0. Giving it a height causes it to become visible: https://jsfiddle.net/kvjw9vhm/
.container{
width: 100%;
background-color: #d5d5d5;
}
.sidebarcontainer{
width: 300PX;
height: 2000px;
display: inline-block;
box-sizing: border-box;
padding: 5px;
padding-right: 2px;
}
.innersidebarcontainer{
position: relative;
width: 100%;
height: 100%;
}
.sidebar{
width: 293px;
background-color: white;
height: 700px;
top: 1px;
position: absolute;
}
.mainpage{
width: calc(100% - 300px);
padding: 5px;
padding-right: 2px;
height: 3000px;
display: inline-block;
box-sizing: border-box;
background-color: teal;
}
.page{
width: 100%;
height: 100%; /* was width: 100%; */
background-color: white;
}
.footer{
height: 500px;
width: 100%;
margin: 0 auto;
background-color: purple
}
.test1{
background-color: red;
position: absolute;
left: 0;
right: 0;
top: 0;
height: 200px;
}
.test2{
background-color: red;
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 200px;
}
<body>
<div class="container">
<div class="sidebarcontainer">
<div class="innersidebarcontainer">
<div class="sidebar">
<div class="test1"></div>
<div class="test2"></div>
</div>
</div>
</div>
<div class="mainpage">
<div class="page"></div>
</div>
</div>
<div class="footer"></div>
</body>
Above provided code is working , just add some height in page class.
.page{
width: 100%;
height:100px;
background-color: green;
}
By default height is 0 ,if there's no content .Below is demonstration, check it out:
.mainpage{
width: calc(100% - 300px);
padding: 5px;
padding-right: 2px;
height: 3000px;
display: inline-block;
box-sizing: border-box;
background-color: teal;
}
.page{
width: 100%;
height:100px;
background-color: green;
}
.footer{
height: 500px;
width: 100%;
margin: 0 auto;
background-color: purple
}
<body>
<div class="container">
<div class="sidebarcontainer">
<div class="innersidebarcontainer">
<div class="sidebar">
<div class="test1"></div>
<div class="test2"></div>
</div>
</div>
</div><!--
--><div class="mainpage">
<div class="page"></div>
</div>
</div>
<div class="footer"></div>
</body>
Looks like there is not much problem with your code and you did a typo by mentioning width twice in the .page class. Changing one of them to height worked fine for me and should work for you too.
Let me know if you face any problem.
I'm fairly new to web development and I'm trying to create a simple chat page using SQL. This is what I currently have: Codepen
HTML:
<body>
<div id="overlay"></div>
<div id="header">
<div id="logo">
</div>
</div>
<div id="chat_extended">
<div id="chat_area"></div>
<input id="chat_input" type="text" placeholder="Chat...">
<button id="send_button" onClick="send()">SEND</button>
</div>
</body>
CSS:
html,
body {
background-color: #333;
margin: 0;
padding: 0;
}
#overlay {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.2;
background: #ccc;
background: -webkit-linear-gradient(right top, #8900AB, #282828);
background: -o-linear-gradient(top right, #8900AB, #282828);
background: -moz-linear-gradient(top right, #8900AB, #282828);
background: linear-gradient(to top right, #8900AB, #282828);
}
#header {
position: absolute;
background: #404040;
width: 100%;
height: 10%;
border-bottom: 10px solid #9800AB;
}
#logo {
position: absolute;
background-image: url(http://csgovoid.net/img/logo.png);
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 100%;
}
#chat_extended {
position: absolute;
background: #404040;
margin-top: 3.15%;
width: 20%;
height: 100%;
float: right;
border-left: 10px solid #9800AB;
text-align: center;
padding-top: 5%;
}
#chat_area {
position: absolute;
background: #ccc;
width: 100%;
height: 100%;
text-align: left;
}
The chat window should be aligned to the left, with the chat area within the chat window, like this:
You don't need float:right when using position: absolute, just remove that and add right: 0 to #chat-extended
#chat_extended {
position: absolute;
background: #404040;
width: 20%;
height: 100%;
border-left: 10px solid #9800AB;
text-align: center;
right: 0;
Hope this helps!
The float property does not work on absolutely positioned elements.
On #chat_extended, Replace this:
float: right;
with this:
right: 0;
Absolute positioning like that isn't really a best practice for a layout like this, so once you get more comfortable, you might want to change it.
How do I keep a resizable div from being overlapped by neighboring elements? I changed the z-index of the resizable div to have 1, and the rest 0.
This example will make it clear right away:
http://jsfiddle.net/gALUP/1/
HTML
<div id='grid'>
<div class='outline'>
<div class='container resizable'>
</div>
</div>
<div class='outline'>
<div class='container'>
</div>
</div>
</div>
CSS
.outline {
height: 200px;
width: 200px;
border: 1px solid black;
position: relative;
z-index: 0;
display: inline-block;
}
.container {
height: 100%;
width: 100%;
background-color: #ff0000;
}
.resizable {
background-color: #0000ff;
position: absolute;
z-index: 1;
}
Remove z-index: 0 from .outline:
.outline {
height: 200px;
width: 200px;
border: 1px solid black;
position: relative;
display: inline-block;
}
.container {
height: 100%;
width: 100%;
background-color: #ff0000;
}
.resizable {
background-color: #0000ff;
position: absolute;
z-index: 1;
}
http://jsfiddle.net/elclanrs/gALUP/2/