I need to have a page with 3 main sections; Header, Footer and Content. I want the footer, ONLY the footer, to scroll horizontally. The other sections will contain static information (A Map and Chart).
Below is the code. I was hoping to see a scroll bar in only the green box! What am I missing?
#Header {
position: absolute;
top:0px;
left: 0px;
width: 100%;
height: 200px;
border: 1px solid red;
}
#Footer {
position: fixed;
bottom:0px;
left: 0px;
width: 100%;
height: 180px;
border: 2px solid blue;
overflow: hidden;
}
#Footer_Inset {
position: fixed;
bottom:10px;
left: 10px;
width: 3000px;
overflow-style: scrollbar;
height: 160px;
border: 2px solid Green;
}
<body>
<div id="Header"></div>
<div id="Footer">
<div id="Footer_Inset"></div>
</div>
</body>
HTML:
<div id="Header">static content</div>
<div id="Footer">
static content
<div id="Footer_Inset">
<div id="Footer_Content">scrollable horizontally</div>
</div>
</div>
CSS:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
#Header {
position: absolute;
top:0px;
left: 0px;
width: 100%;
height: 200px;
border: 1px solid red;
}
#Footer {
position: fixed;
bottom:0px;
left: 0px;
width: 100%;
height: 180px;
border: 2px solid blue;
}
#Footer_Inset {
overflow-x: scroll;
height: 160px;
border: 2px solid Green;
}
#Footer_Content {
width: 3000px;
}
jsfiddle
If I understand this correctly, you should add overflow-x: scroll to #Footer and remove overflow-style: scrollbar from #Footer_Inset.
http://jsfiddle.net/ds1hc4L3/
Try putting the overflow inside #Footer instead of Footer_Inset
I also had problems with position: fixed for #Footer_Inset. Since #Footer is already fixed, using static positioning seems to look ok for me.
#Header {
position: absolute;
top:0px;
left: 0px;
width: 100%;
height: 200px;
border: 1px solid red;
}
#Footer {
position: fixed;
bottom:0px;
left: 0px;
width: 100%;
height: 180px;
border: 2px solid blue;
overflow-x: auto;
padding: 10px;
}
#Footer_Inset {
width: 3000px;
height: 160px;
border: 2px solid Green;
}
In #Footer change to overflow-x: auto;. Remove position: fixed; from #Footer_Inset.
http://jsfiddle.net/wilchow/uh53xejm/
#Header {
position: absolute;
top:0px;
left: 0px;
width: 100%;
height: 200px;
border: 1px solid red;
}
#Footer {
position: fixed;
bottom:0px;
left: 0px;
width: 100%;
height: 180px;
border: 2px solid blue;
overflow-x: auto;
}
#Footer_Inset {
bottom:10px;
left: 10px;
width: 3000px;
height: 160px;
border: 2px solid Green;
display: block;
}
Related
The div should grow up left, however, it does the opposite as of now.
The margin-left and top is necessary by the way.
Quick gif showcasing the issue: https://gyazo.com/ce51c504698395c26cffefb9b74e7e3e
html, body {
width: 100%;
height: 100%;
}
#a {
width: 50%;
height: 100%;
border: 1px solid black;
}
#img-wrapper {
margin-left: 10%;
margin-top: 20%;
width: 50%;
position: relative;
border: 1px solid red;
}
img {
width: 100%;
}
<div id="a">
<div id="img-wrapper">
<img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12225358/Pug-On-White-01.jpg" alt="">
</div>
</div>
Try this:-
#a {
width: 70%;
height: 100%;
border: 1px solid black;
position: relative;
}
#img-wrapper {
width: 40%;
position: absolute;
bottom: 0;
right: 0;
border: 1px solid red;
}
If you want your image going from right to left by increasing width property, you should give it float property:
#img-wrapper {
float: right;
margin-top: 0; // if you want it to start from top right edge
}
added margin-right: 10%; float: right;
#img-wrapper {
margin-right: 10%;
margin-top: 20%;
width: 50%;
position: relative;
border: 1px solid red;
float: right;
}
html,
body {
width: 100%;
height: 100%;
}
#a {
width: 50%;
height: 100%;
border: 1px solid black;
position: relative;
}
#img-wrapper {
margin-right: 10%;
margin-top: 20%;
width: 52%;
position: absolute;
border: 1px solid red;
right: 0;
bottom: 50%;
transform: translateY(50%);
}
img {
width: 100%;
}
<div id="a">
<div id="img-wrapper">
<img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12225358/Pug-On-White-01.jpg" alt="">
</div>
</div>
Sounds like the problem isn't about getting the image to "grow up left" but is about positioning the #img-wrapper.
You can solve this by positioning the #img-wrapper absolutely and specifying its bottom and right position. I've added a :hover style so you can see it 'grow' on hover.
A word of warning though. Positioning something of unknown/variable size using percentages is going to give you very mixed results at different viewport sizes. Perhaps what you want isn't quite as described but I think you should be looking at a more flexible solution such as using flexbox.
html, body {
width: 100%;
height: 100%;
}
#a {
width: 50%;
height: 100%;
border: 1px solid black;
position:relative;
}
#img-wrapper {
right: 30%;
bottom: 30%;
width: 50%;
position: absolute;
border: 1px solid red;
}
#img-wrapper:hover {
width: 70%;
}
img {
width: 100%;
}
<div id="a">
<div id="img-wrapper">
<img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12225358/Pug-On-White-01.jpg" alt="">
</div>
</div>
html, body {
width: 100%;
height: 100%;
}
#a {
width: 50%;
height: 100%;
border: 1px solid black;
position: relative;
}
#img-wrapper {
width: 50%;
border: 1px solid red;
margin: 20% 0 0 20%;
position: absolute;
top:0;
left:50%;
transform: translateX(-50%);
}
img {
width: 100%;
}
I want to create a 2 column liquid layout with a nav bar on the left side that should have a height of 100%, a header that should have a width of 100% and a content section that should have a height and width of 100% as well, and there should be a margin on all sides of 10 or 20 pixels, and also in between the header, nav and content boxes. Here is my fiddle:
https://jsfiddle.net/d2Lnq6sd/1/
header {
position: relative;
height: 75px;
width: 100%;
background-color: red;
border: 1px solid black;
}
nav {
position: relative;
top: 20px;
left: 0px;
height: 100%;
width: 200px;
padding: 10px;
background-color: blue;
border: 1px solid black;
}
section {
position: absolute;
top: 110px;
left: 240px;
width: 100%;
background-color: green;
border: 1px solid black;
}
Now as you can see the nav bar is not 100% in height and the content section is too wide. My final result should look like this:
http://imageshack.com/a/img921/9425/UYp8Ah.png
Tried finding help on google on this issue but I still don't get what I should use, relative or absolute positions and which to use for which attribute. any pointers?
You're good to go: http://codepen.io/8odoros/pen/vKxVYv?editors=1100
nav bar is 100% in height
the content section is not too
wide
html, body {
height:calc(100% - 60px);
}
body {
font-family: verdana;
color: #fff;
}
.container {
position: relative;
margin: 10px;
padding: 10px;
height:100%;
box-sizing:border-box;
}
header {
float:left;
height: 75px;
width: 100%;
background-color: red;
border: 1px solid black;
box-sizing:border-box;
}
nav {
float:left;
margin-top:20px;
height: 100%;
width: 200px;
padding: 10px;
background-color: blue;
border: 1px solid black;
box-sizing:border-box;
}
section {
float:right;
margin-top:20px;
height:100%;
padding: 10px;
width:calc(100% - 220px);
background-color: green;
border: 1px solid black;
box-sizing:border-box;
}
<div class="container">
<header>
This is the header
</header>
<nav>
This is the nav
</nav>
<section>
This is the main section
</section>
</div>
Try this code and see demo:
CSS:
body {
color: #fff;
font-family: verdana;
}
header {
background-color: red;
border: 1px solid black;
height: 75px;
width: 100%;
}
nav {
background-color: blue;
border: 1px solid black;
float: left;
margin: 2% 0;
min-height: 300px;
padding: 10px;
width: 20%;
height: 100%;
}
section {
background-color: green;
border: 1px solid black;
float: right;
position: absolute;
right: 10px;
top: 100px;
width: 75%;
}
See Fiddle Demo
Alright so I changed a few things:
https://jsfiddle.net/d2Lnq6sd/9/
body,html {
height:100%;
}
body {
font-family: verdana;
color: #fff;
}
.container {
position: relative;
margin: 10px;
padding: 10px;
width: 73%;
float: left;
height:auto;
}
header {
position: relative;
height: 75px;
width: 100%;
background-color: red;
border: 1px solid black;
}
aside {
float:left;
width:20%;
margin-top:15px;
margin-left:5px;
height: 100%;
background-color: blue;
border: 1px solid black;
}
section {
width: 100%;
background-color: green;
border: 1px solid black;
}
I have moved your navigation into an aside tag, this is just HTML 5 syntax Link
By using floats and keeping the positions as they were you are able to create the desired effect. To get the width to 100% I would recommend playing with the padding and margins to get it to a 20% + 80% ratio.
Hope this helps :)
Do you need like this ,
Html:
<div class="container">
<header>
This is the header
</header>
<nav>
This is the nav
</nav>
<section>
This is the main section
</section>
</div>
Css:
body {
font-family: verdana;
color: #fff;
}
.container {
position: relative;
margin: 10px;
padding: 10px;
}
header {
position: relative;
height: 75px;
width:675px;
background-color: red;
border: 1px solid black;
}
nav {
position: relative;
top: 20px;
left: 0px;
height: 300px;
bottom:200px;
width: 200px;
padding: 10px;
background-color: blue;
border: 1px solid black;
}
section {
position: absolute;
top: 110px;
left: 240px;
width: 100%;
background-color: green;
border: 1px solid black;
}
you can see the link:https://jsfiddle.net/d2Lnq6sd/11/
You can position nav as fixed, use below to get an idea.
nav {
position: fixed;
top: 20px;
left: 0px;
height: 100%;
width: 200px;
padding: 10px;
background-color: blue;
border: 1px solid black;
margin-top: 76px;
}
I want the border div to be "hidden" behind the circle and not cross through it. I thought z-index was the way to do things like this.
Any ideas?
JSFIDDLE: http://jsfiddle.net/qs5xmege/1/
CSS and HTML
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
width:22px;
height:22px;
border-radius:11px;
border: 3px solid red;
background-color: #FFF;
margin: 30px auto 0 auto;
z-index: 100;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Give .circle a position:relative, z-index works only with position:relative, position:absolute or position: fixed
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
width:22px;
height:22px;
border-radius:11px;
border: 3px solid red;
background-color: #FFF;
margin: 30px auto 0 auto;
position: relative;
z-index: 100;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Add position:relative; to .circle.
z-index need relative, absolute or fixed vaue for position.
Set position:relative of div circle and z-index:2 ie. 1 more than border is enough
.circle {
background-color: #FFFFFF;
border: 3px solid #FF0000;
border-radius: 11px;
height: 22px;
margin: 30px auto 0;
position: relative;
width: 22px;
z-index: 2;
}
Snippet
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
background-color: #FFFFFF;
border: 3px solid #FF0000;
border-radius: 11px;
height: 22px;
margin: 30px auto 0;
position: relative;
width: 22px;
z-index: 2;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Try like this:
.circle {
background-color: #fff;
border: 3px solid red;
border-radius: 11px;
display: block;
height: 22px;
margin: 0 auto;
position: relative;
top: -68px;
width: 22px;
}
.border {
border-right: thin solid black;
height: 100px;
width: 50%;
}
How to move the inside div sqrBall to the bottom left of the parent div container.
Here is the HTML code:
<div class="container">
<div class="sqrBall">
</div>
</div>
Here is the CSS:
.container{
width: 500px;
height: 500px;
border: 1px solid black;
margin: 0 auto;
}
.sqrBall{
width: 10px;
height: 10px;
background-color: blue;
}
Here is a DEMO
You can use absolute positioning on the inner element if the parent element has relative positioning. for example:
.container{
width: 500px;
height: 500px;
border: 1px solid black;
margin: 0 auto;
position:relative;
}
.sqrBall{
width: 10px;
height: 10px;
background-color: blue;
position:absolute;
bottom:0;
left:0;
}
n.b. if the parent isn't positioned relatively, the inner element will be positioned to the bottom left of the body, not its parent. (at least in this example)
try this demo
Fiddle
.sqrBall {
width: 10px;
height: 10px;
background-color: blue;
position: absolute;
top: 98%;
left: 0;
}
.container
{
position:relative;
}
You have to add two more properties to your existing class .sqrBall
Properties are...
position: relative;
top: 98%;
Below is the working demo, hope it helps you
<style type="text/css">
.container
{
width: 500px;
height: 500px;
border: 1px solid black;
margin: 0 auto;
}
.sqrBall
{
background-color: blue;
height: 10px;
position: relative;
top: 98%;
width: 10px;
}
</style>
<html>
<div class="container">
<div class="sqrBall">
</div>
</div>
</html>
.container {
width: 300px;
height: 300px;
border: 1px solid black;
margin: 0 auto;
position: relative /* Container should have relative position */
}
.sqrBall {
position: absolute; /* Child should have absolute position */
bottom: 0;
left: 0;
width: 30px;
height: 30px;
background-color: blue;
}
<div class="container">
<div class="sqrBall">
</div>
</div>
.container{
width: 500px;
height: 500px;
border: 1px solid black;
margin: 0 auto;
position:relative;
}
.sqrBall{
width: 10px;
height: 10px;
background-color: blue;
position:absolute;
bottom:0;
left:0;
}
Try like this: Demo
Add the following along with your code
CSS:
.container {
display:table;
}
.sqrBall {
float:left;
margin-top: 100%;
}
How could I center the blue box inside the red one ?
I see that the left side of the blue box is exactly in the middle of the red box, but I would like to center the whole blue box, not its left side. The dimensions of the boxes are not constant. I want to align regardless of boxes dimensions. Example to play with here. Thanks !
HTML:
<div id="rel">
<span id="abs">Why I'm not centered ?</span>
</div>
CSS:
#rel {
position: relative;
top: 10px;
left: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center;
}
#abs {
position: absolute;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
}
If you're able to change the <span> tag to a <div>
<div id="rel">
<div id="abs">Why I'm not centered ?</div>
</div>
Then this piece of CSS should work.
#rel {
position: absolute;
top: 10px;
left: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center; }
#abs {
width: 300px;
height: 200px;
border: 1px solid blue;
margin: auto;
margin-top: 50px; }
I think it's better to use more automation for the enclosed box as less changes would be needed should you change the size of the container box.
You could add left:50px to #abs if that's all you want...
#abs {
position: absolute;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
left:50px;
}
If you are going to define dimensions like that (200px x 300px and 300px x 400px), here's how it can be centered:
#rel {
position: relative;
top: 10px;
left: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center;
}
#abs {
position: absolute;
width: 300px;
height: 200px;
border: 1px solid blue;
margin: 49px 0 0 49px;
}
You can check at my solution here at http://jsfiddle.net/NN68Z/96/
I did the following to the css
#rel {
position: relative;
top: 10px;
left: 20px;
right: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center;
display: table-cell;
vertical-align: middle;
}
#abs {
display: block;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
margin: 0 auto;
}
This should work
#abs {
position: absolute;
left: auto;
right: auto;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
}