html5 vertically aligning 3 Divs even-spaced - javascript

the right Div on my html-page contains only some rows of thumnails - created dynamically in javascript - while the left Div contains 3 Sub-Divs (inner Divs) arranged vertically (also dynamically created on receiving my query-result from my webService)
In order to make it look balanced I want the
left Div to automatically adjust to the same height
as the right one (which holds the dynamically inserted thumbnails).
The 3 vertical aligned Sub-Divs in the left Div should behave like this:
Div2 with the larger Image should be vertically centered
Div1 with the header text should be vertically centered in the space above Div2
Div3 with the title text should be vertically centered in the space below Div2
.
question:
is this possible with css ?
- i.e. without calculation of the heights on dynamic creation in javascript
.
if this is possible with css
then, please, give me some hints
about which float, display, align, margin (and similar) settings
I could try for the left Container Div and for its 3 inner Divs.
I do not need to get a sample or a solution resp.
but I need some hints in plain words, some ideas
that I could try out,
and some considerations (tipps) which I should obey.
many thanks in advance.

Flexbox can do what you need:
jsfiddle: https://jsfiddle.net/ornx7oar/
.main {
display: flex;
}
.left-panel {
padding: 5px; margin-right: 5px;
background-color: green;
/*width: 30%;*/
flex: 0 0 30%; /* don't grow or shrink based on contents, 30% width (put auto if you prefer to use the width property) */
display: flex;
flex-direction: column; /* align vertically */
justify-content: space-around; /* center vertically */
}
.right-panel {}
.thumb {height: 70px; width: 150px; border: 1px solid; display: inline-block;}
* { box-sizing: border-box; margin: 0; }
<div class="main">
<div class="left-panel">
<div>first</div>
<div>second</div>
<div>third</div>
</div>
<div class="right-panel">
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
</div>
</div>

I would add the same class to all three divs. In your css, add margin: 10px auto; Depending on the current code you might need to add position: relative to this class as well.
You can tweak the 10px part depending on how far apart you want them. The auto centers the divs to its parent.
As far as changing the order look at w3 schools documentation on order

Related

How to put 2 divs next to one huge div

So there are a lot of questions like this on StackOverflow but there doesn't seem to be one that will be helpful in my case.
As you can see, I have 2 divs on the screen. One on the left which is
float:left;
and the one in the middle is
margin-left-auto;
margin-right:auto;
So my question is, when I want to put another div JUST like the one on the right on the left of the middle DIV, how will I go on to doing this?
float:right;
has been tried on the right div but that just puts it in a different line because of the left div being floated.
So how do I do this? Answers are greatly appreciated.
I can provide more code such as how the DIV"s are arranged if needed.
All I did was type
display: flex;
in the container div and it worked perfectly.
To create a main body of content with a left and right sidebar, you can float:left and simply define a width for each div in the CSS.
ie:
.div1 {width:25%}
.div2 {width:50%}
.div3 {width:25%}
If you want to account for padding, just reduce the amount divided by three on each div width.
ie: http://jsfiddle.net/simsketch/9tj4va6r/
It might help you to start out using a framework like Foundation or Bootstrap.
Foundation provides lots of starter templates to help get you started here.
http://foundation.zurb.com/templates.html
When using a grid system, instead of needing to define widths in your custom css, you can simply include the foundation.css library, and reference the classes.
ie: <div class="large-6">content</div>
For the layout you're after, this would do the trick.
http://foundation.zurb.com/templates/feed.html
What they're doing there is simply:
<div class="large-3"></div>
<div class="large-6"></div>
<div class="large-3"></div>
As long as the numbers add up to twelve, they will fit perfectly.
This has been a brief introduction to grid systems. Consult the following for more information:
http://foundation.zurb.com/
http://getbootstrap.com/
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
These are the two most popular front-end frameworks but there are dozens more and they are all wonderful.
Flexbox solution
Wrap the items inside a parent container and set the display: flex
flex: 1 on the left and right items will grow and shrink it 1x.
flex: 2 on the middle items will grow and shrink it 2x.
.container {
display: flex;
}
.left,
.right {
flex: 1;
text-align: center;
background: #E77F24;
}
.middle {
flex: 2;
text-align: center;
background: lightblue;
margin: 0 10px;
}
<div class="container">
<div class="left">1</div>
<div class="middle">2</div>
<div class="right">3</div>
</div>
.div1{
width:25%;
overflow:auto;
float:left;
background-color:blue;
color:white;
text-align:center;
}
.div2{
width:50%;
overflow:auto;
float:left;
background-color:red;
color:white;
text-align:center;
}
.div3{
width:25%;
overflow:auto;
float:left;
background-color:green;
color:white;
text-align:center;
}
<body>
<div class="div1">First Div</div>
<div class="div2">Second Div</div>
<div class="div3">Third Div</div>
</body>

