How to center multiple floated divs with fixed size - css

I want the child divs to be always centered within their container, even on resize, and without changing their size.
Problem Example : http://jsfiddle.net/bQMj7/
HTML
<div id='foo'><div id="container" class='group'>
<div class='childs'>one</div>
<div class='childs'>two</div>
<div class='childs'>three</div>
<div class='childs'>four</div>
<div class='childs'>five</div>
</div>
</div>
CSS
#foo {
text-align:center;
}
#container {
background-color:beige;
display:inline-block;
}
.childs {
width:50px;
height:50px;
background-color:blue;
float:left;
margin-right:10px;
}
.group:after {
clear: both;
content: "";
display: table;
}
I used the "inline-block / text-align:center" technique to center the child divs in their main container. When you resize the window, the floated child divs collapse, that's what I want, BUT as they collapse they're not centered anymore within their container.
I want the cloud of these collapsing-on-resize divs, to be always centered.
Do you have any idea?
Edit : Thanks for the reply, that's pretty much what I'm looking for ! My concern however is that:
The reason why I used float left instead of inline-block is that I wanted those child divs to have no space between each others (which they do have as line elements unless I mess up my code indents to have those many childs on the same line code)
I want the collapsing final line to be aligned left just as the other lines, but the whole being centered.
Here's an update with the two issues above : http://jsfiddle.net/bQMj7/6/.

you may use inline-block for all of them and fake a float : center ; wich doesn't exist.
#container{
background-color:beige;
display:inline-block;
}
#foo{
text-align:center;
}
.childs {
width:50px;
height:50px;
background-color:blue;
display:inline-block;
margin:5px;
}
DEMO http://jsfiddle.net/bQMj7/1/

Is this what you are looking for:
http://jsfiddle.net/collabcoders/bQMj7/3/
#container{
background-color:beige;
display:inline-block;
}
#foo{
text-align:center;
}
.childs {
width:50px;
height:50px;
background-color:blue;
display:inline-block;
margin-right:10px;
}
.group:after {
clear: both;
content: "";
display: table;
}
EDIT: If I understand you correctly you want the space gone between blocks but still keep the center. inline-block for some reason put 4px space on the right so simply add margin-right: -4px; to fix:
HERE'S THE NEW FIDDLE: http://jsfiddle.net/collabcoders/bQMj7/10/
and the update to the .child class
.childs {
width:50px;
height:50px;
background-color:blue;
display:inline-block;
margin-right: -4px;
}

Related

CSS Bar chart overflows, two rows instead of one single row

Putting a simple barchart together however It is overflowing on certain values, the goal was to make it responsive so I am using % instead of fixed values.
If 100% for container width it works, however I need to have three of these side by side so container is 33%
div.label {
background:blue;
width:20%;
}
div.bar{
width:80%;
}
div.bar_value{
background:green;
width:77%;
}
.row_container{
background:black;
width:33%;
}
.row_container div {
display: inline-block;
}
Here is a snippet of the issues that I am having
http://jsfiddle.net/7h64p0h6/1/
You need to avoid space between divs problem with display inline-block elements.
.row_container{
background:black;
width:50%;
font-size:0;
}
.row_container div {
display: inline-block;
font-size:16px;
vertical-align: top;
}
See it working: http://jsfiddle.net/7h64p0h6/3/

Two auto-width divs side by side

How can I position two divs with auto width side by side? The left div should take priority. Below is my attempt:
<div id='div_1'></div>
<div id='div_2'></div>
#div_1
{
display:inline-block;
float:left;
position:relative;
width:auto;
}
#div_2
{
display:inline-block;
float:right;
position:relative;
width:auto;
}
EDIT: Adding the goal for clarity -
'The goal is to make the first div be able to autosize itself. The second div should occupy the rest of the space.'
I believe you're looking for something like flexbox, which is not supported real well yet, I don't think.
An alternative is to configure the two as display: table-cell with a wrapping element using display: table and a width: 100%. See this question for a similar case:
https://stackoverflow.com/a/12650502/451969
What it would give you is something along the lines of:
<div id='wrapper'>
<div id='div_1'></div>
<div id='div_2'></div>
</div>
#wrapper
{
display: table;
width: 100%;
}
#div_1
{
display: table-cell;
}
#div_2
{
display: table-cell;
}
http://jsfiddle.net/mDyjE/
Fluid layouts rely on % width value. This is what you should use. For exemple: 50% for both of them.
Moreover, position: relative seems to be unnecessary here.
I assume the goal is to get them to be the same size, side by side. To do this, set width to be about 45% rather than auto. You use 45% because if you use 50% IE will drop the right div below the left.
#div_1
{
display:inline-block;
float:left;
position:relative;
width:45%;
}
#div_2
{
display:inline-block;
float:right;
position:relative;
width:45%;
}

