I've a problem with my Menu, I don't know how to fix this. It needs to get the full height of your screen but I can't fix it.
Here is my CSS code.
nav{
background-color: #F9F9F9;
width: 300px;
padding: 10px;
position: absolute;
height: auto;
float: left;
box-shadow: -25px 0px 60px #00000033;
}
html body nav div#nav-inner{
padding-top: 70px;
margin: -10px;
}
Here is a JSFiddle with my problem:
JSFiddle
First you need wrapper div inside body:
<body>
<div class="wrapper"><!--added-->
<nav>...</nav>
<div id="container">...</div>
</div>
</body>
With CSS:
.wrapper{
position: relative;
overflow: hidden;
}
Next you need to change #container div "position:absolute" to "position:relative"
and finally:
nav{
height: 100%
}
On this way. You will have relative .wrapper with height of your page content and with full height of this content :)
Related
I have something akin to the following structure:
<html>
<body>
<div>
</div>
</body>
</html>
I want the inner div to occupy the full vertical height of the page except for an 8px margin from top and bottom. I also want this div to be centered horizontally within the body with a minimum margin of 8px from left and right. I do not want the page to scroll and need to avoid using calc() at all costs for browser support-ability.
I have tried:
html, body{
height: 100%;
}
div {
position: absolute;
top: 8px;
bottom: 8px;
}
Which is fine for forcing it to leave an 8px "margin", but centering it horizontally now becomes impossible without using a calc() since its width is variable and there are no elements for it to be relative to.
I hope I understand your question right... you want the div to fill the whole window, except for 8px... Is that right?
You can do that using this CSS:
div {
background: lightblue;
position: absolute;
top: 8px;
left: 8px;
bottom: 8px;
right: 8px;
}
Check the demo.
[OPTION 2]
If you want the div to have a fixed width (or semi-fixed with max-width or min-width) you can use this code:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
padding: 8px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
div {
background: lightblue;
width: 300px;
margin: 0 auto;
height: 100%;
}
It says the body to be 100% height and width and calculate the padding within it's width (therefor the box-sizing) property. Then you can specify the width on the div, and center it by using margin: 0 auto.
Check the updated demo.
div{
display: block;
margin-left: auto;
margin-right: auto;
}
centered div
UPDATE: remove position: absolute;
FIDDLE
You can use margin:
div {
margin: 0 auto;
}
I think it's best to introduce a new div:
<body>
<div class="container">
<div class="center"></div>
</div>
</body>
Then in your CSS you could do this:
.container {
position: absolute;
top: 8px;
bottom: 8px;
left: 0;
right: 0;
}
.center {
margin: 0 auto;
}
http://jsfiddle.net/5X79H/1/
following code will center your div:
<body>
<div class="container">
<div class="center"></div>
</div>
</body>
style:
.center {
margin-left: auto;
margin-right: auto;
display: inline-block;
background-color:maroon;
width:100px;
height: 100px;
}
.container{
width:100%;
text-align: center;
}
I have three divs. I need header and left_side divs to be fixed and content div to scroll. I've been searching for solution and found something with overflow and position. But I can not use it corectly. How can I do this? I will be thankfull for every kind of answer.
body {
width: 100%;
height: auto;
padding: 0;
margin: 0px auto;
font-family: Calibri, Georgia, Ubuntu-C;
font-size: 16px;
margin-bottom: 20PX
}
#header{
width: 100%;
height: 139px;
background-image: url('images/Header_grey.gif');
}
#left_side {
width: 210px;
height: 700px;
background-image: url('images/Left_side.gif');
background-repeat:repeat-y;
overflow:hidden;
position:absolute;
font-size: 16px;
}
#content {
height: auto;
padding: 20px;
margin-left: 230px;
margin-right: 20px;
padding-bottom: 30px
}
<div id="header">
</div>
<div id="left_side">
</div>
<div id="content">
</div>
overflow: auto; adds the scroll when need
#header{
width: 100%;
height: 139px;
background-image: url('images/Header_grey.gif');
overflow: hidden; /* code added to prevent scroll */
}
#left_side{
width: 210px;
height: 700px;
background-image: url('images/Left_side.gif');
background-repeat:repeat-y;
overflow:hidden; /* code added to prevent scroll */
position:absolute;
font-size: 16px;
}
#content{
height: auto;
padding: 20px;
margin-left: 230px;
margin-right: 20px;
padding-bottom: 30px;
overflow: auto; /* code added */
}
at first you will need to have a fixed height for content area.
then make overflow:auto there
ERROR in your code:: you want to have a scroll bar for a div,but you are declaring that div height as auto
you cant demand a scroll bar when the height is auto,to have scroll bar you will need to have a fixed height for that div and when the content height will be greater than div height it will introduce scroll bar automatically
NOTE: so the changes in your css will be
#content{
height: 300px;/*..very important if you want scroll bar...*/
overflow: auto; /*..will introduce scroll bar when needed..*/
padding: 20px;
margin-left: 230px;
margin-right: 20px;
padding-bottom: 30px
}
EXAMPLE :: FIDDLE
If you want the header and left side to stay in their position while scrolling, you will have to use position:fixed
You can just use position fixed. http://jsfiddle.net/Nrs2u/1/
#header {
position: fixed;
z-index: 2;
left: 0%;
top: 0%;
width: 100%;
height: 10%;
background-color: purple;
}
#side {
position: fixed;
z-index: 2;
left: 0%;
top: 10%;
width: 10%;
height: 90%;
background-color: red;
}
#body {
position: absolute;
left: 10%;
top: 10%;
width: 90%;
height: 300%;
background-color: orange;
}
position: sticky on the element, that should stay in place when scrolling, worked for me in a similar situation.
https://www.w3schools.com/css/tryit.asp?filename=trycss_position_sticky
position: sticky;
top: 0px;
#left_side{
...
overflow:auto;
}
Set also a padding-right to create a space between div's inner content and scrollbar
As an learning exercise, I decided to update the answer by using CSS3 Flexbox. I also tried to more closely match the layout that jstorm31 was attempting to create.
Ritabrata's answer is the correct one: If you want a specific element to have scroll bars, you need to set its height (and/or width) to a fixed size and overflow to auto.
Code also to be found here: Plunker
style.css
#header{
overflow: hidden;
background-color: #880016;
height: 50px;
border-bottom: 4px solid black;
padding: 10px;
font-size: 20px;
}
#side_and_content {
display: flex;
}
#left_side{
flex: 1;
overflow:hidden;
background-color: #ED1B24;
height: 200px;
border-right: 2px solid black;
padding: 10px;
}
#content{
flex: 5;
overflow: auto;
background-color: #FF7F26;
height: 200px;
border-left: 2px solid black;
padding: 10px;
}
index.html
<div id="header">
header header header header header header
</div>
<div id="side_and_content">
<div id="left_side">
left side left side left side left side left side
</div>
<div id="content">
CSS3 Flexbox Concepts:
Flexbox consists of flex containers and flex items.
A flex container is declared by setting the display property of an element to either flex
(rendered as a block) or inline-flex (rendered as inline).
Inside a flex container there is one or more flex items.
Note: Everything outside a flex container and inside a flex item is rendered as usual.
Flexbox defines how flex items are laid out inside a flex container.
Flex items are positioned inside a flex container along a flex line.
By default there is only one flex line per flex container.<br>
It is also possible to change the direction of the flex line.
If we set the direction property to rtl (right-to-left), the text is drawn right to left, and also the flex line changes direction, which will change the page layout
</div>
</div>
I'm trying to get a div to fill the remaining height of a div. Here's my HTML and CSS:
CSS:
* {
padding: 0px;
margin: 0px;
}
#container {
margin: 85px auto 0px auto;
background: #444444;
min-height: 500px;
width: 900px;
}
#topbar {
width: 900px;
height: 85px;
background: #555555;
}
#leftbar {
width: 250px;
height: 100%;
background: #666666;
}
HTML:
<div id="container">
<div id="topbar">
</div>
<div id="leftbar">
</div>
</div>
I expected leftbar to fill the height between the bottom of topbar and the bottom of container, but it's scretching container so that leftbar is 100% of the page height.
You can stretch the leftbar with absolute positioning and setting the top/bottom values:
* {
padding: 0px;
margin: 0px;
}
#container {
position: relative;
margin: 85px auto 0px auto;
background: #444444;
min-height: 500px;
width: 900px;
}
#topbar {
width: 900px;
height: 85px;
background: #555555;
}
#leftbar {
position: absolute;
top: 85px;
bottom: 0;
width: 250px;
background: red;
}
Fiddle:
http://jsfiddle.net/robertp/CQ7pf/
Try adding this to container:
position: relative;
and then add this to leftbar:
position: absolute;
top: 0;
bottom: 0;
Set your left bar to position: relative;
So leftbar should be container's height minus topbar's height. Since container and topbar have hard-coded height values, it follows that leftbar will have to be hard-coded also. It's not the prettiest thing in the world but it's simpler than the alternative, JavaScript.
If container is 500px in height, subtract the height of topbar (85) and container's margin (85) to arrive at a height of 330px. Since container uses min-height, use min-height for leftbar also to allow it to stretch the container if need be. You should also change leftbar's position to relative to render the height of container correctly.
Bottom line:
#leftbar {
position: relative;
min-height: 330px;
}
Not sure how to title the question. I have an html structure like this:
<div id="nav"></div>
<div id="wrapper">
<div id="content">
</div>
</div>
With some css like this:
#nav {
width: 200px;
height: 50px;
margin: 0 0 0 -100px;
position: fixed;
left: 50%;
background: red;
}
#wrapper {
width: 250px;
height: 1000px;
margin: 0 auto;
background: blue;
}
#content {
width: 200px;
height: 1000px;
margin: 0 auto;
background: green;
}
The wrapper is wider than the content, and the content is centered in the wrapper. My problem is keeping the nav div, which is fixed to the top of the page, centered/aligned with the content div when the window is smaller than the wrapper div. Issues arise when you scroll left and right, the fixed div stays centered in the window and the content div scrolls left and right. I'm trying to accomplish this without javascript.
Here's a jsfiddle of what I'm running into, resize the results window to see how the nav div won't stay centered/aligned with the content div when the window is smaller than the wrapper div.
http://jsfiddle.net/p2Mzx/1/
Thanks in advance!
The easiest solution would be to put #nav in your #wrapper and give it a horizontal margin of 25px:
html:
<div id="wrapper">
<div id="nav"></div>
<div id="content">
</div>
</div>
css:
#nav {
width: 200px;
height: 50px;
margin: 0 25px;
position: fixed;
top: 0;
background: red;
}
#wrapper {
width: 250px;
height: 1000px;
margin: 0 auto;
background: blue;
}
#content {
width: 200px;
height: 1000px;
margin: 0 auto;
background: green;
}
Also see the fiddle.
It would be more appropriate to put the nav inside the wrapper, just above the content.
<div id="wrapper">
<div id="nav"></div>
<div id="content"></div>
</div>
The CSS of the nav can have left and right margins of 25px. Also absolute positioning and the width is not needed.
#nav {
height: 50px;
margin: 0px 25px 0px 25px;
background: red;
}
#wrapper {
width: 250px;
height: 1000px;
margin: 0 auto;
background: blue;
}
#content {
width: 200px;
height: 1000px;
margin: 0 auto;
background: green;
}
Please see this fiddle: http://jsfiddle.net/p2Mzx/20/
You can fixed the nav and content to give padding-top.
Consider this link jsfiddle
I think you can add margin: 0 auto for nav too.
Then nav will be positoned to parent element just like wrapper,centered.
but removed fixed form nav. position:fixed makes it positioned to the browser window and out of narmal flow. Is that you want?
Ok so I've got a header and a footer with absolute positioning and heights of 144px. The content div in the middle area needs to be the full height of the area in between.
Simplified:
<style>
.marginals{
position: absolute;
height: 144px;
width: 100%;
left: 0;
}
#header{ top: 0px; }
#footer{ bottom: 0px; }
</style>
<div id="header" class="marginals"></div>
<div id="content"> Content </div>
<div id="footer" class="marginals"></div>
So basically I want a div that is 100% - 288px. At first I thought I could just make a 100% x 100% div with 144 padding on top and bottom and then stuff the content div in there at 100% but my thinking has gone stray somewhere.
Here's an example I made using 20% height for 'bread layers'. (Which I can't do on this project) Used 60% height for the scrolling 'meaty layer' and put it at top: 20%;
What you have won't work, tables and absolute positioning don't go well together, and height on table rows and cells is not handled consistently across browser anyway so I think you'd find it hard to get the top/bottom rows to stay a fixed height while still asking the middle row to scroll
however I think you were right with your original posting and using absolute positioning, you don't need percentages though, you can use the top and bottom co-ordinates tohether, so you can tell the middle div to start at 144px from top and finish 144px from bottom..
e.g.
HTML:
<div class="header">Some header content</div>
<div class="wrap">
Bulk content<br>bulk content<br>bulk content<br>bulk content<br>
Bulk content<br>bulk content<br>bulk content<br>bulk content
</div>
<div class="footer">Some footer content</div>
CSS:
html, body {margin: 0; padding: 0; height: 100%; overflow: hidden;}
.wrap {
position: absolute;
left: 0;
top: 144px; /* = height of header including any borders or padding */
bottom: 144px; /* = height of footer including any borders or padding */
width: 100%;
background: #fff;
overflow: auto;
}
.header, .footer {
position: absolute;
width: 100%;
left: 0;
height: 140px;
background: #f00;
}
.header {
top: 0;
border-bottom: 4px solid #000;
}
.footer {
bottom: 0;
border-top: 4px solid #000;
}
The whole thing is based on the html, body elements having the height of 100% set
Example: here
Looks like you're trying to create a 3 liquid row-layout. Why not try something like this:
Fiddle: http://jsfiddle.net/jCjsD/2/
HTML
<body>
<div id="body_container">
<div id="header">Some header content</div>
<div id="content"><!-- Bulk content here !--></div>
</div>
<div id="footer">Footer</div>
</body>
CSS
#header, #content, #footer {
float: left;
width: 100%;
}
#header {
border-bottom: 1px solid #888;
background: yellow;
}
#footer {
border-top: 1px solid #888;
background: yellow;
}
#content {
clear: both;
padding-bottom: 50px;
}
#footer {
position: relative;
margin-top: -50px;
height: 50px;
clear:both;
}
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#body_container {
min-height: 100%;
}