I have 2 div elements side by side that are set as inline-block. They both reside within a containing div. I have set the right div to height 100% but because the height of the containing div is dynamic it won't expand. Does anyone know how to make the right hand div (coulmn) expand to the dynamic height of the containing div?
<div class="container">
<div class="left_column">Dynamic Content In Here</div>
<div class="right_column">Side bar to expand to the height of the containing div</div>
</div>
Thanks
Oliver
After having some issues with the same problem, the simplest solution is, in my opinion, to use table-cell as the display property. It works perfectly fine!
I think you search something like this:
.container {
min-height: 700px;
}
.right_column {
min-height: inherit;
}
Also see this jsfiddle.
Try to add:
html, body
{
height:100%;
}
#container
{
min-height:100%;
}
Related
For example given the following HTML structure:
<div class=container>
<div class=segment>
<div class=header>header</div>
<div class=content>bla bla...</div>
</div>
<div class=segment>
<div class=header>header</div>
<div class=content>bla bla...</div>
</div>
</div>
I tried the following CSS:
.container {
width: 200px;
height: 300px;
}
.segment {
height: 50%;
}
.content {
overflow-y: scroll;
}
Yet the weird result I'm getting looks like this:
Also see this fiddle: https://jsfiddle.net/Lyrpv0nL/
Why is that and how would I keep the segments contained inside the ... well, container? Just scrollable contents.
Ideally, I want to set the container height to a relative percentage value as well, but if I absolutely have to use absolute values, fine, let's not complicate things too much..
There are a couple issues:
the .content element needs to have a height added to it, since it shares the space with another element (.header) you need to adjust for that.
The parent container (.segment) needs to know how to size itself according to its content + padding etc. box-sizing: border-box; does the trick here.
I've updated your fiddle with a working solution: https://jsfiddle.net/Lyrpv0nL/3/
Hello your problem is that you have hardcoded values, for example the height of the container and the height of segment, so you force your elements into this.
Here is an updated Fiddle
P.S.
I was not sure if you wanted to use an overflow, but if you do, you have to add it to .segment
Ah okay, so that is what you want?
Updated Fiddle
You need to set overflow:hidden on your .segment and provide your content with a height
https://jsfiddle.net/kwjvey8n/
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.
Why do floated divs don't take full width? Aren't they still block elements?
Here is an example http://jsfiddle.net/GKjC8/
html
<div id="a">a</div>
<div id="b">b</div>
css
div {
background-color:cyan;
}
#a {
float:left;
}
#b {
clear:left;
}
The a div looks like it's inline since it takes as much space as its content. Can someone explain?
You have to set width:
#a {
float: left;
width: 100%;
}
“You should always set a width on floated items (except if applied
directly to an image – which has implicit width). If no width is set,
the results can be unpredictable.” Floatutorial: Float Basics
fiddle
That's because float elements behave like if a display: inline-block was applied to it. They expand to their content width.
As #Alek stated, if you want to set the width manually, you need to explicitly set it.
You can check this stackoverflow question for more informations
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.
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;
}