We want a top bar on our page which is as wide as the browser's width. The problem is, it is inside a container div. If you pull it out of the container we can expand the div to the body width, but when it is inside the container it can only expand to the width of container.
Is there a solution through which we can expand the topbar past the container div.
<div id="container">
<div id="topBar">
<p>The Paragraph</p>
</div>
</div>
You can position the #topBar absolute without making it relative to its' immediate parent
html, body {
height: 2000px;
}
#container {
width: 50%;
margin: auto;
height: 200px;
background: beige;
}
#topBar {
position: absolute;
left: 0;
background: #ccc;
width: 100%;
}
DEMO
The other possibility is to remove it from the document flow with position:absolute. However, you need to know your height of the topBar, and will have to compensate by forcing a top margin on the rest of your content to keep it below your topBar.
For example, you could do:
#topBar {
position:absolute; /* fixed might also work, here */
top:0; left:0;
width:100%;
height:50px;
}
but you'd also have to have:
#container {
margin-top:50px; /* or more */
}
This will break, however, if you need to make #container position:absolute or position:relative.
Related
I have absolutely positioned text so that it sits inside of my header image, but I cannot figure out how to keep it from moving outside of the header when the browser gets re-sized. If the browser window gets re-sized to a smaller size, the text moves outside of the header, but if the browser window gets re-sized to a bigger size, the text keeps moving to the right of the header!
The header is 800px wide and 150px tall, and it's positioned in the middle of the browser window.
Here's my HTML code:
<div id="container">
<div id="header">
<img src="images/header.jpg" alt="Site Header Image">
<h1>Our Site</h1>
<h2>Catchy slogan...</h2>
</div>
</div>
Here's my CSS code:
body {
margin: 0px;
padding: 0px;
}
#header h1 {
color: #FFFFFF;
position: absolute;
top: 0px;
left: 305px;
}
#header h2 {
color: #FFFFFF;
position: absolute;
top: 30px;
left: 330px;
}
#header img {
width: 800px;
height: 150px;
display: block;
margin-left: auto;
margin-right: auto;
}
There are two issues here:
Absolute positioned elements are laid out with respect to a relative positioned parent. You didn't specify that either #container or #header are relative positioned, so everything is aligned with respect to body - probably not what you want.
Your two container divs, #container and #header are full browser width. You want to constrain them to 800px, to match the image, and center them with margin: auto:
#header {
position: relative;
width: 800px;
margin: auto;
}
Here's a Codepen:
http://codepen.io/eldarshamukhamedov/pen/dGKJGm
That is because absolute positioning works relative to the body IF it does not have any parent with position:relative
Add this code
#header {
width:800px; /* define a width to the header container */
position:relative; /* see note */
margin:0 auto; /* centers header horizontally */
}
i try to create div footer, but have problem.
I have few div blocks located one by one inside container.
Container have 100% height.
Inside Container First Div have 100px height (header).
Second Div (Mainbody) need to have all height up to site bottom (bootom part of screen size) or more.
Third Div have absolute position and located on bottom.
But summary height of Container Div is more than 100% because i see scroll on right part of page.
How to resolve this?
Page with css: height:100% takes more than 100%
html, body {
height: 100%;
margin:0;
padding:0;
background-color: yellow;
}
.container {
position:relative;
min-height:100%;
background-color: green;
}
.header {
background-color: blue;
height: 100px;
}
.mainbody {
background-color: gray;
height: 100px;
}
.footer {
position:absolute;
bottom:0;
width: 100%;
background-color: red;
}
<body>
<div class="container">
<div class="header">
<p>
header
</p>
</div>
<div class="mainbody">
<p>
mainbody
</p>
</div>
<div class="footer">
<p>
footer
</p>
</div>
</div>
</body>
Open with your browser. It doesn't show any scroll bars as shown in this snippet. Set
.container{ height:100%}
rather than
min-height:100%
as it will exceed the page full size.
You might try position:fixed; bottom:0; left:0; right:0; height:somevalue; for the footer element, and for the body element, also add padding-bottom:somevalue(somevalue is the same value for body's padding-bottom and for footer's height)
A dirty solution for your html margins. I've added a margin-top property to your html, body css. Now there is no scrollbar on the right.
It seems like margin: 0; has no effect on margin-top property. I've read online that some browsers tend to set margins by default on certain elements like body. I've given you a really dirty solution that may not work well with responsive design.
html, body {
height: 100%;
margin: 0;
padding: 0;
margin-top: -8px;
background-color: yellow;
}
How to automatically adjust size of the div which is horizontally centred, using another div which has position: fixed property?
To better understand what I mean please take a look at the picture below. Div A is a fixed div with a fixed size and div B is a div which is horizontally centred. I want div B to resize (when I resize browser window) in a such way so right border of A and left border of B never overlap (ideally, if the distance between the borders kept the same).
I know that this can be fairly easy done using JavaScript by reacting on resize events, but I'm wondering is there any way to achieve this in pure CSS?
Here's another way. This should work in older browsers too.
<style>
div {
border: 1px solid red;
height: 100px; }
#A {
position: fixed;
width: 150px; }
#B {
margin: 0px 155px; }
</style>
<div id="A">Stuff</div>
<div id="B">Stuff</div>
How about this:
#a{
width:200px;
}
#b{
width:calc(100% - 400px);
}
Just set the width of B to be 100% of screen width minus twice the width of A and their borders will touch.
When an element is given the settings position: absolute or position: fixed You can change the width of an element by using the left and right properties.
Simply add the same amount to the right as you would to the left
#left {
position: absolute;
width: 150px;
}
#middle {
position: absolute;
left: 165px;
right: 165px;
overflow: auto;
}
/* For demo purposes */
html, body, div { height: 100%; margin: 0; } div { background: red; } #overflow { height: 200%; }
<div id="left"></div>
<div id="middle">
<div id="overflow"></div>
</div>
I have an div element with variable height which I need to be positioned by it's bottom relative to the containers top.
This must be done without changing the html.
e.g.
<div id="container">
<h1>Some Text<br/>more...</h1>
</div>
h1's bottom should be 100px below #container's top.
Thanks a lot
EDIT:
So by Request what I did (or didn't) tried:
Searching with Google for css bottom top position relative but that's not the best search terms in the world...
Normally I would put a container around h1 and give it a height of 100px but then I would need to change the html and that I can't
using bottom: somevalue but that positions the element's bottom relative to the container's bottom.
slain some vampires
You could make use of transform: translateY(-100%), to make the bottom of the element relative when you apply margin-top: 100px to h1.
#container {
width: 200px;
height: 200px;
background: tan;
overflow: hidden;
}
#container h1 {
transform: translateY(-100%);
margin-top: 100px;
background: papayawhip
}
<div id="container">
<h1>Some Text<br/>more...</h1>
</div>
Depending on browser support requirements:
#container {
position: relative;
}
#container h1 {
position: absolute;
bottom: calc(100% - 100px);
}
Example
Only way through it is to add a height to the h1 unless you want to go with calc which isn't supported yet by some browsers. Then set your top margin to be top: 100px - h1's height. Hope this works
<div id="container">
<h1>Some Text<br/>more...</h1>
</div>
#container {
width: 300px;
height: 300px;
background: #222;
overflow: hidden;
}
#container h1 {
background: #444;
position:relative;
height:80px;
top:20px;
}
http://jsfiddle.net/ms889w57/
#container
{
position: absolute;
height: 100px;
bottom:0px;
}
This code is not affecting html at all. I added css for id-container.
An absolute position element is positioned relative to the first parent element that has a position other than static. You can change it to fixed it you wants to.
Height of the container, help you to calculate spacing from bottom.
I've tried many examples in other questions but none seem to work for me. I'm simply trying to create a div container with a side bar 100px wide and will vertically expand with the container if it dynamically grows. See below;The inner div simply won't grow even when I set the height to 100%
My CSS looks this;
<style>
#outer {
border:10px solid #7A838B;
margin:10px;
border-radius:30px;
max-width:500px;
min-height:200px;
}
#leftblock {
background-color:#7A838B;
width:100px;
height:auto;
border-top-left-radius:20px;
border-bottom-left-radius:20px;
margin-left:-10px;
margin-top:-10px;
}
#inner {
color:white;
height:100%;
}
</style>
and my HTML is like so;
<div id="outer">
<div id="leftblock">
<div id="inner">
Test
</div>
</div>
</div>
It goes as #mmeverdies says,
In order to set height:100%, the parent must establish a defined height too but if height property value is 'inherit', then the grandparent must set it. and so on.
You basically have two options here, either:
1) Define the exact height of the parent element. Then 100% height of the child will work then.
2) Stretch the child element with position: absolute like this: http://jsfiddle.net/r02nbmd9/ - note the position: relative of the parent and position: absolute of child.
<div class="parent"><div class="child"></div></div>
<style>
.parent {
position: relative;
width: 300px; min-height: 200px;
background: yellow;
}
.child {
position: absolute; top: 0; bottom: 0;
width: 100px;
background: red;
}
</style>
In order to set height:100%, the parent must establish a defined height too but if height property value is 'inherit', then the grandparent must set it. and so on.
to understand it take a look to this css.
example: for full browser height.
html, body {
height: 100%;
}
#outer {
height: 100%;
}
#leftblock {
height: 100%;
}
#inner {
height:100%;
}
by default the HTML height is 0. so, you must set the height property to other than 'inherit' of at least one parent.