Center text vertically centered within a div

I want to center text vertically aligned without using the box property because It does not work in IE9 so I have read it. I have only IE 10 here...
http://jsfiddle.net/J8rL7/6/
I have also tried display:table-cell and vertical-align:middle but this destroyed the whole layout.
Are there any vertical align tricks for my scenario which support IE9+, Chrome/Firefox (latest).
<div id="wrapper" style="margin:auto;background-color:yellow;height:100%;">
<div style="width:50px;height:100%;">
<div class="fluid-column" style="height:80%;background-color:green;">
<div style="display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;background-color:#ff99cc;height:25%;">1</div>
<div style="display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;background-color:#ff33cc;height:50%;">2</div>
<div style="display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;background-color:#ff66cc;height:25%;">3</div>
</div>
<div class="fix-column" style="height:20%;background-color:violet">
<div style="display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;background-color:orange;height:50%;">Total</div>
<div style="display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;background-color:blue;height:50%;">Test</div>
</div>
</div>
</div>
Let's update this and go old ways, so older IEs should come in the run too:
Let's use specifitie of inline-boxes and use one inline-level empty element to secure vertical-align.
DEMO to test : http://jsfiddle.net/D9gnP/6/ - http://jsfiddle.net/D9gnP/6/show.
body, html {
width:100%;
height:100%;
margin:0;
padding:0;
}
div {
text-align:center;
/* text-indent:-0.5em; to swallow word spacing , should be right value */
}
div span {
display:inline-block;
height:100%;
vertical-align:middle;
width:0;/* no need to have a width, it's got be invisible */
margin:0 -5px;/* this will reduce effect of word spacing to none, it can be a little oversized */
}
If you want to use table-cell, you need to start from the main container drawing the column. and end up with table-cells to use the vertical-align rule.
I added an extra span to get to it :
http://jsfiddle.net/D9gnP/
.fluid-column,
.fix-column{
display:table-row;
width:100%;
}
.fluid-column > div,
.fix-column > div{
display:table;
height:100%;
width:100%;
}
.fluid-column > div > span,
.fix-column > div> span {
display:table-cell;
vertical-align:middle;
}
I just added "text-align: center;" in div tag.
It is done, check below link..
http://jsfiddle.net/J8rL7/15/
http://jsfiddle.net/J8rL7/24/
If you look at http://www.vanseodesign.com/css/vertical-centering/ and the heading: Absolute Positioning and Stretching
It requires adding a span around each text field, and a couple of classes
.vert {
position: relative;
}
.span {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 90%;
height: 30%;
margin: auto;
}
I've used this trick before for vertical alignment:
HTML:
<div id="container">
<div class="center">vertically centered content</div>
</div>
CSS:
#container { white-space:nowrap; height:200px; }
#container:before { content:""; display:inline-block; width:0; height:100%; vertical-align:middle; }
.center { display:inline-block; vertical-align:middle; white-space:normal; }
This creates a pseudo-element before the element with class="center" and uses inline-block so the vertical-align style takes effect.
Here's a jsfiddle so you can check if it works for you: http://jsfiddle.net/Etzpj/
I think that in your case you would need to wrap the text on each cell with another element for this trick to work.
Edit: here i used this trick in your fiddle http://jsfiddle.net/J8rL7/25/

CSS center layered dynamic divs

