I have a div with a height of 100% and a solid border. when i have too much content, it will display outside the div border.
how do i expand the div to the height of all the content inside the border instead of just 100% of the screen size?
the height:100% seems to be measuring the screen height but not the content inside of it.
<style>
#container{
height:100%;
width:100px;
border:1px solid black;
}
</style>
<div id="container">
link to problem sample page
Such a problem can be easily solved using the elusive clearfix! First off, remove all those height:100%; declarations you have for your #container, they're not needed, and try this in your CSS:
#container:before, #container:after {
display: table;
content: "";
zoom: 1;
}
#container:after {
clear: both;
}
absolutely positioned elements do not change the height of their container. Your farbartastic element has absolute positioning, so it will be laid out without informing its container of its height requirements.
You have some problems with yours floating element (which are flying outside the container), so , for correct this use overflow:hidden in the container
#container{
width:100px;
border:1px solid black;
overflow: hidden;
}
Related
I have a main div that contains two other divs. I need that the first one must have the same height of the parent div. The parent div height is not specified in CSS.
Here's an example: http://jsfiddle.net/x8dhnh4L/
The pink div must expand to the full height of the parent (red border).
One solution I tried is using display:flex, but it's not IE-friendly (I need a IE8+ compatibility). Plus I'd like to achieve this with CSS only, so I'm avoiding JS.
You could try using a table layout:
set display:table on the parent
set display:table-cell to the childs that need the same height
#container {
position: relative;
width:600px;
border: 1px solid red;
display:table;
}
#content {
display: table-cell;
background-color:pink;
width:400px;
}
#side-bar {
display:table-cell;
background-color:yellow;
width:170px;
padding-left:25px;
vertical-align: top;
}
here's a working fiddle:
http://jsfiddle.net/x8dhnh4L/2/
As noted in the comments, margins do not work in elements with display:table-cell. If acceptable, you can use padding-left instead of margin-left...
You could also add an additional <div> to separate the 2 columns by 25px.
http://jsfiddle.net/x8dhnh4L/1/
Set side bar to
float:right;
and set content
height:100%;
A quick solution is to use display:table for #container and height:100% for #content.
http://jsfiddle.net/afelixj/x8dhnh4L/5/
If you actually want the "#content" div to expand to "#container" height, you need to set a height for parent div "#container" and height and float for "#content"
#container {
position: relative;
width:600px;
border: 1px solid red;
height: 800px; //whatever height you need
}
#content {
display: inline-block;
background-color:pink;
width:400px;
height:100%;
float: left;
}
This way "#content" height will adjust to "#container" height, but "#side-bar" will take the height it needs to show it's content.
With Hanoncs solution the parent div "#container" will adjust to child's div "#content" height.
An easy way around this is using display: table; declaration on the parent element and display: table-cell; declaration on the child element.
I would recommend reading Equal Height Columns with Cross-Browser CSS and No Hacks.
Hope this helps!
I have a Div with auto height and 100% width .Now inside this Div I have to display one more Div with remaining width available in the parent Div and 100% height (Div Should be displayed in full page after the button of the parent Div got ended).Also i want to show the Second Div with border so that any one can know the expansion of the DIV by seeing it.
Here is the css that i am trying to add for border in Div..
border: 2px solid;
border-radius: 25px;
Border is coming in the Div but Div is not getting displayed in Vertical .Its getting displayed in horizontal..Here is the Fiddle Link..
FIDDLE
Please help to resolve it ..
Thanks ..
Not 100% sure I got your request. Here's my guess:
.verticalDiv
{
position:relative;
height:auto;
width: 100%;
border: 2px solid red;
}
#computationOperation
{
position:relative;
width: 100%;
display:block;
min-height: 100px;
height: auto;
}
The Fiddle
Let me know it that helped!
Done entirely understand what you are trying to do, but is this what you are looking for?
http://jsfiddle.net/5pqqeuhy/
body, html{
height:100%;
}
.verticalDiv
{
position:relative;
height:100%;
width: 100%;
}
.computationOperation
{
position:relative;
height:100%;
width: 100%;
}
you need to set the height of html and body to 100% because by default they do not expand to the full height of your browser
I have a container div with the following attributes:
#cat_container{
margin:0;
padding:5px;
border:1px solid red;
min-height:200px;
}
Inside there are multiple left floating div's. The problem is that they don't force the containing div to expand downwards, instead just overlapping and continuing outside the container div's boundary.
Left floating div's:
.cat_wrap{
border: 1px solid #000;
width:100px;
min-height:120px;
margin:0 10px 5px 0;
padding:0;
float:left;
}
If I take the left float out, the containing div does expand vertically as it should do. So how do I get the inner divs to float left but also expand the container div vertically?
you need to set overflow for the main div. overflow: auto; this will force the div container to expand and adapt to the content.
#cat_container{
margin:0;
padding:5px;
border:1px solid red;
min-height:200px;
overflow: auto;
height: auto !important;
}
This is a common problem and is fixed using a "clearfix" solution. Setting overflow will fix this problem, however there are better solutions, like the following:
.mydiv:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .mydiv { zoom: 1; } /* IE6 */
*:first-child+html .mydiv { zoom: 1; } /* IE7 */
The main point of this solution is to trigger thehasLayoutproperty of the div. Fortunately it is enough for IE 6/7 to set the zoom to 1 in order to trigger that. Modern browsers which support the:afterpseudo element can use the first statement, which is cleaner and does not affect the overflow property.
Please note that you should avoid using the!importantstatement as suggested in the earlier answer as that is not good css. Moreover it will not allow you to control the height of the div if you wish to and does not do anything to solve the problem.
It's 2016. A good way of doing this is using flex property.
.container {
display: flex;
flex-wrap: wrap;
}
Then the child element can get rid of the old magical float property.
Check out this JSFiddle to see the effect.
Note: when the heights of children elements are not uniform, the flex way will behave differently with the float way. But it is hard to tell which one is correct.
container{
overflow: auto;
}
Insert the following at the end, before the enclosing the container
<div style="clear:both"></div>
The container will automatically expand to the the last clear:both
Sorry for the bad title.
So I have 2 divs both with float:left property inside a container with fixed size. Each div can have optional size. Problem is if I fill div2 with a lot of text it goes below div1, but they should be next to each other. I want div2 just become smaller, not go below div1.
Check example on JS Fiddle:
Try
.div2 {
float: none; /* default value */
overflow: hidden;
}
Demo
One way is to nix the floats and use display:table-cell instead:
.div1 {
border:1px solid red;
display:table-cell;
}
.div2 {
border:1px solid blue;
display:table-cell;
}
jsFiddle example
Set a max-width for div2. Since you set no size for div2, when the length of text hits the edge of its parent element it drops down the next line. max-width will allow it to be dynamic in size until it hits the limit.
.div2 { max-width: 250px; }
jsFiddle Example
If you want both div should be of
Equal hight
Always on left and right
then use
.div1 {
border:1px solid red;
display: table-cell;
}
.div2 {
border:1px solid blue;
display: table-cell;
}
http://jsfiddle.net/w5h5H/8/
set a max-width on both divs as a percentage. Heres a fiddle: http://jsfiddle.net/w5h5H/10/
The percentages may need adjusting down a little to allow for any margins or borders you have.
i created a main div and split-ted into two css code
#main { background-color:#FFFFFF; width:1000px;}
#left { width:750px; float:left }
#right { width:250px; float:right }
but background color does not changes , when i changed it to
#main { width:1000px;}
#left { background-color:#FFFFFF; width:750px; float:left }
#right { background-color:#000000; width:250px; float:right }
it works but when height changes it looks boring i want to change the background color of whole main div.
what about if your main div gets a
#main {
min-height:100px;
max-height:100px;
}
it needs a height to display background-color
if its not working show the html part please
Without the html this is just a guess, but I think your problem is that the div#main has a height of 0. This happens because the floating divs inside are no longer part of the document flow. Try setting a height on the main div, this should fix it.
Add following rule
#main:after { content: " "; display: block; overflow: hidden; clear: both; height: 0; }
It will clear floats and make the container as high as the highest column inside.