I have never thought that writing a simple two column layout is so complicated using css....haha
What I want to do is the following:
When the height of the content div exceed the height of screen size, scroll bar exist only in the content div. The users can only scroll the content div but the sidebar keeps static
The two columns should have the same height
My layout is:
<---------------container------------------->
<-------------------header------------------>
<-----sidebar-------><---------content--->
<------------------footer------------------->
<---End of container------------------------->
Here is my css file:
http://137.189.145.40/c2dm/css/main.css
#WorldContainer
{
width: 1000px;
margin: auto;
overflow: hidden;
}
.ContentColumn
{
float: left;
width: 500px;
overflow: auto;
}
<div id="WorldContainer">
<div class="ContentColumn">
Content goes here!
</div>
<div class="ContentColumn">
Content goes here!
</div>
</div>
That will give you a page where the main div cannot scroll but the two div columns can. They will be side by side. You question wasn't exactly clear so hopefully this is what you were after.
EDIT: In response to you showing the example site.
Your problem is really simple.
All of your divs have a height rule of height: 100%;
When you use percentage height, you are making it a percent of the container it is within, i.e Its parent container. It is NOT a percentage height of the entire window.
Every container is specifying a percentage height so the result is a height of 0.
Give your outermost div a fixed height and the problem will be resolved.
Additional Edit:
If you are concerned with making sure the outermost div always stretches to the bottom of the window then this is a css solution using absolute positioning:
#OutermostDiv
{
position: absolute;
top: 0;
bottom: 0;
}
Using this approach still causes a calculated height even though the outer div doesn't have a hard coded height. This will allow you to use percentage heights on your inner divs and maintain a outer div that stretches from top to the bottom of the visible window.
You'd have to set your container element to overflow:hidden;, and your content div to overflow:scroll; (and possibly do overflow-x:hidden; to hide the horizontal scrollbar). The problem with this is that if your sidebar & content are going to be the same height, then you would have to have TWO scrollbars - one for content, and one for sidebar.
You could probably solve this by using another container element around just sidebar & content, and setting the overflow: scrollbar; overflox-x:hidden; on it instead of sidebar/content.
You can also use display:table and display:table-cell to create columns if you're facing difficulties with float. Here's the CSS:
#container
{
width:960px;
margin:0;
padding:0;
display:table;
}
#sidebar
{
width:300px;
display:table-cell;
}
#content
{
width:660px;
display:table-cell;
}
and the HTML is:
<div id="container">
<div id="sidebar">
<!-- Sidebar Content Here -->
</div>
<div id="content">
<!-- Content Here -->
</div>
</div>
Hope this solves your problem. But display:table doesn't work in some old browsers.
Related
I have two child divs side by side in a parent div. Left child div has a long list as content. It should be vertically scrollable. Right child div content will be added/removed dynamically. Its height keeps changing.
So I want left child's height to be adjusted to match the height of right child.
Is this doable with CSS
Html
<div id='parent'>
<div id='left-kid'>
Very Long content
<hr>
Overflow: Scroll
</div>
<div id='right-kid'>
Vertically Growing Content
</div>
</div>
CSS
#left-kid {
float: left;
overflow: scroll;
}
#right-kid {
float: left;
}
i think it's not possible, because the height of the right kid is dynamic, so take this height with JS and specify this height on the left kid:
$("#left-kid").css('height', $("#right-kid").height());
You can try to experiment with display:table
#parent{
display: table;
}
#left-kid, #right-kid {
display: table-cell;
}
This will make both columns of equal height regardless of size increases.
Is this doable with CSS
No. Like Bojan Petkovski commented, you need to somehow specify a height, otherwise the content will just expand the container.
#parent > div {
height: 100%; // or some other height
}
The only other way to do this would be with javascript, which can determine the height each time you dynamically change the content like AnTSaSk's answer.
I have one div which will hold my main contents and will be scrollable; and there is another div(footer) at the bottom exactly below the content div which will be fixed; the catch here is, no matter what the size of the browser window is, the main content div should not hide behind the footer div and it should resize its height based on the height of the browser.
So basically, i want both of them to be fixed at their positions and main div should always be scrollable.
So far whatever i have tried had made my scrollable div hide its content behind the footer.
I hope my question is not confusing.
Flex layout will really help you here:
HTML:
<div id="content">content</div>
<div id="footer">footer</div>
CSS:
body {
display:flex;
flex-direction:column
}
#content {
flex:1;
overflow:auto;
}
#footer {
height:50px; /* Whatever fixed height you desire */
}
Example:
http://jsfiddle.net/0qhevkbn/
I am working on a layout that is placed into a wrapper with a fixed height and contains three inner containers.
The first container (header) should be placed on top within the wrapper and is flexible in it's height.
The second container (content) is flexible in it's height as well and need to overflow if the available space is not sufficient (overflow-y: auto).
The third container (footer) also has an unknown height and needs to be placed at the bottom of the wrapper at any time.
<div id="wrapper">
<div id="header">
<span>
some unknown content that is placed at the top of the wrapper
</span>
</div>
<div id="content">
<span>
some more unknown content and within here we want
to enable vertical scrolling if necessary
</span>
</div>
<div id="footer">
<span>
again unknown content that should be placed at the bottom of
the wrapper at any time
</span>
</div>
</div>
The options I have ruled out so far:
absolute positioning of the footer within the relative positioned wrapper: doesn't work in this case since we don't know the footer's height
flexbox model: not possible since I need to support IE8+
table: the content row doesn't overflow, the complete table would overflow and the footer would be positioned outside of the wrapper
table with the content td element's position set to relative and including a div element with position set to absolute (containing the actual content): seems to fix the overflow issue in most browsers, but e.g. in IE9 the content div (with height set to 100%) results in a height of 0
Is there any other option without using Javascript that might work here?
It took a while but I believe this is it, I adapted it from my answer to another question. The .inner div must have height:100% but anything inside it should be able to be modified however you want.
http://jsfiddle.net/Z4K7J/2/
.left {
border:1px solid orange;
width:200px;
height:300px;
display:table;
}
.top {
display:table-row;
}
.middle {
display:table-row;
height:100%;
}
.middle .inner {
background-color:red;
height:100%;
overflow-y:auto;
}
.bottom {
display:table-row;
}
I have a container div that holds many child divs. One of the divs in my container houses comments. Instead of setting the whole div to scroll, I want everything to stay in place, leaving only the comments div to scroll. I have tried setting the parent overflow to hidden, and the comment div to scroll, and the scrollbar actually shows on the page but it is disabled. Does anyone know how I can accomplish this?
CSS
#container
{
position: absolute;
overflow: hidden;
}
#comments
{
position: relative;
overflow: scroll;
}
HTML
<div id="container">
<div id="comments">
this is what I want to scroll
</div>
</div>
I cannot get rid of the container because it houses many more child elements. I just want everything else to stay static while only the comments can scroll.
You need to set a specific height on the "comments" div to make sure it knows exactly when to scroll. If there's not enough content to fill up that container beyond the specified height, the scrollbar might appear with overflow:scroll but it will be disabled. If you want the scrollbar to appear only when it's actually needed, you'll want to use overflow:auto as the CSS rule. By setting the height of the child container and not the parent, the parent can grow as necessary.
In your example, the position:absolute on the parent container is not required to obtain the solution; however, you might be including that for some other reason.
It is disabled because there's no defined height on the element. Overflow auto will populate the scrollbar if you define a height and the content extends past that height.
#comments{
height:200px;
width:200px;
position: relative;
overflow: auto;
}
You need to add a width and height:
Check out this JSFiddle: http://jsfiddle.net/FgGmQ/
HTML:
<div id="container">
<span>This is the container</span>
<div id="comments">
this is what I want to scroll, this is what I want to scroll,
this is what I want to scroll, this is what I want to scroll,
this is what I want to scroll, this is what I want to scroll,
</div>
<span>The end of the container</span>
CSS:
#container{
overflow: hidden;
}
#container span{
background-color: yellow;
}
#comments{
overflow: auto;
height: 80px;
width:150px;
}
Again, just check out this JSFiddle
I want to make an HTML, CSS page where the layout is as:
<div id="content">
<div id="left">
.....
</div>
<div id="right">
.....
</div>
</div>
The content div has a background image which should be repeated in y-direction. Also the left and right div should be side by side over the same background image.I am able to accomplish it but by keeping the height of the content fixed but I don't want to make the content's height fixed. Please help me folks.
Thanks in Advance :)
without seeing your code... my guess is you're floating the left and right DIVs... but you're not floating the content DIV...
your CSS should look similar to this to make it work:
#content {
float:left;
background-image:url('whatever.png');
background-repeat:repeat-y;
}
#left {
float:left;
}
#right {
float:left;
}
I am able to accomplish it but by
keeping the height of the content
fixed but I don't want to make the
content's height fixed.
If you are able to repeat the background image in the Y direction then it shouldn't matter how heigh the #content div is, as your background will just fill the remaining space - correct?
If your content div is not expanding to the height of the child div's then clearly #content must be outside of the normal flow of the page, in which case you should float it and not set a height for the container div.
It's quite hard to understand what you're trying to do, but I think what you want to do is add overflow: auto to your content div, so that it becomes the same height as the left and right divs:
#content {
overflow: auto;
background: [bg code]
}
#left, #right {
float: left;
}