- CSS bootstrap, divs skip row how get neatly in a row dispite height difference -

The problem occurred on other projects, but then I made all the divs the same size. I made a print screen of my problem.
As you can see the the third div is a little longer then the others (and yes I want to keep this). My css or bootstrap wants to skip a row.
html
<div ng-repeat="work in myWork" class="col-lg-3 col-md-3 col-xs-12" id="myWorkHolders">
css
#myWorkHolders{
margin: 0px;
display: inline-table;
padding: 0px;
border: solid 1px #F4F4F4;
}
Problem
DIVS skip a row when the div above is not the same size as the others.
Question
what Css terms can I use so the divs will display under each other despite different sizes.
you can add an extra class with min-height to every div, just match the height of ur largest div and put that into css class.
<style>
.yourclass {
min-height:Xpx; //replace X with the height of your largest div.
}
</style>
and now just put this class into every div as:
<div class="col-md-3 yourclass">.col-md-3</div>
I have run into this problem before; I'm curious what other people say. Not sure if this is the best solution, but what I did that worked for me was assign a min-height to those divs. the min-height you assign will depend on the height of your largest div.
so:
#myWorkHolders{
margin: 0px;
display: inline-table;
padding: 0px;
border: solid 1px #F4F4F4;
/* the exact height specified will have to be experimented with */
min-height: 250px;
}
With bootstrap you need to use the row class to make sure the columns layout correctly no matter the height a particular column.
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
</div>
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
</div>
So when creating your loop you need to think about how to add in the row container after every fourth column.

Parent Container Doesn't Respect Child Height

Pretty common question, and typically revolves around a current situation, so after reading up on a bunch of different solutions and trying to slide them in I thought I'd just ask the age old question myself based on my situation.
Situation
I've built a little page slider using jQuery, and it appears to work as expected, then I noticed the CSS height was still set to a default value I had used for testing. After removing it I can't seem to get the height of the parent to open to the height of the different children. I know that setting the position of the different divs to relative instead of absolute will display them, but then the divs aren't positioned correctly anymore (situated underneath each other). Other solutions I've found revolve around not using markup that is even remotely common to my own.
Question
Is there a CSS fix for this that allows me to leverage Bootstrap the way I have it set up, and the jQuery animation I've already written? Or is their any suggestion(s) that will make this work without too much alteration to the markup? I've tried a couple different variations and this seems to be the most stable.
Code
I've added it to a jsFiddle. I couldn't get the animation to work in the fiddle for some reason (works on my laptop in all browsers), but the default layout should be enough to see how the parent doesn't respect the child elements.
<style>
.container {
margin-top: 50px;
}
.row {
margin-bottom: 20px;
}
.windowBox {
overflow: hidden;
}
.box {
background-color: #FFF;
position: absolute;
width: 100%;
}
.page1 {
top: 0;
left: 0;
opacity: 1;
z-index: 999; /* set to be over page2 onload */
}
.page2 {
top: 0;
left: 0;
opacity: 0;
z-index: 99; /* set to be under page1 onload */
}
</style>
<div class="container">
<div class="row">
<div class="col-sm-12">Header text should be above either page.</div>
</div>
<div class="row">
<div class="text-center">
<button type="button" id="showPage1" class="btn btn-danger" disabled>Page 1</button>
<button type="button" id="showPage2" class="btn btn-primary">Page 2</button>
</div>
</div>
<div class="row">
<div class="col-sm-12 windowBox">
<div class="row">
<div class="box page1">
<div class="hidden-xs col-sm-6">...</div>
<div class="col-sm-6">...</div>
</div>
<div class="box page2">
<div class="col-sm-12">...</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">Footer text should be under either page.</div>
</div>
</div>
DEMO
Added an .over class to your markup.
Thats the only change made there.
css
Over class is the container of the windowBox.
We want this to have a hidden overflow because it will contain all our pages side by side.
.over {
overflow: hidden;
}
This is a fixed value unfortunately. Basically its the width of your window X pages. If your going to add more then just one page, you can set this value in JavaScript.
.windowBox {
width: 220vw;
}
Then we simply set the container to be a "kind of" fixed width.
responsive width.. so 95 of view port width is reasonable.
.box {
background-color: #FFF;
width: 95vw;
display: inline-block;
float: left;
}
And in the JavaScript instead of setting the left property you set the margin-left.
You only need to do this for the first element so. If you want to scroll to page 4 you can set the first pages margin to -4 * 95vw

