Fiddle
I would like to have multiple divs with margins and below them one that fills up the rest of the space provided by the fixed size parent div.
EDIT: I am sorry, I should have mentioned that the container divs size is fixed and should not change at all.
EDIT2: SOLUTION.
I had tried overflow: hidden but missunderstood it and put it on on the child element and not the parent.
Hope this is you want http://jsfiddle.net/FR5Ud/33/
Use min-height so that your basic look of the page remains the same and it increases based on the content
#container {
float: left;
background-color: green;
width: 300px;
min-height: 300px; height
border-color: violet;
border-style: solid;
border-width: 10px;
}
#content {
background-color: blue;
min-height: 100px; height:auto
}
#toFillUp {
background-color: red;
/* that's what it should end up looking like.
However, what if the size of #content changes?
What if there are more content divs before that?
What if those have margins? */
min-height: 200px; height:auto
}
Demo http://jsfiddle.net/FR5Ud/25/
Related
I have a common problem in a specific case...
I try to auto expand the height of floatings divs for force them to touch the bottom of their parent.
Here is an example : http://jsfiddle.net/k95nK/1/
My goal is that all floating column has the same height, and touche the bottom of the contener. (So the columns must all have the height of the one with the most content)
The height of the parent cannot be fixed. The contents must increase the height of the parent.
.content {
width : 150px;
background-color : #123456;
float : left;
margin-right : 10px
}
#allcontent {
background-color : #90c89a;
}
#allcontent:after {
content:"";
display: table;
clear: both;
}
<div id="allcontent">
<div class="content">hello</div>
<div class="content">hello</br>hello</div>
<div class="content">hello</div>
</div>
I know this kind of solution is often asked, (How to get a div to resize its height to fit container?) but i can't find a solution for my specific case.
I've tried to use absolute positioning, but it seems to makes them outside of the document flow...
Remove float:left and apply display:table-cell to your content div.
.content {
width : 150px;
background-color : #123456;
display:table-cell;
border-right:10px solid #90c89a;
}
DEMO
You need to put a height on the container and then set the inside div height to 100%, like so;
#allcontent {
background-color: rgb(144, 200, 154);
height: 320px;
}
.content {
background-color: rgb(18, 52, 86);
float: left;
height: 100% !important;
margin-right: 10px;
vertical-align: top;
width: 150px;
}
EDIT:
Without using fixed height, you will need to use border or padding for the spacing between divs;
.content {
background-color: rgb(18, 52, 86);
display: table-cell; /* **** ADD THIS STYLE **** */
border-right: 20px solid rgb(144, 200, 154); /* **** Using border with same colour as background to give spacing effect **** */
margin-right: 10px;
width: 150px;
}
If you use floats you only have two possibilities.
1) Define a fixed height for all your elements
.content {
height: 288px
}
See an example jsfiddle here: http://jsfiddle.net/k95nK/2/
2) Use tables
With tables it is a trivial problem to solve but it is nowadays considered as old technology
I have three nested DIV elements like this:
<div id="outer">
<div id="innerA">
<div id="innerB">
This<br/>is<br/>a<br/>multiline<br/>testcase.<br/>
This<br/>is<br/>a<br/>multiline<br/>testcase.<br/>
</div>
</div>
</div>
#innerA has a height of 100% which makes it as big as #outer. #innerB's height is left to be auto so it gets as high as its contents. Now when i set #innerB to have margin-top: 10px for example i would expect that #innerB will get a margin in relation to #innerA. What happens instead is that #innerA gets this margin in relation to #outer.
How is this possible? It seems like this has nothing to do with box-sizing at least its not fixable this way.
Here's the CSS:
#outer {
width: 500px;
height: 300px;
background: yellow;
overflow: auto;
}
#innerA {
width: 100%;
height: 100%;
background: green;
}
#innerB {
margin-top: 10px;
background: blue;
}
and the fiddle:
http://jsfiddle.net/7e2H5/
(Here i would expect that the green DIV fits the yellow one, and that there are 10px of the green one visible above the blue DIV).
Seems like it's a "Margin collapsing" problem. Check the DEMO
I've added padding: 1px 0;
More info: https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing
Just found this: margin-top in a nested div
This is interesting but I wouldn't say that adding padding is a more appropriate answer.
#innerA {
width: 100%;
height: 100%;
background: green;
display: inline-block;
}
Here's a demo on JSFiddle.
I hope this helps!
I would replace #innerb margin with #innera padding
According to the Mozilla link provided by Chris, adding floats also prevents margins from collapsing:
Add float: left; to #innerA as shown in this fiddle:
http://jsfiddle.net/7e2H5/10/
See: https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing
Whenever I resize the browser, the 2nd div in .container positions below the first one.
<div class = "container">
<div class = "one"></div>
<div class = "two"></div>
</div>
The divs are really blank.
CSS
.container{
overflow: hidden;
width: 810px;
min-width: 810px;
}
.one,.two{
width: 300px;
height: 450px;
}
.one{float:left}
I just realized that, you are not floating the other element, this is causing it to shift down, you should use float: left; or right as it's a div so it will take up entire horizontal space, and hence it is pushed down.
Demo
.one, .two{
width: 300px;
height: 450px;
float:left; /* Float both elements */
background: #f00;
}
Alternative
You should use display: inline-block; and white-space: nowrap; to prevent the wrapping of the elements
Demo
This will gave you the same effect, the only thing is 4px white space, you can simply use
.two {
margin-left: -4px;
}
the above will fix the white space issue for you
Demo 2
Add this CSS. Demo.
.two {
margin-left: 300px;
}
PS: When works with float, you should clearfix.
Give your body a minimum width:
body {
min-width: 1110px;
}
Then, when the viewport gets smaller than 1110px the scrollbar will appear.
Note: if you add margin, padding or border to the divs, add it to the min-width of the body (or take some extra space).
The site in question is 1000freewebsites.com. The specific pages I'm struggling with are:
1000freewebsites.com/signup.php
1000freewebsites.com/login.php
This site uses the skeleton framework and Ryan Fait's sticky footer. On these pages I have a div with the ID of #bluestripe that should fill the vertical space between the header and the footer.
There are three parent elements; #html, #body and .wrapper. All are set to height:100%; in the stylesheet. #bluestripe is also set to height:100% and min-height:100%. As I understand it, this should achieve the effect I desire. Do I have my theory wrong?
Using Chrome Inspector I find that the height attribute is crossed out for .wrapper. If my theory is correct, this explains why #bluestripe is not expanding to fill the vertical space.
I cannot find any element that over rides .wrapper's height setting. Can you see what I am missing?
Your CSS rule for .wrapper has 2 height declarations. Get rid of the one setting height to auto.
.wrapper {
min-height: 100%;
height: auto !important; /* <- Get rid of this one */
margin: 0 auto -40px;
height: 100%;
}
this is your css:
.wrapper {
min-height: 100%;
height: auto !important; //height here
margin: 0 auto -40px;
height: 100% ;//height again here
}
you are defining two times the height and as the first one got !important its overriding the second one
this cause another error, because the paddings and the other elements are pushing the .container div down, so if you change a few properties you can get rid of this behavior:
#bluestripe {
background: #0099cc;
width: 100%;
padding: 40px 0px 40px 0px;
border-top: 10px solid #666666;
/*height: 100%; drop this line*/
}
.wrapper {
background: #0099cc; /*add this line*/
min-height: 100%;
margin: 0 auto -40px;
height: auto; /*acording to ryanfaits's css this is what mades the footer stick to the botom*/
}
this will made the .bluestripe shrink again but as the .wrapper still has the same background color, it doesn´t matters
I'm trying to develop a horizontal web page, with fixed height and variable width.
In order to get it, I need a row of floating <div>s to expand the <body> width.
|------------- body --------------| /* variable width */
|-div-| |-div-| |-div-| |-div-| /* fixed width */
The following code doesn't seem to work:
body{
height: 40px;
}
div{
width: 2000px;
height: 20px;
background: red;
margin: 10px;
float: left;
}
http://jsfiddle.net/7cS2R/12/
Is is possible to do so without using javascript?
Block elements expand to the full width of their parent-element's width. To make them respect their childrens with you can either declare:
display: inline-block;
or
position:absolute;
on your body-element.
EDIT: after you clarified your question - simply add the white-space declaration to your body:
white-space:nowrap;
Demo
Try this:
body{
height: 40px;
display: inline-block;
}
http://jsfiddle.net/7cS2R/6/