I've trying to get a layout where a a fixed-height table with two rows, the first scaling to the its content, and the second being the remaining height, and keeping its contents inside it. The height of the bottom part needs to be 'real' (not clipped by a parent or anything), such that it could have overflow: scroll, or children of height: 100%, etc.
This is what it should look like:
I got it working in Chrome, using an absolutely positioned div inside a relative table-cell:
http://jsfiddle.net/9FPqx/
The core of it:
html:
<div class="row">
<div class="cell">
<div class="absolute-fill">
Stuff
</div>
</div>
</div>
css:
.row
{
display: table-row;
}
.cell
{
display: table-cell;
position: relative;
}
.absolute-fill
{
position: absolute
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
overflow: hidden;
}
With another intermediary relative div between the table-cell and the content (rather than setting relative on the table-cell itself), it works in Firefox:
http://jsfiddle.net/sXHry/
It does not work in IE. I need IE >= 9.
It seems like IE thinks the relative element with absolute child has no content height, and so gives it 0 height.
I feel like I'm so close but so far. Is there a way of solving this with just html and css? Am I on the wrong track using display: table? Or should I give up and just throw some javascript at it?
Why does it need to be a table? Can't you just let the container hide the overflow?
html
<div class="container">
<div class="top">
Top, green area
</div>
<div class="bottom">
Bottom, blue area
</div>
</div>
css
.container {
width: 250px;
height: 162px;
overflow: hidden;
background: lightblue;
}
.top {
background: lightgreen;
}
http://jsfiddle.net/sXHry/1/ and http://jsfiddle.net/sXHry/2/ (less content)
I suspect i might be missing something, looking forward to being enlightened ;)
Related
I'm running into a minor issue with one of the elements on my page. I have a sidebar which I am attempting to have span the height of the page by using the following CSS:
#sidebar {
width: 180px;
padding: 10px;
position: absolute;
top: 50px;
bottom: 0;
float: left;
background: #eee;
color: #666;
}
The corresponding CSS is pretty much what you'd expect:
<div id="header">
The header which takes up 50px in height
</div>
<div id="main-container">
<div id="sidebar">
The sidebar in question
</div>
<div id="main-content">
The rest of my page
</div>
</div>
The code works as expected for the most part. When the page renders it spans 100% of the height (minus the 50px from the top). The problem is that it essentially assigns the box to the exact height of the window so as I scroll down the box scrolls away instead of staying locked to the bottom of the window. Any ideas how to resolve this?
You have to use position:fixed if you want for the sidebar to be fixed on some position:
#sidebar {
width: 180px;
padding: 10px;
position: fixed;
top: 50px;
bottom: 0;
background: #eee;
color: #666;
}
JSFiddle
Another way would be to give to the parent container position:relative, and on his child position:absolute - but then the parent must have some height so the child element takes its height.
html,body{
position:relative;
height:100%; /* some height */
}
#sidebar{
width: 180px;
padding: 10px;
position: absolute;
top: 50px;
bottom: 0;
background: #eee;
color: #666;
}
JSFiddle
Check learnlayout to read more about positioning.
use css position:fixed to make the sidebar fixed.
in order to lock the height according to screen height i would use javascript/jquery:
$(function(){
// assign to resize
$(window).resize(set_height);
});
function set_height() {
$('#sidebar_id').height($(window).height());
}
hope that helps
First of all, I don't understand how it's spanning 100% of the height when no height has been defined.
Secondly use position: fixed instead of absolute.
On a second note, I'd like to recommend what seems a more proper way of going about positioning this. At the end of the main-container div, before it's closing tag, put this
<div style="clear: both;"></div>
and make the main container also float left, or float right if that doesnt give you what you want. It's suprising how such a common layout can feel tricky to do properly. (at least for newbies like us). I might be wrong, this might not be a better way, but it's the way I'd do it. The extra div you add is so that floated divs take up space, apart from that if it doesn't work, give the sidebar a height of 100%, or if you think it will overflow, tell me I'll add to my answer.
I have a div with dynamic text content. The amount of text varies between one word and five or ten words (with large font). Right now, it's absolutely positioned some amount from the bottom and the right of its relatively positioned parent.
However, since the content is dynamic, it looks awkward when sometimes there is more text and the text goes further into the main area of the parent. This is because right now, the reference point of the div is its bottom right corner. Is it possible to have it positioned with the center as the reference point, as depicted above?
The parent container is just styled as normal, with position: relative; and 100% width and height
CSS for the child container is also fairly standard:
position: absolute;
bottom: 33%;
right: 33;
I've tried playing with width, max-width, and min-width, but the result is still not desirable
How about this? Compare these two fiddles using the CSS below fiddle1 & fiddle2
HTML
<div id="parent">
<div id="anchor">
<div id="child">
<h1>Some text</h1>
</div>
</div>
</div>
CSS
#parent {
position: relative;
width: 100%;
height: 100%;
}
#anchor {
position: absolute;
right: 33%;
bottom: 33%;
}
#child {
padding: 10px;
margin-right: -50%;
float: right;
}
I am trying to design a website, where I want a div of 100% height inside a element and then some other div inside it, formatted in a specified manner.
the code I am trying is this
css
#main1{
margin: 0 auto;
width:300px;
background: red;
position:absolute;
}
#content1{
top:0;
width: 300px;
height: 250px;
background: gray;
}
#content2{
width: 300px;
height: 250px;
background: yellow;
}
#content3{
width: 300px;
height: 250px;
background: brown;
}
#bottom{
width: 300px;
height: 75px;
position:absolute;
bottom:0;
background: blue;
}
and I have designed it like this
<td width="300" valign="top" style="position:relative; height:100%">
<div id="main1">
<div id="content1">/*****Content1****/</div>
<div id="content2">/*****Content2****/</div>
<div id="content3">/*****Content3****/</div>
<div id="bottom">/*****Content4****/</div>
</div>
</td>
I want the div with id content1 at extreme top and with id bottom at extreme bottom inside td, so that if the height of the element varies it automatically get aligned at top and at bottom with margins in between the inner divs, also I want this to be all browsers compatible.
I tried and it worked in IE.
I have tried so many codes but couldn't get the solution
You can see in this link at right side that where and what I am trying to make
http://www.spoiledagent.com/about_hanu.html
Thanks
First, I'd ask that you display the whole of the HTML markup for the body structure. A small snippet doesn't give an accurate picture of the entire structure that could be affecting your undesired result.
Second, I'd recommend you don't use tables for site layout. It's bad practice for a variety of reasons. Here's a Q/A with supporting arguments.
Third, you have to remember that every element that you make has a parent, right up until the <html> tag. So, let's say I wanted the main container of my site to have 100% height to the window.
Let's say this is the only other element besides <html> or `'.
<div id="container">
<h1>Why you no touch the bottom?</h1>
</div>
with this CSS:
#container {
background: #ccc;
height: 100%;
}
http://jsfiddle.net/BvNY4/
In this fiddle, we can see it doesn't to to 100% height. Why? Well...technically, it is...but it's parent isn't. So like a brave Tee-Ball coach, we need to tell this element's parents what to do:
html, body {
padding: 0;
margin: 0;
height: 100%;
}
http://jsfiddle.net/B6RH7/1/
Ta-da! Let me know if you need anymore clarification on how this applies to your scenario. :)
A little more directed at your specific goals, try this article explaining position: relative; for parent elements. If the parent element has attribute position: relative;, any child elements with position: absolute; will position themselves to the parent element.
I want to align a div to the bottom of the PAGE, not to the bottom of the screen. When I do this:
#contact-block{
position: absolute;
bottom: 0; left: 0;
}
, the div is placed in the bottom area of the screen. When my page is long, I have to scroll down and the div which should have been at the bottom, floats somewhere in the middle.
There might be a simple solution to this, but I'm just not seeing it.
Here's my HTML:
<div id="left">
<div id="submenu"> <span class="menutitle">Services</span>
<ul>
</ul>
</div>
<div id="contact-block">
<span class="contacttitle">Contact</span></div>
</div>
<div id="content">
</div>
I've also added a little image to illustrate what I mean:
The red div is the contact div.
Edit:
I've found a solution with jQuery and CSS. This might not be the best solution, but hey, it works.
jQuery:
var offset= $(document).height()-$("#contact-block").height()- $("#footer").height()-60;
$("#contact-block").css("top", offset);
$("#contact-block").css("left", $("#wrapper").position().left);
CSS:
#contact-block {
position : absolute;
width:216px;
height:100px;
background:url(../img/contact-bg.jpg) repeat-x #5c5c5c;
}
You could absolute-position the your divs in place. This technique requires a #wrapper element, which I'm not a fan of, but hey, you gotta do watcha gotta do.
In this example I removed the #left div entirely as it was only required for layout purposed and is no longer necessary.
HTML:
<div id="wrapper">
<div id="submenu">This is services</div>
<div id="contact-block">This is contact</div>
<div id="content">This is content</div>
</div>
CSS:
#wrapper {
position: relative;
width: 960px;
}
#submenu {
position: absolute;
left: 0;
top: 0;
width: 320px;
height: 320px;
}
#contact-block {
position: absolute;
left: 0;
bottom: 0;
width: 320px;
height: 160px;
}
#content {
position: relative;
left: 320px;
right: 0;
top: 0;
width: 640px;
height: 640px;
}
//#content position is relative for the #wrapper to stretch.
//The left property is equal to the width of the #submenu or #contact-block element
A good point of this technique is that it gives you cleaner HTML. I believe it will be easier to make a mobile version of your version if the need arise.
The jsfiddle
Additional thought:
The #wrapper element could easily be removed in favor of you body element, which is a great step towards semantic HTML. Check this out!
The position of your absolute positioned element depends on the first ancestor-element, which is not positioned static ( which is the default, so you have to explicitely set it to relative(or absolute) ).
So, make sure, your enclosing #left container has 100% document-heigth and position:relative, and everything is well.
I would suggest putting the red div inside the right long div and at the end of it. Then use position: relative and negative left margins on the red div to push it out to the left. This way, as your right div expands, your red div always stays at the bottom of it.
I'm designing a website which has fixed elements on the outer edges of a fixed-width layout. A div in the center is reserved for the content.
When the user scrolls, I want all of the content (besides said fixed outer navigation elements) to stay within the borders of that center element.
Here's a quick mockup of what I mean:
I could very easily set the overflow property of the center element to auto, and have everything remain inside. However, it's very important that a scroll bar not be present on the edge of that element.
Basically, I'm wondering how to either:
Restrict content to that area
(perhaps I could change the size and
positioning of the body element -- is
that allowed? -- and then position
the fixed elements outside of the
body.
Hide the scroll bar that appears
inside the div when using
overflow:auto
Any help would be greatly appreciated!
If possible, you should break your fixed position elements up into 4 separate sections (top, left, right and bottom). Then just make sure you pad you centre content area by their respective widths and heights so the content doesn't get overlapped:
HTML
<!-- 4 fixed position elements that will overlap your content -->
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
<div id="bottom"></div>
<div id="content">
<!-- Your content -->
</div>
CSS
html, body {
height: 100%;
}
#top, #left, #right, #bottom {
position: fixed;
left: 0;
top: 0;
z-index: 2;
background: red;
}
#top, #bottom {
width: 100%;
height: 20px;
}
#bottom {
top: auto;
bottom: 0;
}
#left, #right {
height: 100%;
width: 20px;
}
#right {
left: auto;
right: 0;
}
#content {
position: relative;
z-index: 1;
padding: 25px; /* prevent content from being overlapped */
}
You can see it in action here.
Also note the position: relative on the content area. This is so z-index works correctly and the content is displayed below the fixed sections.
If you care about IE6/7 support, you'll need to add a CSS expression fix to get fixed position working properly in those awesome browsers.