Auto scaling text to fit within a div

Hello there I have an application that shows data in a grid fashion here is one of the "blocks" out of the grid below. Within the Divs that fill out data from a JSON file and fills the divs.
The data is limited to 4 characters (a number between 0 and 9999) for all the items. However when there is 1 character in there it looks too small because i have to keep the font size fairly small so when there is more than 1000 it doesn't overflow.
My question is what would be the best way to automatically adjust the font size for each div independently so that it always fit's at a maximum size
<div class="box">
<div class="Top">ZW01025</div>
<div id="ZW01025" class="Midbox">
</div>
<div id="ZW01025b" class="Midbox">
</div>
<div id ="ZW01025C" class="BottomboxPercent">
</div>
<div id ="ZW01025D" class="BottomboxPercent">
</div>
<div id ="ZW01025p" class="Bottombox">
</div>
</div>
He is a fiddle of the full thing, it doesn't really fit in Js fiddle well http://jsfiddle.net/RYU54/3/
If you are ok with using a JavaScript solution I would check out flowtype.js
http://simplefocus.com/flowtype/
Add font size in the .Top css class, lik this:
.Top{
height: 20%;
width: 90%;
margin: 1px auto;
background-color: #596163;
text-align: center;
color: white;
font-size: 30px; /* added */
font-size: 3.5vw; /* added */
...
}
I made a script to automatically scale text to fit the surrounding div, it should work in your case:
https://github.com/jeremiahrose/perfectFit.js

CSS grid of squares laid out in columns not rows

I currently have a grid made out of square DIVs (200px x 200px each).
I have started in the top left hand corner and floated each one left so that the 2nd one is to the right of the first and the the third to the right of that and so on. When it runs out of horizontal space in it's container the next square automatically starts a new row, obviously.
This is great if you want the grid to keep getting longer vertically each time a row fills up, but I want mine to be three squares high and grow to the right hand side, so the first square goes in the top left, the 2nd underneath it, the third underneath that, then (because the container is 600px high) the 4th square should start a new column and go to the right of the first.
Is it possible to achieve this for an unspecified number of squares so it just keeps growing into new columns without resorting to javascript?
IE6 support is not necessary.
Any help would really be appreciated.
You can try CSS 3's multi columns http://www.w3.org/TR/css3-multicol/ , http://www.css3.info/preview/multi-column-layout/
Using properties like
-moz-column-width: 5em;
-webkit-column-width: 5em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
http://jsfiddle.net/Txgnk/1/
Looks like IE 10 is the first IE to support it http://caniuse.com/multicolumn
Try this,
<style>
.parent {
height:600px;
white-space: nowrap;
}
.child {
width: 200px;
height: 600px;
display:inline-block;
}
.grand-child {
width: 200px;
height: 200px;
border: 1px solid;
}
</style>
<div class="parent">
<div class="child">
<div class="grand-child"></div>
<div class="grand-child"></div>
<div class="grand-child"></div>
</div>
<div class="child">
<div class="grand-child"></div>
<div class="grand-child"></div>
<div class="grand-child"></div>
</div>
...
...
</div>

Categories

Resources