I'm using Chris Coyier's full width hack on a site I am building, but stumped on how I can get the div to have the height of whatever it is containing.
Usually I would achieve this by adding overflow:auto to the container, but if I do that it breaks the hack. Is it possible to achieve a height and still use this hack?
You can see my problem here: http://beta.revival.tv/
Here is my CSS:
#content-wrap:before, #content-wrap:after {content: ""; position: absolute; top: 0; bottom: 0; width: 9999px;}
#content-wrap:before {right: 100%;}
#content-wrap:after {left: 100%;}
#content-wrap, #content-wrap:before, #content-wrap:after {background:#666;}
#content-wrap {
position: relative;
width:1000px;
margin:0 auto;
padding:25px 0;
}
You can add another div to contain the content inside of the #content-wrap div and then apply overflow: auto; and width: 100%; to it
<div id="content-wrap">
<div id="content"></div>
</div>
#content {
overflow: auto;
width: 100%;
}
I don't know your html, but if the problem is caused by floating elements inside of the div, you may also want to try using display: inline-block; instead
Related
is there any way to make single page website without position absolute? Because when I want to variable height of containers, absolute position is little bit awkward. I mean when I insert more content to one container, the other above it should move down. I've tried position static and relative, but it didn't work for me.
Now my css looks like:
<style>
#header {position: absolute; top: 0; left: 0; width: 100%; height: 20%;}
#main {position: absolute; top: 20%; left: 0; width: 100%; height: 80%;}
#about {position: absolute; top: 100%; left: 0; width: 100%; height: 100%;}
#contact {position: absolute; top: 200%; left: 0; width: 100%; height: 50%;}
</style>
<body>
<div id="header">
content....
</div>
<div id="main">
content...
</div>
<div id="about">
long content which is covered with next div, because its "top" atribute settings
</div>
<div id="contact">
div which covers previous one's end
</div>
But when some container needs to be longer, problem is here..
Thanks for any help!
That depends on the style of your website. Of course you can set up anchors and have a one-page scrolling website, but I don't think that answers your question.
My suggestion is to try using absolute positioned elements as containers, and have your actual template inside them.
It would help if you provided some actual code or a specific issue you're having, as it's currently too vague.
I'll provide an answer to what I think you might be asking, though it isn't clear. I hope this isn't too basic.
Ditch the position property altogether.
Just have a div (which is by default 100% width) as your header at the top of your html. The content should be in another div below that.
Divs by default have 100% width, and their height is dependent on the height of their content. They will grow to accommodate taller content. These behaviors are because they have the property display:block .
You've used % which, if I remember correctly, is relative to the parent element. vh (viewport height) is relative to the height of the screen (100vh is the full height of the screen).
I added the background-color just so it's easier to see.
<style>
#header {
background-color: #777;
height: 20vh;
}
#main {
background-color: #999;
height: 80vh;
}
#about {
background-color: #777;
height: 100vh;
}
#contact {
background-color: #999;
height: 50vh;
}
</style>
html:
<div id="main">
<div id="foo">foo</div>
</div>
css:
html,body{
height: 100%;
}
#main{
height: 100%;
}
#foo{
height: auto;
/* height: 100%; I cannot use height 100% or fixed height for this element*/
}
#foo:before{
content: "bar";
/*I want to use the height in percentage which won't work but work with px*/
height: 100%;
display: block;/* or inline-block*/
}
demo
I cannot use flexbox css for some reason. And I also tried with transform css technique and various techniques such as table but even couldn't get vertical center.
I cannot change the markup and please if possible without touching the css for #main would be great for me.
You can center an element vertically within it's container using this technique:
#foo{
position: absolute;
top: 50%; // move down 50% of parent
transform: translateY(-50%); // move back up 50% of own height
}
Set position: relative; on the #main container to make #foo relate to it.
Demo
Try this:
#foo {
height: auto;
margin:auto;
position:absolute;
top:50%;
}
I have a fixed DIV. The page contents should be displayed after the DIV, but they are under the DIV - partially hidden by it. How can I avoid this?
Here is the DIV's style:
#top_div {
position: fixed;
float: left;
top:0;
width: 100%;
height: 20%;
background-color: black;
}
we do not know your entire code, but if it is like
<div id="container">
<div id="fixed">fixed</div>
//a lot of html code here
</div>
put some top-padding to the .container div, padding equal to the height of the fixed div
Take a look at this.
Fixed Div
HTML:
<div>Fixed div</div>Can we see this?
CSS:
div {
position: fixed;
}
Now without fixed
HTML:
<div>Not Fixed div</div>Can we see this?
CSS:
div {
}
Just to show you what the difference is. You can see the div as position: fixed is sitting on top of the content after. The div will stay in that place always on screen. Thats what fixed does. You do not want this (I don't think as you didn't explain what you want it to do) so just remove it.
Example of position:fixed working on a page that can scroll, you will see it is always on the screen.
Example Here
Do not used fixed as this is what causes the problem for you.
I think you are trying to achieve this (http://jsfiddle.net/6Q9w4/8/)
.header {
height: 20%;
background-color: #4679bd;
position: fixed;
width: 100%;
}
.content {
position: absolute;
top: 20%;
left: 0;
right: 0;
bottom: 0;
padding: 10px;
overflow: scroll;
}
This question already has answers here:
CSS horizontal centering of a fixed div?
(9 answers)
Closed 7 years ago.
I want div to be center horizontally, css code is this:
<style type="text/css">
#footer{
position: fixed;
bottom: 20px;
background-color: red;
width:500px;
margin: auto;/*left:auto; right:auto;*/
}
</style>
and html code:
<body>
<div id="footer">hello world</div>
</body>
I think there is no need to explain my css code, it is almost self-explanatory, but the div is not center horizontally, is there any way to make this?
Thanks in advance.
Try this
#footer{
position: fixed;
bottom: 20px;
background-color: red;
width:80%;
margin: 0 0 0 -40%;
left:50%;
}
JS Fiddle Example
The point to be noted here is, the negative margin-left of exactly half value of width and set the left 50 % of the body
This should work well for you. It works by adding a container div.
<style>
#footer-container{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}
#footer
{
width:500px;
margin:0 auto;
margin-bottom:20px;
background-color:red;
}
</style>
<div id="footer-container">
<div id="footer">hello world</div>
</div>
Put another div inside it with relative position, margin: auto.
Give the fixed one 100% width.
Otherwise you can hack it with negative margin 'trick'
div {
position: fixed;
left: 50%;
width: 500px;
margin-left: -250px;
}
If you're working with modern browsers you can use the flexbox layout module: http://caniuse.com/#feat=flexbox.
Flexbox documentation: developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
Note: Can't post more than two links due to my rep.
JSFiddle.
(Using a footer tag instead of a div#footer as it's simpler.)
<div id="footer-container">
<footer>hello world</footer>
<div>
#footer-container {
bottom: 20px;
position: fixed;
display: flex;
justify-content: center;
width: 100%;
}
footer {
width: 500px;
background-color: red;
}
justify-content: center; 'centers' #footer-container's children, which is just the footer element in this case.
This is very similar to Nick N.'s solution, except that you don't have to reset the text-align property on the footer, and that this is probably the non-'trick' way that you wanted.
The accepted solution is slightly off because the footer's width in that case is variable (80%) instead of at 500px.
To other readers, if your parent is a form element, and the child is an input element, use flex: 1; on the input (child) element, and use max-width: 500px; instead of width: 500px;. Using flex: 1; should make the input element expand to fill the form element's width, which it might not otherwise do.
How can I have an element to be fixed positioned while its width is always 100% of its parent element?
The parent element is as follows:
div.panel-left
{
width: 35%;
float:left;
position:relative;
display: table;
text-align: right;
}
Thanking you
Note: other similar questions I saw on stackoverflow do not solve the width issue stated above.
Do you mean something like this?
Css
div.inner {
position: absolute;
left: 0;
right: 0;
...
}
Html
<div class="panel-left">
<div class="inner">something</div>
</div>