So I'm working on some html/css stuff
I can't seem to get these two floating div's and the footer to be correctly sized inside the parent div.
the content div is positioned absolutely to get header and footer to show respectively.
HTML:
<div id="Content">
<div id="Header">header</div>
<div id="Container">
<div id="leftTable">
<div>left content</div>
</div>
<div id="rightTable">
<div>right content</div>
</div>
</div>
<div id="Footer">
<div>footer</div>
</div>
</div>
CSS:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#Content {
padding: 0 15px;
height: 100%;
background-color: honeydew;
position: relative;
height: 100%;
}
#Header {
height: 60px;
background-color: aliceblue;
}
#Footer {
position: absolute;
bottom: 0;
background-color: purple;
height: 70px;
}
#Container {
background-color: green;
position: absolute;
top: 60px;
bottom: 70px;
margin-right: 15px;
}
#Container:after {
clear:both;
}
#leftTable {
float: left;
width: 50%;
height: 100%;
background-color: grey;
}
#rightTable {
float: left;
width: 50%;
background-color: blue;
}
http://jsfiddle.net/4CabB/12/
I was hoping to no position the Container div or footer div on the left and right sides and just have it take up the remaining space.
I'm a bit unclear as to what needs to be achieved, but perhaps this solves your issue: JSFiddle.
Essentially, I just needed to add
width: 100%;
to your container to allow its children to take up the space. Parent containers, when absolutely positioned, must have their widths specified.
Related
I want to keep header height constant while box on the right side of the header should get expanded as a I keep adding multi line content. Please see attached image
My Code
.parent {
width: 100%;
height: 200px;
background: #fff;
position: relative;
background: #1c1d1f;
}
.rightbar {
position: absolute;
width: 40%;
height: 500px;
background: #efefef;
}
.content {
width: 40%;
height: auto;
}
.footer {
width: 100%;
}
<div class="header">
<div class="rightbar">content inside box</div>
<div class="content">
some content goes here
</div>
</div>
<div class="footer">
footer content goes here
</div>
If you want a scrollbar appear in your right-side bar then you should try to use overflow-y:auto;
Like below:
.rightbar {
position: absolute;
width: 40%;
height: 500px;
background:#efefef;
overflow-y:auto;
}
I rarely do html/css stuff so I'm struggling trying to implement what seems like a pretty basic layout. I have a bunch of div elements stacked vertically as well as centered horizontally across my html page. The problems I'm facing are
a) the top div (orange) is slightly wider than the other divs.
b) I want the top (orange) div to be visible even when scrolling, which currently isn't the case.
Actually, in order to make the top div always visible, I set its corresponding class' position attribute to fixed but it doesn't work since I also have other divs, and their position is set to relative. If I remove the relative position on the other divs, the orange div works as expected but the rest of divs are not horizontally centered anymore.
.fiksan {
background-color: orange;
position: fixed;
top: 0;
height: 40px;
}
div {
padding: 10px;
color: white;
width: 60%;
left: 20%;
position: relative;
top: 40px;
}
.naslov {
background-color: lightblue;
text-align: justified;
height: 180px;
position: relative;
}
.elementi {
background-color: blue;
height: 650px;
}
.css_elementi {
background-color: purple;
height: 400px;
position: relative;
}
<div class="fiksan">
</div>
<div class="naslov">
</div>
<div class="elementi">
</div>
<div class="css_elementi">
</div>
This is what it looks like now (when scrolling the top div is covered by other divs, and I don't want that)
position:sticky might be what you look for : see https://css-tricks.com/position-sticky-2/
.fiksan {
background-color: orange;
position: sticky;
top: 0;
height: 40px;
}
div {
padding: 10px;
color: white;
width: 60%;
margin:auto;
}
.naslov {
background-color: lightblue;
text-align: justified;
height: 180px;
}
.elementi {
background-color: blue;
height: 650px;
}
.css_elementi {
background-color: purple;
height: 400px;
}
<div class="fiksan">
</div>
<div class="naslov">
</div>
<div class="elementi">
</div>
<div class="css_elementi">
</div>
Is it possible to make a div absolute to a specific relative div rather than just the parent?
For example. I have a div that's contained inside of a row. But, I want it to be absolute in the section rather than the row. Both divs are positioned relative because of a WordPress themes styling. If I use position absolute it will just make it absolute to the row.
How can I get around this issue?
.section {
width: 100%;
height: 100%;
position: relative;
background: #f5f5f5;
}
.row {
width: 80%;
height: 100%;
position: relative;
background: #000000;
margin: 0 auto;
}
.content {
width: 200px;
height: 200px;
background: pink;
position: absolute;
right: 0;
top: 0;
}
<div class="section">
<div class="row">
<div class="content">
</div>
</div>
</div>
This is not how positioning works. A div or any other element is relevant to its parent regarding its positioning. In case you want to position an element inside the section that you have, it's better to construct your code as follows:
<div class="section">
<div class="absoluteDiv">
</div>
<div class="row">
</div>
</div>
You could find some more examples here
Hope it helps,
Konstantinos.
Although you can not make a div absolute to a specific div, one way to get the results you are looking for is to add overflow:visible; to the row and left:100%; to content container. I changed the section height to 300px for demonstration purposes but it will behave the same with 100%.
.section {
width: 100%;
height: 300px;
position: relative;
background: #f5f5f5;
}
.row {
width: 80%;
height: 100%;
position: relative;
background: #000000;
margin: 0 auto;
overflow:visible;
}
.content {
width: 200px;
height: 200px;
background: pink;
position: absolute;
left: 100%;
top: 0;
}
<div class="section">
<div class="row">
<div class="content">
</div>
</div>
</div>
Tried a few things(margin-auto, text align:center etc) to centre this relative div - which is the header in my responsive layout with no luck. Any other ways to try?
The problem is keeping it centered as the page expands/contracts
Its CSS properties are
#header {
height: 170px;
width: 100%;
overflow: visible;
padding: 10px;
margin-bottom: 7px;
position: relative;
z-index: 99;
}
How can a div appear visually centered when it's 100% width of its parent?
Check out this fiddle: https://jsfiddle.net/w6332ytc/
HTML:
<div class="wrapper">
<div class="inner">
Content
</div>
</div>
CSS:
.wrapper {
width: 100%;
background: #000;
height: 300px;
}
.inner {
width: 50%;
background: red;
margin: 0 auto;
}
I need to have positioning set to absolute so I can have #bottom fixed at the bottom of the screen. I also need to have this fit the width/padding of the container #panel. When I set the position to absolute however, the width just fills the whole screen's width, how can I stop this? I need #bottom to fit inside the width/padding of #panel.
HTML:
<div id="panel">
<div id="bottom">
<div class="update"></div>
</div>
</div>
CSS:
#panel {
width: 21.25%;
height: 100%;
background-color: #0794ea;
float: left;
padding: 0 1.5%;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.update {
width: 100%;
background-color: #006699;
text-align: center;
height: 56px;
color: white;
}
#bottom {
position: absolute;
bottom: 20px;
width: 100%;
}
Above is an image of what's happening. Green is the padding and blue is the content area it should be fitting in (dark blue is the actual div (#panel) that I'm trying to fit in the content area). I'm assuming because it's absolute it's ignoring this, I'm looking for a way to get around this.
Fiddle: http://jsfiddle.net/qTJhW/
Thanks
The problem with what you are doing is that it is taking the the entire width including the padding and aligning it to the left side width the padding. You can fix this by using a wrapper with a relative position. Also don't forget to make the #panel position relative.
The code you end up with is something along these lines:
<div id="panel">
<div class="wrapper">
<div id="bottom">
<div class="update">
a
</div>
</div>
</div>
</div>
And the CSS:
#panel {
width: 21.25%;
height: 100%;
background-color: #0794ea;
float: left;
padding: 0 1.5%;
box-sizing: border-box;
}
.update {
width: 100%;
background-color: #006699;
text-align: center;
height: 56px;
color: white;
}
.wrapper {
position: relative;
height: 100%;
}
#bottom {
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
background: yellow;
}
Here is an example:
http://codepen.io/DanielVoogsgerd/pen/Lezjy
You can use calc like this:
width: calc(100% - Padding)
You should only add another outer wrapper block with explicitly declare 'position: relative' then it will work.
In this case:
<style>
#outer {
position: relative;
width: 100%;
height: 100%;
}
</style>
<div id="panel">
<div id="outer">
<div id="bottom">
<div class="update"></div>
</div>
</div>
</div>
It will solve your problem.
add left:0px to your absolute id. it start form 0px with his relative id