I want to align 4 divs horizontally inside a wrapper that has a fixed width and height. Each div should have the same width and height as their wrapper. When the divs are aligned, it should look something like this:
I assume the wrapper has to have the overflow: hidden; property inside its CSS style, so the overflowing divs aren't visible.
I tried using display: grid; on the wrapper but didn't get the resulting columns to overflow. I also tried display: flex; which resulted in the same output. However, if I align the divs as rows inside the wrapper, the vertical align with overflow works.
You need to put all your divs inside the same wrapper like this :
<div class="wrapper">
<div class="wrapper-item">a</div>
<div class="wrapper-item">b </div>
<div class="wrapper-item">c </div>
<div class="wrapper-item">d </div>
</div>
css :
.wrapper{
display: flex;
justify-content: center;
}
.wrapper-item{
border: 1px solid blue;
width: 200px;
height: 200px;
margin: 0 20px;
overflow-wrap: break-word;
word-wrap: break-word;
overflow-y:auto;
}
I've created a codpen, tell me if this is what you're looking for
https://codepen.io/iheb-riahi-horizon-tech-tn/pen/ExpGqrb
Related
If I have an HTML structure like this:
<div style="display: flex; align-items: stretch; height: 150px; overflow: auto">
<div style="background: red; width: 30px"></div>
<div style="background: yellow; flex-grow: 2; height: 200px"></div>
</div>
The align-items: stretch will set the first child's height to the innerHeight of the flex element, not its actual scrollable height. So when you scroll down, the red background stops at the bottom of the initial viewport.
height: 100% has a similar problem (height is relative to parent's outer size).
It is possible to solve this by introducing another wrapping element, and moving the overflow and height styles to that, but that is awkward for other reasons in my situation. Is there any way to make all flex children the same (full) height without doing that?
You can make use flex wrap, but it will cause wrapping obviously. Depending on your use case, you may or may not find it easier to work around that in some other way.
<div style="display: flex; flex-wrap: wrap; align-items: stretch; height: 150px; overflow: auto">
<div style="background: red; width: 30px"></div>
<div style="background: yellow; flex-grow: 2; height: 200px"></div>
</div>
The gist of this change is that, for a non-wrapping flex line, the line's height is given by the height of the parent element (150px in your example), but for a wrapping flex line, the heights of the child elements are considered (200px here).
per: https://bugzilla.mozilla.org/show_bug.cgi?id=1267060
Is using CSS grid an option for your situation?
The following seems to do what you are asking for:
<div style="
display: grid;
height: 150px;
overflow: auto;
grid-template-columns: min-content 1fr;
">
<div style="background: red; width: 30px">1</div>
<div style="background: yellow; height: 200px">hi</div>
</div>
This question already has answers here:
How can I horizontally center an element?
(133 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
How do I vertically center text with CSS? [duplicate]
(37 answers)
How to align a <div> to the middle (horizontally/width) of the page [duplicate]
(27 answers)
How to align 3 divs (left/center/right) inside another div?
(21 answers)
Closed 4 years ago.
What is the best way and best practice to achieve this layout? Meaning it will stay consistent on iPad, Android or desktop. CSS Grids? Flexbox? Logo div should be centered on the page vertically and horizontally. Text divs should be centered in the middle of the logo div.
here is the layout mockup
There is no right way, you could use anything you like, however i would suggest flexbox for that demande, but you could do it with grid or so..
.container{
display: flex;
justify-content: space-around; /* to meet your need or space-between*/
align-items: center; /* vertical */
}
.container{ /* get all the space */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.container, .container > .item{
display: flex;
justify-content: space-around; /* horizontal, nice to try: center or space-between*/
align-items: center; /* vertical */
}
.item {
border: 2px solid blue;
width: 150px;
height: 100px;
}
.large{
height: 200px;
}
#media screen and (max-width: 480px) { /* using media query to detect screen size */
.container{
flex-direction: column; /* switch display into column */
}
}
<div class="container">
<div class="item">Text Div Centered</div>
<div class="item large">Logo Centered</div>
<div class="item">Text Div Centered</div>
</div>
You can use Flexbox to achieve that. At first create a .flex container with display:flex property. Now apply flex:1 to its children. All its children acquire an equal width.
But from the image shown, your Logo Divs height is larger, then apply the same here on the individual element. But, if you observe, nothing is centered. So, in order to center every box, you need to use the properties align-items:center and justify-content:center on the .flex.
Even now the text inside is not centered, but the boxes are centered vertically and horizontally. To achieve the same on the children, apply display:flex and the same centering method described above to its children too. Now the content of the children i.e, the text inside is centered as well.
.flex, .flex > div{
display:flex;
align-items:center;
justify-content:center;
}
.flex > div{
flex:1;
height:80px;
margin:5px;
border:1px solid blue;
}
.flex .logoDiv{
height:150px;
width:100%;
}
<div class='flex'>
<div class='textDiv'>Text Div Centered</div>
<div class='logoDiv'>Logo Centered</div>
<div class='textDiv'>Text Div Centered</div>
</div>
Could you use a table? and remove border / cellspacing??
td {
display: table-cell;
text-align: center;
vertical-align: middle;
}
<table>
<tr>
<td><div class="div1">test</div></td>
<td><div class="div2">test</div></td>
<td><div class="div3">test</div></td>
</tr>
<tr>
<td><div class="div1">test</div></td>
<td><div class="div2">test</div></td>
<td><div class="div3">test</div></td>
</tr>
</table>
I have 2 divs below each other. I want them both to be centered horizontally. The thing is that I have to use align: center for the #wrapper and margin: auto for the other. Otherwise only 1 of them is centered. If I use align-center for both, only the #wrapper is centered, if I use margin: auto for both, only the second one is centered.
Why I have to use 2 different properties to align them in the center?:
HTML:
<div class="col-sm-5 col-sm-offset-3" id="wrapper">
<div class="row">
<div class="col-sm-1 col-sm-offset-2" id="col1"> col1 </div>
<div class="col-sm-1 col-sm-offset-2 " id="col2"> col2 </div>
<div class="col-sm-1 col-sm-offset-2" id="col3"> col3 </div>
</div>
</div>
<div id="below">
Centered div below the #wrapper div
</div>
CSS:
html, body{
height:100%;
}
#col1{
background-color: lime;
border: solid 1px;
text-align: center;
}
#col2{
background-color: aqua;
border: solid 1px;
text-align: center;
}
#col3{
background-color: lightpink;
border: solid 1px;
text-align: center;
}
#wrapper{
border: solid 1px;
height: 10%;
width: 50%;
align: center;
}
#below{
border: solid 2px;
text-align: center;
min-height: 100%;
width: 80%;
clear: both;
margin: auto;
}
align isn't a valid CSS property - it is an attribute available on the <table> element, but one that is discouraged from use: https://developer.mozilla.org/en/docs/Web/HTML/Element/table#Attributes
Using align in your CSS should have no effect.
margin: 0 auto; affects the container directly, and when the container is block-level (display: block).
text-align: center affects text, inline, and inline-block level children of a container - not the container itself.
It's important to distinguish between the two:
centering a block-level element: use margin: 0 auto;
centering text, inline, or inline-block level children: use text-align: center;
In light of that, check that #wrapper is block-level i.e. display: block. If it isn't, or it has a parent that inhibits its width, then it won't center with margin, unless you go into the display: flex world, which you shouldn't really explore until you grasp the fundamentals of block and inline-block level elements.
I've written an article explaining how to leverage the basic display properties, supplemented with interactive Codepen demos: http://fixate.it/blog/css-display-properties/
Div margin: auto vs align: center
margin: 0 auto When can you use it?
When will you need to set center align any div or any block like main parent container in this case you have to use margin: 0 auto with display: table it be will set your section center of parent section.
text-align: center When can you use it?
When will you need to set center align any Text Paragraph or Image in this case you have to use text-align: center it will be set your text-paragraph or image center of
I have the following HTML:
<div id="parent">
<div class="child">Box1</div>
<div class="child">Box2</div>
<div class="child">Box3</div>
<div class="child">Box4</div>
<div class="child">Box5</div>
<div class="child">Box6</div>
<div class="child">Box7</div>
<div class="child">Box8</div>
<div class="child">Box9</div>
<div class="child">Box10</div>
</div>
And the following CSS:
#parent {
display: inline-block;
max-width: 1000px;
height: 500px;
border: 1px solid #000000;
text-align: center;
}
.child {
width: 100px;
height: 100px;
border: 1px solid #000000;
margin: 10px;
float: left;
}
I want to float left the child DIVs and at the same time center them in the parent DIV that does't have a fixed width.
The reason I don't want to use display: inline-block for the child DIVs is that if a row has only 1 or 2 boxes , they will be centred and i want them to be aligned to the left with the boxes on the previous rows.
The second reason is that more data will be loaded using ajax. So, if the last row has only 1 or 2 boxes and still can accommodate more boxes, they will be inserted into a new line instead of being appended to the last row. I'm not sure of this point but I think that what would happen when using display inline-block. Float instead doesn't have this behaviour.
Forgot to mention that the parent should be display: inline-block because another box will be aligned next to it.
I created a fiddle for you to play with:
http://jsfiddle.net/6a2eqpmu/
Unfortunately you are unable to do this using pure css. If you are willing to use a bit of javascript and jQuery you can easily achieve what you want:
var parent = $('#parent'),
container = $('#container'),
children = container.children('.child'),
width = children.eq(0).outerWidth() + parseInt(children.eq(0).css('margin-left')) + parseInt(children.eq(0).css('margin-right')),
maxWidth = children.length * width;
function resizeContainer() {
var newWidth = Math.floor(parent.width() / width) * width;
if (newWidth <= maxWidth && newWidth > 0) {
container.width(newWidth);
}
}
$(window).resize(resizeContainer);
resizeContainer();
Example
Simply add margin: 0 auto; to #parent. This will center the parent div when the document width is over 1000px wide.
If your parent element doesn't have a fixed width you can't center his child elements with only CSS. I think you have to write some script that calculate the parent width, every row width and set to them the properly margin-right and margin-left.
text-align works on inline elements. If I understand your problem, you should remove the float and put the boxes in display:inline-block.
Something like this : http://jsfiddle.net/6a2eqpmu/7/
#parent {
max-width: 1500px;
height: 500px;
border: 1px solid #000000;
text-align: center;
}
.child {
width: 100px;
height: 100px;
border: 1px solid #000000;
margin: 10px;
display:inline-block;
}
I added html comments to avoid the white-space problem, and put a max-width of 1500px in order to see the boxes centered.
You can add invisible placeholders to the end of your inline blocks. That will left-align the last row.
http://jsfiddle.net/aakt65x4/
If you don't fill up the first row, the entire thing will appear left-aligned. But I think that's what you want.
HTML:
<!--
Centers a group of boxes that wrap to the width of its container.
Also left-aligns them inside the container.
Issue: Does not center group if there aren't enough boxes to fill
the first row.
-->
<div class="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<!--
How many placeholders do you need?
At least the number of blocks minus two.
-->
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</div>
CSS:
body {
text-align: center; /* center a max-width container */
font-size: 0; /* remove spaces between blocks */
}
.container { /* you don't need this */
background-color: #eee; /* so you can see what's happening */
max-width: 960px; /* to demonstrate the centering of a max-width container */
display: inline-block; /* center the max-width container */
text-align: center; /* center the group of blocks */
}
.block {
display: inline-block; /* left-align within the group */
background-color: red; /* so you can see what's happening */
height: 100px;
width: 100px;
margin: 10px;
}
.placeholder {
display: inline-block; /* add to the line of blocks */
width: 120px; /* width + margin of a block */
}
I have a container div with a fixed width and height, with overflow: hidden.
I want a horizontal row of float: left divs within this container. Divs which are floated left will naturally push onto the 'line' below after they read the right bound of their parent. This will happen even if the height of the parent should not allow this. This is how this looks:
How I would like it to look:
![Right][2] - removed image shack image that had been replaced by an advert
Note: the effect I want can be achieved by using inline elements & white-space: no-wrap (that is how I did it in the image shown). This, however, is no good to me (for reasons too lengthy to explain here), as the child divs need to be floated block level elements.
You may put an inner div in the container that is enough wide to hold all the floated divs.
#container {
background-color: red;
overflow: hidden;
width: 200px;
}
#inner {
overflow: hidden;
width: 2000px;
}
.child {
float: left;
background-color: blue;
width: 50px;
height: 50px;
}
<div id="container">
<div id="inner">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
style="overflow:hidden" for parent div and style="float: left" for all the child divs are important to make the divs align horizontally for old browsers like IE7 and below.
For modern browsers, you can use style="display: table-cell" for all the child divs and it would render horizontally properly.
You can now use css flexbox to align divs horizontally and vertically if you need to. general formula goes like this
parent-div {
display: flex;
flex-wrap: wrap;
/* for horizontal aligning of child divs */
justify-content: center;
/* for vertical aligning */
align-items: center;
}
child-div {
width: /* yoursize for each div */
;
}
This seems close to what you want:
#foo {
background: red;
max-height: 100px;
overflow-y: hidden;
}
.bar {
background: blue;
width: 100px;
height: 100px;
float: left;
margin: 1em;
}
<div id="foo">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
you can use the clip property:
#container {
position: absolute;
clip: rect(0px,200px,100px,0px);
overflow: hidden;
background: red;
}
note the position: absolute and overflow: hidden needed in order to get clip to work.
Float: left, display: inline-block will both fail to align the elements horizontally if they exceed the width of the container.
It's important to note that the container should not wrap if the elements MUST display horizontally:
white-space: nowrap
Float them left. In Chrome, at least, you don't need to have a wrapper, id="container", in LucaM's example.