Is it possible to simply auto-height a child div to the remaining height not being used by other component of it's parent? For the below example, the .body would only be like 20px high, because it's only using that much for the inner html. Is it possible for the .body to automatically consume the unused height of the .parent? e.g. .parent 200px - .head 30px - .foot 30px = .body 120px?
The sample below will display the .parent yellow box much taller than the used space. If you set .body to "height: 100%", it'll use the parent's height and not respect the .head or .foot elements.
<html>
<head>
<style type="text/css">
.parent {
width: 200px;
height: 200px;
background-color: yellow;
}
.head { height: 30px; background-color: blue; }
.body { background-color: #999; }
.foot { height: 30px; background-color: green; }
</style>
</head>
<body>
<div class="parent">
<div class="head">I'm the head</div>
<div class="body">I'm the body</div>
<div class="foot">I'm the foot</div>
</div>
</body>
</html>
This is only an example. In my project the .parent height can only be reasonably set in the .parent element. Plus the .parent height is essentially dynamically set by the back-end code. The three inner div organization is because the body is collapsible and I have rounded corners for the head and foot.
Any suggestions are well appreciated!
This can easily be achieved with negative margins!
Set .body to 100% height
Assuming that the height of .head and .foot is known, you can add a negative top + bottom margin equal to the respective heights of .head and .foot.
Because of the source ordering, the .body will "cover" .head. To counter this, add position: relative to .head.
The inner content of the body need to be shifted down a bit. You cannot add padding to .body directly. Better, add another dive inside .body with padding top + bottom set to desired height.
Demo here
Variant of the above example:
Set .body to 100% height
Assuming that the height of .head and .foot is known, you can add a negative bottom margin equal to the sum of heights of .head and .foot.
Since .body will attempt to flow outside the parent, add overflow: hidden to the parent.
Demo here
There are currently two ways to achieve this. Both are somewhat unsatisfactory.
The first is to calculate the remaining height using DOM information via JS.
The second is called CSS3 flexbox and works perfectly, but is an immature specification with currently very little support.
Unfortunately this can't be done using CSS 2.1 and that's one of the reasons why CSS sucks so badly.
Related
I have a parent div and child div. The child div width set to 100%.
Both have borders on them of 2px.
What is strange is the left edge of the child div shows up while the right edge seems to be covered up by the parent div.
Changing margin on child div or padding on parent div doesn't seem to do the trick.
Resizing child width to something lower than 100% seems to work but don't want to do that and not sure why it is happening?
FIDDLE: http://jsfiddle.net/Boovius/8armB/2/
HTML
<body>
<div id='parent'>
<div class='child'></div>
</div>
</body>
CSS
#parent {
height: 550px;
width: 400px;
margin: 0 auto;
border: 2px solid
overflow: scroll;
}
.child {
width: 100%;
height: 50px;
border: 2px solid
}
Border is included in width calculations by default. Change (or simply remove) your width or your box-sizing mode:
http://jsfiddle.net/isherwood/8armB/3/
.child {
box-sizing: border-box;
}
http://css-tricks.com/box-sizing/
If you don't change the display-property, divs are rendered as block elements and therefore always fill the whole width of their parent elements. Depends on how realistic you example is, but in that case just remove the width on the child div.
http://jsfiddle.net/8armB/4/
With CSS alone, is it possible to obtain the following example, http://jsfiddle.net/LdJ7t/, without explicity knowing the child element's width before hand?
The final result desired:
parent element scrollable to child element
child element's width set to content
#Parent {
width: 100px;
height:200px;
background: #ccc;
overflow:auto;
padding: .5em;
margin: .5em;
}
#Child {
width:300px;
height:100px;
background:yellow;
}
<div id="Parent">
<div id="Child">
This is a test. This is a test.
</div>
</div>
It looks like display:inline-block; almost works: http://jsfiddle.net/LdJ7t/1/
I think this is possible. I just can't find a solution.
Your inline-block solution is correct - if you put longer words in or an image, the scrollbar will appear. Text is broken on white space by default.
If you don't want text breaking on white space, you can add white-space: nowrap; to the child div like here: http://jsfiddle.net/LdJ7t/2/
I have a content div where all the content is located. this div has a border. I would like to place things inside this div so that this div expands if the content inside is too big. Should the items inside the content div be a "div" or a "p" and what css position should they have?
CSS:
#content{
position: relative;
margin-left: auto;
margin-right: auto;
border: 1px solid #E0E0E0;
min-height: 200px;
width: 1000px;
padding: 0px 0px 80px 0px;
background-color: #fff;
}
When you set width: 1000px; it will prevent the content div from being any wider. I suspect you want min-width: 1000px; instead.
For internal content use p tags if you are creating paragraphs that only use inline html elements. If you are using block level elements then use div tags.
I can't say how you should style your internal elements because I know nothing about your design specs.
Contents of the #content div can be either p or div elements its up to you. The #content div will expand to the height of its content either way unless you have elements inside #content with a float property.
If that is that case you can do something like below to make the #content div expand its height.
<div id="content">
<div style="float:right; border:1px solid red; height:500px;"></div>
<div style="clear:both;"></div>
</div>
The important part here is the latest div with clear:both property which fixes the height of the parent element.
You should still be able to use a DIV. If you use height:auto; that should make it expand based on your content. Also I think you can use min-height:200px; and height:auto; together; With that said. I also agree with mrtsherman, if you set a width or height to a specific pixel it is going to limit you to those constraints.
I have JS generated content and want a div EXACTLY around it.
I don't know why, but the div parent is always 100% wide.
I thought I have div width: 100% somewhere, but surprisingly it looks almost the same in jsfiddle:
http://jsfiddle.net/f2BXx/2/
So why the outer div is always 100% wide? And how to fix that? I was trying with display: inline, but it sets width to 0px ;/
CSS:
.outer {
border: solid 1px red;
}
.item {
height: 300px;
width: 400px;
border: solid 1px blue;
}
.allright {
height: 300px;
width: 400px;
border: solid 1px blue;
outline: solid 1px red;
}
HTML:
<p>I don't know where "outer" div 100% width comes from?</p>
<div class="outer">
<div class="item">
<p>Something big!</p>
</div>
</div>
I always thought it'd look like that:
<div class="allright"></div>
I can't set outer div width (width: xxxpx) because all the content is dynamically created.
It sounds like you need to read the Visual Formatting Model.
display: block; causes block-level items to automatically fill their parent container.
CSS is designed in a way that lends itself to the child elements filling their parents, rather than the parents conforming to the children.
div is block element.
Block elements are 100% width of parent element, if width is not specified.
it's taking up all the available space based on it's parent container, exactly what it's supposed to do. If you want it to be a specific width set the width:; of the element.
If you find the w3.org documentation a little bit dry or too technical, here is a more accessible explanation of the CSS box model: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
I have some HTML+CSS code that wants to layout several divs. The layout is like this: all divs stay in a parent div whose size is fixed. Then each child div should stay on its own line, and use the minimum height for drawing its content. The last div should consume all remaining height, so that the parent div is entirely filled.
This code shows my approach using CSS float and clear properties:
<html>
<head>
<style>
.container {
width: 500px;
height: 500px;
border: 3px solid black;
}
.top {
background-color: yellow;
float: left;
clear: left;
width: 100%;
}
.bottom {
background-color: blue;
height: 100%;
float: left;
clear: left;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="top">top1</div>
<div class="top">top2</div>
<div class="top">top3</div>
<div class="top">top4</div>
<div class="bottom">bottom</div>
</div>
</body>
</html>
However, the last div overflows from the its parent. I guess it is because of the width: 100%.
Is there any way to solve this problem? I want to avoid setting the overflow attribute of the parent, and also I have to avoid using absolute positioning. If somehow I could trick the last div to use the height of the parent minus the sum of height of the other divs.
Add:
div.container { overflow: hidden; }
It's not overflowing because it's 100% width. It's overflowing because it's a float and thus removed from the normal layout. Changing the overflow property will change how the browser caters for contained floats.
Oh and if you aren't already, make sure you're using a DOCTYPE. It particularly matters for IE.