This css has been somewhat difficult to figure out...Basically what I want is what is in this picture, but with dynamically changing content.
so I set up my html like this, basically all the elements are piled into the wrapper, the pictures and titles will be dynamically rotating and will be different widths and heights:
<div id="wrapper">
<div id="title"><h2></div>
<div id="image"><img></div>
<div id="leftbutton" class="but"><img></div>
<div id="rightbutton" class="but"><img></div>
</div>
Everything I have tried Hasn't worked out. how should I go about this?
The closest I have got is this, but the title field can change heights and that makes this method not work, since, I have to position the image relatively and its relative position changes with the title element growing and shrinking:
#wrapper{
position:relative;
text-align: center;
}
.but{
z-index:20;
position:absolute;
}
#leftbutton{
left:0px;
}
#rightbutton{
right:0px;
}
#title{
z-index: 3;
display: inline-block;
width:auto;
min-width: 80px;
max-width: 340px;
}
#image{
z-index: 1;
position: relative;
top:-21px;
}
If you mean the Title in the center use this way:
#title {
margin: 0 auto;
width: /* your width */
}
the position should be relative at the wrapper.
JsFiddle UP
I just reorganized the body structure, adding one more div and floating everything.
Then inside the central section I added title and image that you can style to be centered to the relative div.
If you provided some example code we would better be able to assist you. In the meantime, the following code should take care of what you're looking for:
HTML
<div id="wrapper">
<div id="title"><h2>Article Headline</h2></div>
<div id="image"><img></div>
<div id="leftbutton"><img></div>
<div id="rightbutton"><img></div>
</div>​
CSS
​#wrapper {
background:#6cb6d9;
display:inline-block;
position:relative;}
#title {
position:absolute;
top:0;
width:100%;
text-align:center;}
#title h2 {
background:green;
color:white;
padding:10px 15px 10px 15px;
display:inline-block;
max-width:200px}
#image {}
#image img {
min-width:200px;
height:300px;
width:500px; }
#leftbutton {
position:absolute;
left:0;
top:0;
height:100%;
width:75px;
background:black;}
#rightbutton {
position:absolute;
right:0;
top:0;
height:100%;
width:75px;
background:black;}
Though instead of hardcoding the img size, just remove those lines of CSS to have the div automatically adjust to the default size of the img.
http://jsfiddle.net/b7c7c/
None of these solutions worked correctly, ultimately the way to get it to work is with this trick: How to center absolutely positioned element in div?
Then you just position all elements absolutely within the wrapper and the sub elements relatively as seen in the post

Div side by side without float

How can I make div 'left' and 'right' look like columns side by side?
I know I can use float:left on them and that will work... but on step 5 and 6 in here http://www.barelyfitz.com/screencast...s/positioning/
the guy says it is possible, I can't get it work though...
Code:
<style>
div.left {
background:blue;
height:200px;
width:300px;
}
div.right{
background:green;
height:300px;
width:100px;
}
.container{
background:black;
height:400px;
width:450px;
}
</style>
<div class="container">
<div class="left">
LEFT
</div>
<div class="right">
RIGHT
</div>
</div>
The usual method when not using floats is to use display: inline-block: http://www.jsfiddle.net/zygnz/1/
.container div {
display: inline-block;
}
Do note its limitations though: There is a additional space after the first bloc - this is because the two blocks are now essentially inline elements, like a and em, so whitespace between the two counts. This could break your layout and/or not look nice, and I'd prefer not to strip out all whitespaces between characters for the sake of this working.
Floats are also more flexible, in most cases.
A div is a block level element, meaning that will behave as a block, and blocks can't stay side by side without being floated. You can however set them to inline elements with:
display:inline-block;
Give it a try...
Another way is to place them using:
position:absolute;
left:0;
and/or
position:absolute;
right:0;
Note: For this to work as expected, the wrapper element must have a position:relative; so that the elements with absolute positioning stay relative to their wrapper element.
You can also use CSS3 flexbox layout, which is well supported nowadays.
.container {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
background:black;
height:400px;
width:450px;
}
.left {
flex: 0 0 300px;
background:blue;
height:200px;
}
.right {
flex: 0 1 100px;
background:green;
height:300px;
}
See Example (with legacy styles for maximum compatiblity) & Learn more about flexbox.
I am currently working on this, and i have already a number of solutions.
It is nice to have a high quality site, that i can use also for my convenience.
Because if you do not write these things down, you will eventually forget some parts.
And i can also recommend writing some basic's down if you are starting any kind of new programming/design.
So if the float functions are causing problems there is a couple of options you can try.
One is modify the div alignment in the div tag it self like so <div class="kosher" align=left>
If this does not suit you then there is another option with margin like so.
.leftdiv {
display: inline-block;
width: 40%;
float: left;
}
.rightdiv {
display: block;
margin-right: 20px;
margin-left: 45%;
}
Don't forget to remove the <div align=left>.
Use display:table-cell; for removing space between .Left and .Right
div.left {
background:blue;
height:200px;
width:300px;
}
div.right{
background:green;
height:300px;
width:100px;
}
.container{
background:black;
height:400px;
width:450px;
}
.container > div {
display: table-cell;
}
<div class="container">
<div>
<div class="left">
LEFT
</div>
</div>
<div>
<div class="right">
RIGHT
</div>
</div>
</div>
You can try with margin for right div
margin: -200px 0 0 350px;

Resources