See my example here:
http://codepen.io/anon/pen/Ewrjh
<div id="container"></div>
<div id="box-container"></div>
<div id="box">test</div>
<div id="box">test</div>
<div id="box">test</div>
<div id="box">test</div>
</div>
#container {width:100%;}
#box-container{width:800px;float:left;margin-left:5%;margin-right:5%;}
#box {width:180px;margin: 2%;float:left;text-align:center;border:1px solid #ccc; display: inline-block;}
I want to center the 4 divs 'box' in the center of the percentage div 'container'.
Thanks in advance.
I forked your code and provided a new sample here: http://codepen.io/anon/pen/zdLAw
I mostly removed cruft, and simplified your css selector:
.box {
margin: 20px auto;
padding: 10px;
width: 180px;
text-align: center;
border: 1px solid #ccc;
}
The best method to achieve centering is using the margin property. Apply this to your div element add add some vertical spacing, and you will get what you want.
Related
I'm trying to render column header text vertically, so the columns are narrow. I cannot seem to get the text to rotate and stay within the div.
I've made a quick jsfiddle.
https://jsfiddle.net/DaveC426914/w674sLbL/9/
My "pre-problem" is that my demo is not rendering correctly.
It's repeating the data three times i.e. three 17s, three 18 and three 19s. I don't know why.
(The barebones Angular fiddle I started from did not contain a div ng-app="myApp" so I had to add it or the angular is never applied. I thought maybe that had something to do with it, but remving this div breaks the app.)
Once I fix that, my real problem is that I can't get the text to behave. It should fall within the 100px tall, 20px narrow boxes that should be flush against each other, so that he columns are only 20px or so wide. They are rendering 100px wide.
<div class="table-header-cell" ng-repeat="item in headerDates">
{{item.date}}
</div>
.table-header-cell {
display: inline-block;
border: 1px solid grey;
margin: 1px 1px 5px;
height: 30px;
transform: rotate(-90deg);
transform-origin: left bottom;
width: 100px;
}
I've tried variants of nesting a div within a div, and applying the rotation to outer or inner divs. I've also tried setting width to 100px and height to 20px in the hopes that it applies the dimensioning before the rotation, but so far no combination has worked.
Try wrapping the text in an internal div and apply transforming and margin properties to that instead of all width and rotation on a single div.
Use the following html:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<div class="table-header-cell" ng-repeat="item in headerDates">
<div class="innertext">
{{item.date}}
</div>
</div>
</div>
</div>
and the css:
.table-header-cell {
display: inline-block;
border: 1px solid grey;
margin: 1px 1px 5px;
width: 30px;
height:90px;
}
.table-header-cell .innertext {
transform: rotate(-90deg);
width: 150px;
margin: 0 -60px;
}
This should give you the results your looking for hopefully.
If this helps please mark the answer and vote it. Thanks
For the angular ng-repeat issue, you need to make sure your load type is "No wrap in Body" for your JavaScript, also you were loading Angular twice so I removed the second load.
And for the rotation, you should not rotate the container, but create an inner container and rotate on that.
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<div class="table-header-cell" ng-repeat="item in headerDates">
<div class="cell">
{{item.date}}
</div>
</div>
</div>
</div>
.table-header-cell {
display: inline-block;
border: 1px solid grey;
margin: 1px 1px 5px;
height: 100px;
width: 30px;
}
.cell {
transform: rotate(-90deg);
margin-left: -30px;
margin-top: 30px;
width: 100px;
}
Here is the corrected fiddle: https://jsfiddle.net/w674sLbL/10/
Hope this helps.
How do I align the red box with the gray box vertically?
http://jsfiddle.net/sLZzK/1/
I need several box combinations like that on my page, which is why I cannot simply push the red box up manually. A negative margin won't work either, since I do not know in advance how much content will be in the gray box. And the red box must overlap other page content, hence the absolute positioning. (http://jsfiddle.net/xMm82/)
CSS:
body {
padding: 0;
margin: 10px;
}
.left_div {
margin-bottom: 10px;
width: 300px;
height: 70px;
border: 1px solid gray;
}
.right_div {
position: absolute;
border: 1px solid red;
left: 311px;
width: 200px;
height: 200px;
}
HTML:
<div class="left_div">gray box
<div class="right_div">red box</div>
</div>
Why are you using absolute positioning for such structure? In the case the better solution is to use float: left for each div. If you want to have two divs aligned vertically use display: table-cell rule. Here it is:
FIDDLE
UPDATE: Try to use this:
FIDDLE
what I've understood is you want gray box on top of Red box:
first of all wrap them in a parent div.
set the width of wrapper to desirable width.
set width to 100%(both red and gray) and you are done !! (fiddle)
If you want to arrange them horizontally:
left_div will be wrapper
it will contain 2 child div's
left one will have content and right one will be red box.(fiddle)
I would do it this way:
HTML:
<div class="container">
<div class="left_div">gray box</div>
<div class="right_div yellow">red box</div>
<div class="clr"></div>
</div>
CSS:
.container:not(:last-child){margin-bottom: 10px;}
.left_div,.right_div{float:left;}
.clr{clear:both;}
Fiddle here.
use float to arrange vertically and clear:both to prevent any errors
here's the corrected one
.left{
float:left;
width: 300px;
}
.right{
float:left;
width: 200px;
}
.left_div {
width: 300px;
height: 70px;
border: 1px solid gray;
}
.right_div {
border: 1px solid red;
width: 200px;
height: 200px;
}
<div class="left">
<div class="left_div">
</div>
</div>
<div class="right">
<div class="right_div">
</div>
</div>
<div style="clear:both"></div>
http://jsfiddle.net/sLZzK/8/
There you go: http://jsfiddle.net/sLZzK/14/
HTML:
<div class="wrapper">
<div class="left_div">gray box</div>
<div class="right_div">red box</div>
</div>
CSS:
.wrapper {
border: 1px solid #369;
padding: 10px;
}
.wrapper > div {
display: inline-block;
vertical-align: middle;
}
You might also want to read about flexbox which will give you a similar and more consistent result, however it's not fully supported on various browsers yet.
I have a div "container", say 400px width, with a left-floated divs inside — "box" 100px width. There are six of "box" divs so their summary width is larger than 400px which causes that line of divs to get wrapped and I get two lines, with 4 and 2 elements each. How can I make these 6 divs go in one row, one line instead of two?
You simply need white-space: nowrap on the parent element with display: inline-block on the children. Live demo here (click).
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
css:
.container {
width: 400px;
background: black;
white-space: nowrap;
overflow: scroll;
}
.container > div {
height: 50px;
width: 100px;
background: #555;
display: inline-block;
margin: 10px;
}
Assuming you continue using float: left;... If your container has a set width of 400px, then your total sum of children divs can't surprass 400px wide either. This includes any padding, margin, or border space as well.
To answer your question simply, there are several ways...
Make the container 600px wide instead of 400px...
Make the child elements 66px wide instead of 100px...
A better option is to use percentages...
Make the child elements 16.666667% wide.
You need to give display: inline-block to the children of container and also give white-space: nowrap to make them flow horizontally. Here is the CSS
#Container {
width: 400px;
border: 1px solid black;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.inside {
width: 100px;
height: 300px;
border: 1px solid black;
display: inline-block;
}
and HTML
<div id="Container">
<div class="inside"></div>
<div class="inside"></div>
<div class="inside"></div>
<div class="inside"></div>
<div class="inside"></div>
<div class="inside"></div>
</div>
Here is the fiddle for your problem http://jsfiddle.net/sgaurav/vZLWQ/
hope it will help you
display:inline-block;
Here's what I am trying to accomplish...
"parent" has position:relative
"div 1-3" have position:absolute
However, whenever I do this, I find myself having to assign specific "top" values in my CSS. So div 1 might be top:50px, div 2 would be top:150px, and div 3 would be top:225px;
Is there a way to make sure the divs continue to stack inside the parent without assigning top values and/or absolute positioning?
A div should already display as a block and take up a full "row". Here is some HTML and CSS to give an example, compare it to your code:
http://jsfiddle.net/mWcWV/
<div id="parent">
<div class="child">Foo</div>
<div class="child">Bar</div>
<div class="child">Baz</div>
</div>
Should be straight:
HTML:
<div class="container">
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</div>
CSS:
.container {
position: relative;
width: 500px;
height: 500px;
background-color: #ffbf00;
}
.red {
background-color: #f00;
width: 200px;
height: 150px;
margin: 5px auto;
}
.blue {
background-color: #0f0;
width: 200px;
height: 150px;
margin: 5px auto;
}
.green {
background-color: #00f;
width: 200px;
height: 150px;
margin: 5px auto;
}
Check this fiddle.
In css file use...
div
{
display : block;
}
Which will give a break line for each div block and that feature is by default and don't use relative - absolute technique.
Div elements are block elements, which means that they will take a full row and that any element next to them will skip a line.
Just do:
<div></div>
<div></div>
<div></div>
If that does not work, you probably need to put them in display: inline-block;
Just remove absolute positioning. Center the divs using margin:auto and then provide whatever vertical margins you like.
You can give margin to inner div.
I want to center a container div within another div, and the child divs of the container need to also be centered, but left-aligned with each other. The child divs are of variable and unpredictable width.
For example:
<div>
<div class="container">
<div class="child"><img />Text</div>
<div class="child"><img />Text Widest</div>
<div class="child"><img />T</div>
</div>
</div>
I found a solution that works in Firefox, but need a universal solution. I also considered using JavaScript to measure the images, text, and div's, but am confident that I'm just CSS ignorant and there is a simple, elegant solution. Here is what works just in Firefox:
.container {
width: -moz-max-content;
margin: 0px auto 0px auto;
border-style: solid;
}
.child {
border-style: solid;
margin: 0px auto 0px auto;
}
.container {
display: table;
margin: 0 auto;
}
.container > .child {
display: table-cell;
}