I'm making a table out of divs. The reason to why I'm using divs is a table might not be as responsive as I want.
Anyways I made this container that should be the width of the children and centered, however for some reason it decides to be bigger despite no width being set. Any ideas on how to fix that?
.wrapper {
transform: translate(-50%, 0);
margin-left: 50%;
height: 100%;
background-color: purple;
}
.wrapper div {
background-color: cornflowerblue;
width: 150px;
height: 150px;
display: block;
float: left;
margin: 10px;
}
<body style="margin: 0; height: 100vh; width: 100vw;">
<section class="wrapper">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
It's your floats. If you want the container to "contain" the divs, you have to "float" bu either using float on the container itself or using inline block.
I would suggest using display:inline-block
Try this out:
.wrapper {
display: inline-block;
background-color: purple;
margin: 0px auto;
max-width: 280px;
padding: 0;
}
.wrapper div {
background-color: cornflowerblue;
width: 120px;
height: 120px;
display: block;
float: left;
margin: 10px;
}
This will cause your container to actually contain the elements within it. Additionally, you will need to add the max-width to the container to ensure you don't have any wonky padding to the right. You might want to use some media queries to set that up so that it looks right at each size.
#media screen AND (max-width: 300px) {
.wrapper {
max-width: 280px;
}
}
The issue is that all children of your .wrapper div are floating, resulting in a height of 0 on their parent. You can simply remedy this by setting overflow:hidden on the wrapping container, if you need them to be floating (you could also use display:inline-block instead of float:left and wouldn't require the overflow property).
.wrapper {
transform: translate(-50%, 0);
margin-left: 50%;
background-color: purple;
overflow: hidden;
}
.wrapper div {
background-color: cornflowerblue;
width: 150px;
height: 150px;
display: block;
float: left;
margin: 10px;
}
<body style="margin: 0; height: 100vh; width: 100vw;">
<section class="wrapper">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
Set the wrapper div to display: inline-block;
HTML
<section class="wrapper">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
CSS
.wrapper {
display: inline-block;
background-color: purple;
}
.wrapper div {
background-color: cornflowerblue;
width: 120px;
height: 120px;
display: block;
float: left;
margin: 10px;
}
Codepen
This doesn't address your specific code, but you did mention trying to create tables with DIVs. You could use display: table | table-row | table-cell;.
Here's one way to implement it:
.table {
display: table;
}
.tr {
display: table-row;
}
.td {
display: table-cell;
}
.example {
width: 50%;
}
.example .td {
text-align: center;
border: 1px solid #CCC;
}
<div class="table example">
<div class="tr">
<div class="td">
A
</div>
<div class="td">
B
</div>
<div class="td">
C
</div>
</div>
<div class="tr">
<div class="td">
D
</div>
<div class="td">
E
</div>
<div class="td">
F
</div>
</div>
</div>
You could also change up the CSS to what's below if you didn't want to slap a CSS class onto every element:
.table {
display: table;
}
.table > div {
display: table-row;
}
.table > div > div {
display: table-cell;
}
Related
Using display:table;, I am trying to vertically align two inline div's with different heights inside a fixed width container.
display:table; and display:table-cell with vertical-align: middle; is a very simple solution to this that works in certain circumstance - however in this it seems I have missed something.
The result of my fiddle is a correct vertical-align however each element is not holding their responsive widths to fill the entire container space. i.e. 2 elements inside the container equal 50% width.
Here is my code:
HTML
<div class="table container">
<div class="inner-column table-cell">
<div class="table inner-container">
<div id="left" class="table-cell">
content
</div>
</div>
</div>
<div class="inner-column table-cell">
<div class="table inner-container">
<div id="right" class="table-cell">
content
</div>
</div>
</div>
</div>
CSS
body {
width: 100%;
margin: 0 auto;
background: white;
color: white;
text-align: center;
background: white;
}
.table {display: table;}
.table-cell {display: table-cell; vertical-align: middle;}
.container {
width: 600px;
height: 200px;
background: lightgrey;
margin: 0 auto;
white-space: nowrap;
padding: 0
}
.inner-column {
display: inline-block;
white-space: normal;
width: 50%;
height: 100%;
border:1px blue solid;
padding: 0;
margin: 0;
}
.inner-container {
margin: 0 auto;
width: 100%;
}
#left {
background-color: red;
height: 120px;
}
#right {
background-color: purple;
height: 170px;
}
Here is the above in a FIDDLE
Problem List:
Width of the inner-column is slightly bigger than the container
each element container is not vertically aligned to the fixed height of the container.
display:table-cell is not being applied since you wrote this code before display:inline-block.
I have updated fiddle
https://jsfiddle.net/dgzp6h2w/1/
I'm having a bit of difficulty in displaying a table. I use display:table and display:table-cell a lot for sections usually. Especially when I just want to center the content of a section vertically. So to say, I have the following HTML:
<div class="wrapper">
<div class="cell">
<div class="red">
</div>
</div>
</div>
and the following css applied to the html:
html,body {
height: 100%;
}
.wrapper {
display: table;
width: 100%;
height: 100%;
}
.wrapper * {
width: 100%;
height: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
}
.red {
margin-right: auto;
margin-left: auto;
background: red;
height: 200px;
width: 200px;
}
Now there is a small problem. I want to add a section header to this particular section and the section header has to be a child of .wrapper, so the HTML changes as below :
<div class="wrapper">
<div class="section-heading">
<h1>section heading</h1>
</div>
<div class="cell">
<div class="red">
</div>
</div>
</div>
Now the problem with using display table and table-cell is that when I add a header to the section, I can't add it without it affecting the other child elements of .wrapper . So how do I add a heading (when the heading is added in the above HTML the .cell div seems to be moving horizontally slightly)?
Of course I could use absolute positioning, but I was just wondering, is there something that can be done, without taking the heading element out of the flow?
FIDDLE HERE
Did you try adding display:table-row to the section-heading?
.wrapper > .section-heading{
display:table-row;
height:auto;
}
Fiddle: http://jsfiddle.net/7xo353hg/4/
You can make heading container display: table-row:
.section-heading {
display: table-row;
text-align: center;
}
Check the demo:
html, body {
height: 100%;
}
.wrapper {
display: table;
width: 100%;
height: 100%;
}
.wrapper * {
width: 100%;
height: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
}
.red {
margin-right: auto;
margin-left: auto;
background: red;
height: 200px;
width: 200px;
}
.section-heading {
display: table-row;
text-align: center;
}
<div class="wrapper">
<div class="section-heading">
<h1>section heading</h1>
</div>
<div class="cell">
<div class="red"></div>
</div>
</div>
I am a bit newbie with CSS and i am pretty obfuscated trying to center a group of divs inside a div. What i want:
divs 2,3 and 4 should be centered inside div1.
My approach:
.div1 {
display: inline-block;
margin: 0 auto;
text-align: center;
}
.restofdivs {
width: 470px;
margin: 20px;
min-height: 1px;
float:center
}
the result is: the 3 divs (2,3 and 4) one on top of another...
Regards,
This can easily be done with table display:
.table-display {
display: table;
width: 100%;
}
.cell-display {
display: table-cell;
}
.div1, .div2, .div3, .div4 {
padding: 40px;
}
.div1 {
background: #ABC;
}
.div2 {
background: #DEF;
}
.div3 {
background: #CAD;
}
.div4 {
background: #FAD;
}
<div class="div1">
<div class="table-display">
<div class="cell-display div2"></div>
<div class="cell-display">
<div class="div3"></div>
<div class="div4"></div>
</div>
</div>
</div>
Maybe set a width on .div1 and remove inline-block from .div1
.div1 {
width: 960px;
margin: 0 auto;
text-align: center;
}
.restofdivs {
width: 470px;
margin: 20px;
min-height: 1px;
}
The most common way to center a block element if you know it's width is to define the width and use "margin: 0 auto". This tells the browser to give a top and bottom margin of 0, and to automatically determine equal margins on the left and right.
Using floats, you can create the layout you described as follows:
http://jsfiddle.net/ynt4suee/
Markup:
<div>
<div id="one" class="border clearfix">one
<div id="wrapper">
<div id="two" class="border">two</div>
<div class="subcontainer">
<div id="three" class="border">three</div>
<div id="four" class="border">four</div>
</div>
</div>
</div>
CSS:
div.border{
border: 1px solid red;
}
div#wrapper{
width: 400px;
margin: 0 auto;
}
div#two{
width: 250px;
float: left;
}
div.subcontainer{
float: right;
width: 130px;
}
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Here's another approach, using inline-block elements for the inner divs instead:
http://jsfiddle.net/xojqq4v5/
Markup:
<div id="one" class="border">
div 1
<div id="wrapper">
<div id="two" class="border">div 2</div>
<div id="subcontainer">
<div id="three" class="border">div 3</div>
<div id="four" class="border">div 4</div>
</div>
</div>
</div>
CSS:
div.border{
border: 1px solid red;
margin-bottom: 5px;
}
div#wrapper{
width: 450px;
margin: 0 auto;
}
div#two, div#subcontainer{
display: inline-block;
vertical-align: top;
}
div#two{
width: 300px;
}
div#three, div#four{
width: 140px;
}
Still, so long as you know the total width of the inner divs, you can center the wrapper using "margin: 0 auto", which has the advantage of not centering text on all child elements unless otherwise specified.
The difference here is that to lay out the inner divs in columns, div 2 and the container div containing divs 3 and 4 are defined as inline-block elements.
Is there a "pure" way to achieve this layout where there is fixed content and equal fluid gutters, i.e. a way without using calc?
Fiddle
HTML:
<body>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</body>
CSS:
body {
min-width: 300px;
}
.content {
width: 100px;
height: 100px;
background: blue;
float: left;
margin-left: calc((100% - 300px) / 4);
}
Unfortunately not. You could use a way to "almost" make it like that by using wrapper divs for each .content and style the wrappers to be one third of the body width. Within each wrapper you center the blue boxes. The drawback of that is the distance between the blue boxes is twice as wide as the distance from the outer blue boxes to the body border.
* {
margin: 0;
padding: 0;
border: 0;
}
body {
min-width: 300px;
width: 100%;
}
.content-wrapper {
width: 33.3333%;
text-align: center;
float: left;
}
.content {
width: 100px;
height: 100px;
background: blue;
margin: 0 auto;
}
<body>
<div class="content-wrapper"><div class="content"></div></div>
<div class="content-wrapper"><div class="content"></div></div>
<div class="content-wrapper"><div class="content"></div></div>
</body>
I fiddled around a bit and almost achieved a solution:
Fiddle
HTML:
<body>
<div id="wrap">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
</body>
CSS:
body {
margin: 0;
}
#wrap {
text-align: justify;
}
.content {
width: 100px;
height: 100px;
background: blue;
display: inline-block;
}
#wrap:before {
content:"";
display: inline-block;
}
#wrap:after {
content:"";
width:100%;
display: inline-block;
}
If multiple pseudo-elements were possible, we could generate an empty inline-block (the same "empty word" as the :before) as :after(1) and the element with width:100% as :after(2).
Well, I couldn't get it to work. But thanks to you Paul for your answer and thanks chipChocolate.py and myfunkyside for the edit!
http://jsfiddle.net/hqu8N/
<div id="container">
<div id="one"><p>one</p></div>
<div id="two"><p>two</p></div>
<div id="footer"><p>footer</p></div>
</div>
#container {
display: table;
width: 200px;
height: 200px;
background-color: red;
border-spacing: 5px;
}
#one {
display: table-cell;
background-color: yellow;
}
#two {
display: table-cell;
background-color: blue;
}
#footer {
display: table-footer-group;
background-color: green;
}
Basically i want the green footer to extend over to the end of the blue ID. And also between the green footer and the yellow ID it's 10 px of space instead of 5px. What am i doing wrong ?
I used grid for your case, and a grid-gap for a 5px distance:
#container {
display: grid;
grid-gap: 5px;
width: 200px;
height: 200px;
background-color: red;
}
#one {
background-color: yellow;
}
#two {
background-color: blue;
}
#footer {
background-color: green;
grid-column: 1 / 3;
}
<div id="container">
<div id="one">
<p>one</p>
</div>
<div id="two">
<p>two</p>
</div>
<div id="footer">
<p>footer</p>
</div>
</div>
https://jsfiddle.net/arman1373/4xkgd5Lj/
I had the same issue with both the header-group and footer-group.
I solved this by putting a container around my table which specified the basic width. Inside that I put a div with display: table properties as below
#tContainer {
width: 80%;
margin; 0% auto;
}
#tData {
display: table;
width: 100%
}
.tDataRow {
display: table-row;
}
.tDataRow span{
display: table-cell;
}
I didn't use table-header or table-footer but defined them separately:
.tDataFooter {
display: block;
width: auto;
}
And the element structure as follows:
<div id="tContainer">
<div id="tData">
<div class="tDataRow"><span class="dHeader"> xyz </span></div>
<div class="tDataRow"><span> data sets repeat </span></div>
</div>
<div class="tDataFooter"> Footer data </div>
</div>
I am hoping someone else has a neater solution but I couldn't get the header and footer to fit at all, not even the header columns to align with the data
Result:
Resulting table sample