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
Related
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).
Big picture: I'm trying to make a bar graph made up of discrete units. Each unit will be a div. The bar will grow from bottom to top.
Details: I have a container div that holds all of the unit divs, or blocks. The container has a vertical-align of bottom to do this.
This is what it should look like: https://jsfiddle.net/hpf4h/1/
<div id="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
#container {
height: 100px;
width: 10px;
padding: 1px;
background-color: #00f;
display: table-cell;
vertical-align: bottom;
}
.block {
height: 10px;
width: 10px;
margin: 1px 0px 1px 0px;
background-color: #0f0;
}
That works fine, but I need the container to have a height of 100%. Which makes this happen: https://jsfiddle.net/7n7ZH/1/
I'd prefer to find a way to do this with CSS, preferably not too hacky. I'm already using jQuery for the behavior in my project, so I could use that as a last resort.
Edit: Also, all parent tags also have a height of 100%, including HTML and body.
Make #container's container element display:table like this : https://jsfiddle.net/7n7ZH/2/
html, body { height: 100%; margin:0; }
body { display:table; }
#container {
height: 100%;
width: 10px;
padding: 1px;
background-color: #00f;
display: table-cell;
vertical-align: bottom;
}
.block {
height: 10px;
width: 10px;
margin: 1px 0px 1px 0px;
background-color: #0f0;
}
<div id="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
When you use display:table-cell the browser looks for ancestor elements being display:table-row, display:table-row-group and display:table. If it can't find them, it creates pseudo elements to stand in for them. That's what's happening here.
So when you say display:table-cell; height:100%, that's 100% of the created pseudo element that is display:table. But that pseudo element is only as high as its content, and there's no way in CSS to say "make the pseudo-element have height that's 100% the height of its parent instead".
But it is possible to have a real element be display:table and set its height to 100%, in which case the browser will use that and not create the display:table pseudo element.
Applying display:table-cell; and height at the same time rarely gives the results you'd expect. I see that you're trying to use vertical-align which is probably why you added the table-cell. Try css positioning instead:
Remove display:table-cell; and vertical-align from your container.
Add height:100%; to both the body and html elements so your container has room to grow.
Set the container to position:relative; which will make it the origin of all positioned children rather than the document root (body tag). This will allow you to move your container around without screwing up the child positions.
Add a wrapper around your blocks (you could use ul, li for this rather than divs).
Position the block container as position:absolute; bottom:0;
Here's the code...
#container {
height: 100%;
width: 10px;
padding: 1px;
background-color: #00f;
position:relative;
}
.blockContainer
{
position:absolute;
bottom:0px;
}
.block {
height: 10px;
width: 10px;
margin: 1px 0px 1px 0px;
background-color: #0f0;
}
body { height:100% }
html { height: 100%}#container {
height: 100%;
width: 10px;
padding: 1px;
background-color: #00f;
position:relative;
}
.blockContainer
{
position:absolute;
bottom:0px;
}
.block {
height: 10px;
width: 10px;
margin: 1px 0px 1px 0px;
background-color: #0f0;
}
body { height:100% }
html { height: 100%}
...and here's the fiddle...
https://jsfiddle.net/kPEnL/1/
I'm unable to provide assistance with doing it in the way you have started, but taking your original big picture of trying to make a vertical progressbar, here's an alternative which uses the progressbar in Twitter Bootstrap. In its existing form, it doesn't do vertical progress bars, but this modification does.
I originally suggested using stacked bars, but this doesn't work with the vertical implementation. Instead, I've got a solution which uses CSS gradients to draw the blocks in, but still uses the normal bootstrap progress bar.
.progress.discrete {
background-image: linear-gradient(0deg,
black 0%, green 5%, green 95%, black 100%);
background-size: 100% 10%;
background-repeat: repeat-y;
}
/* Bar is used to cover up the blocks, so make it look like a background */
.progress.discrete .bar {
background-image: linear-gradient(to right, #f5f5f5, #f9f9f9);
}
I assumed you wanted your blocks to be a percentage of the bar height rather than an absolute size - this means I can't apply the gradient to the bar. Instead, it can be applied to the background, and the bar used to cover it up (i.e. set width of the bar to 100-progress%). I've also included an example which uses a fixed block size applied to the bar if that's what you wanted.
http://jsfiddle.net/BHTXZ/3/
It needs a little tidying up, but does the trick.
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/
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/
I want to create a robust css style that works whith almost all browser (included IE7, firefox 3)
that show me two columns and one footer divided by dotted border.
I was trying to implement the following code,
but I have one problem:
when I apply border-right-style:dotted; to left class
A and B are not at the same horizontal level.
please halp me to fix the css style.
Click here for the current example.
HTML
<div class="container">
<div clas="left">A</div>
<div class="right">B</div>
<div class="footer">C</div>
</div>
CSS
div.container {
background:#eee;
margin: 0 auto;
width: 750px;
}
.left{
background:#ddd;
float: left;
width: 50%;
border-right-style:dotted;
}
.right {
background:#eee;
float: right;
width: 50%;
}
.footer {
background: none repeat scroll 0 0 #eef;
clear: both;
border-top-style:dotted;
}
The problem that you're experiencing is that the border of the element is not contained within the defined width of that element; so the element is 50% of its parents width, but with an additional width added by the border.
If you reduce the width of the elements to, for example, 48%, then it seems to work as you'd like:
div.container {
background:#eee;
margin: 0 auto;
width: 750px;
}
.left{
background:#ddd;
float: left;
width: 48%;
border-right-style:dotted;
}
.right {
background:#eee;
float: right;
width: 48%;
}
JS Fiddle demo.
Edited with update,
You could, for Firefox and Chromium (FF5.x and Chromium 12.x on Ubuntu 11.04) use:
div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box; /* Left this in, but it doesn't seem to work... */
}
JS Fiddle demo.
Which incorporates the border width into the width of the element; with this approach you could retain the width: 50%; on the elements and borders would sort themselves out. Unfortunately it doesn't work on Opera or, presumably, IE.
Fixed
http://jsfiddle.net/euYTQ/19/
What you've got to remember is that a border counts + of the % assigned.
So say you have a box thats 100px's wide (100%), and you put one side with a 1px border (1%), thats actually 101%. So in your case, it was breaking to the next line of space, hence giving you your error.
In my fix i simply set the right container to 49%. Which would be great for fluid solutions, or if you have a fixed layout, set it to a fixed value.
Remember, padding is the same too... it will count + of the assigned size or percent.
Hope this helps!
The reason A and B are on different levels is because they don't fit into one width. You have them each declared with width: 50% but one of the also has a border. Border width is added to the width of the div - thus the two divs plus the border don't fit into horizontal spacing.
For example, try putting width: 49% on each of them - and you'll see the difference. This is not ideal, as you don't always know the width of the viewport. If you can work with exact pixel widths, it would be easier. Try this CSS for a change:
div.container {
background:#eee;
margin: 0 auto;
width: 750px;
}
.left{
background:#ddd;
float: left;
width: 374px;
border-right:dotted 2px black;
}
.right {
background:#eee;
float: right;
width: 374px;
}
.footer {
background: none repeat scroll 0 0 #eef;
clear: both;
border-top-style:dotted;
}
This is because 50% + 50% + 1px(the border) is higher than 100%.
If your .container isn't going to change width's you could give them both a fixed pixel value.
However if your .container is going to change width's you could try adding another element that contains the border alone like so:
.border {
height:100%;
width:0;
border-left:3px dotted #000;
position:absolute;
left:50%;
top:0;
}
Don't forget to give .container a position:relative;.
#Antojs; padding & border add width to the element if the element in percentage it's create problem. So; can give width to one like this:
div.container {
background:#eee;
margin: 0 auto;
width: 750px;
}
.left{
background:#ddd;
float: left;
width: 50%;
border-right-style:dotted;
}
.right {
background:#eee;
overflow:hidden;
}
Now in .right if you give border & padding it's not effect anything & you can also use css3 box-sizing: border-box; but it's not supported by IE7
check this fiddle http://jsfiddle.net/euYTQ/30/
The problem is that the border adds width to the div with .left. As the container div appears to be of fixed width, you could simply give the .left and .right elements fixed width values too (or reduce their percentage widths), and make .left slightly narrower:
.left{
background:#ddd;
float: left;
width: 372px;
border-right-style:dotted;
}
.right {
background:#eee;
float: right;
width: 375px;
}
Here's an updated fiddle. I would also suggest reading up on the box model to get an idea of how borders, padding etc. add on to width.
http://jsfiddle.net/euYTQ/18/
50% and 50% = 100% so no space for the border.
Put your div right in the div left
<div class="left">section left
<div class="right">section right</div>
</div>
and change a little the css
.left{
background:#ddd;
float: left;
width: 50%;
}
.right {
background:#eee;
float: right;
border-left-style:dotted;
}
Example : http://jsfiddle.net/euYTQ/28/