I have a problem with my css. I cant get the div-children of my "round"-classes to fill their parent.
http://jsfiddle.net/ubJxJ/10/
To be even more clear: I want the divs to align for a bracket-setup. F.x. "Match #17"s center is the same as the center of "Match #1" and "Match #2".
CSS:
#cup { display:table; }
#headlinecontainer, #roundcontainer { display:table-row; }
#headlinecontainer div {
display:table-cell;
text-align:center;
}
#roundcontainer .round {
display:table-cell;
vertical-align:middle;
background-color:#F00;
overflow:hidden;
}
#roundcontainer .round div.match { background-color:#0F0; }
HTML:
<div id="cup">
<div id="headlinecontainer">
<div>Round of 32</div>
<div>Round of 16</div>
<div>Quarter</div>
<div>Semi</div>
<div>Final</div>
</div>
<div id="roundcontainer">
<div class="round ro32">
<div class="match">Match #1</div>
<div class="match">Match #2</div>
...
<div class="match">Match #15</div>
<div class="match">Match #16</div>
</div>
<div class="round ro16">
<div class="match">Match #17</div>
...
<div class="match">Match #24</div>
</div>
<div class="round quarter">
<div class="match">Match #25</div>
<div class="match">Match #26</div>
<div class="match">Match #27</div>
<div class="match">Match #28</div>
</div>
<div class="round semi">
<div class="match">Match #29</div>
<div class="match">Match #30</div>
</div>
<div class="round">
<div class="match">Match #31</div>
</div>
</div>
</div>
Thanks in advance
I think I understand what you are looking for: a typical bracket setup.
However, it seems you have already achieved that!
Look at my screenshot of your jfiddle:
What browser are you using? How does it look for you? (I am using Chrome).
Related
I am trying to make 2 columns, underneath one of the column need to have 3 rows. each rows has seperate number of cells. but it's not working for me. it should 100% wide, but it look like inline-table - how to fix this?
#table {
display:table;
width:100%
}
.row {
display:table-row;
}
.cell {
display:table-cell;
border:1px solid grey;
}
.row1 {
display: table-caption;
}
.cell1 {
width:30%
}
<div id="table">
<div class="row">
<div class="cell cell1">30%</div>
<div class="cell cell2">
<div class="row row1">
<div class="cell"><h2>90%</h2></div>
<div class="cell"><h2>10%</h2></div>
</div>
<div class="row row2">
<div class="cell"><h2>40%</h2></div>
<div class="cell"><h2>20%</h2></div>
<div class="cell"><h2>20%</h2></div>
<div class="cell"><h2>20%</h2></div>
</div>
<div class="row row2">
<div class="cell"><h2>100%</h2></div>
</div>
</div>
</div>
</div>
I know this question has been asked before. However, I do not seem to find my mistake.
I set up a plnkr. I try to align some text vertically, whereas the the stuff that needs to be aligned is nested into multiple divs.
<div class="news col-md-12" id="detailsView" >
<div class="col-md-8 ">
<div class="row">
<div class="col-md-5 widthInDetails">
<div class="row">
<div class="col-md-8" id="newsDetails">
Hello I am fine and how are your (I am good too)
</div>
</div>
</div>
</div>
</div>
</div>
and in my CSS I have this.
.news{
background-color:black;
line-height:200px;
width:200px;
height:200px;
display:table;
}
#newsDetails{
display:table-cell;
vertical-align:middle;
}
So basically I have I lineheight given from the outer div with class="news". I want the the nested div to be aligned vertically. Is there any way to do this?
http://plnkr.co/edit/cMaCrG1Y8Ky48HwtgNPk?p=preview
If you want to use the display: table property, you should set it in the parent node, like:
<div class="news col-md-12" id="detailsView" >
<div class="col-md-8 ">
<div class="row">
<div class="col-md-5 widthInDetails">
<div id="newsParent" class="row">
<div class="col-md-8" id="newsDetails">
Hello I am fine and how are your (I am good too)
</div>
</div>
</div>
</div>
</div>
</div>
.news{
background-color:black;
width:200px;
height:200px;
}
#newsParent {
display:table;
}
#newsDetails{
height: 200px;
display:table-cell;
vertical-align:middle;
}
Give it a try and let me know if it helps!
You can make wrapper display: table and child div display: table-cell; vertical-align: middle;. find the below jsfiddle demo.
HTML
<div class="news col-md-12" id="detailsView" >
<div class="col-md-8 ">
<div class="row">
<div class="col-md-5 widthInDetails">
<div class="row newsDetailswrap">
<div class="col-md-8" id="newsDetails">
Hello I am fine and how are you?</div>
</div>
</div>
</div>
</div>
</div>
CSS
.newsDetailswrap{
background: red;
height: 100px;
display:table;
}
#newsDetails{
display: table-cell;
vertical-align: middle;
}
http://jsfiddle.net/hhbnywq1/
Once between the div tags, an HTML tag (eg headings, breaks), the contents are no longer align the same. Example: Html.DisplayFor (...) should end always justified. How can this be fixed?
<div class="table">
<div class="row">
<div class="cell">
<h3>Heading 1</h3>
<hr />
<div class="row">
<div class="cell">Label 1</div>
<div class="cell">Html.DisplayFor(...)</div>
</div>
<div class="row">
<div class="cell">Label 2 with much more Text</div>
<div class="cell">Html.DisplayFor(...)</div>
</div>
<br />
<h3>Heading 2</h3>
<hr />
<div class="row">
<div class="cell">Label 3 with Text</div>
<div class="cell">Html.TextBoxFor(...)</div>
</div>
</div>
<div class="cell">
...
</div>
</div>
</div>
CSS:
div .table {
display: table;
width: 100%;
}
div .cell {
display: table-cell;
padding: 0.3em;
}
div .row {
display: table-row;
}
It should actually look more like this (red line):
Its because you break the flow of the layout by not adhering to only using a table->row/cell structure but by injecting div and hr elements in the middle of it.
You could simply add a width to the first column:
.row .cell .row .cell:first-child{
width:200px;
}
Demo Fiddle
The task is pretty strange. I have to create html table BUT I'm not allowed to use traditional <table> tag. My table should look like this:
It would be easy to do it like below:
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="5"></td>
</tr>
...
but, as I said, I'm not allowed to use traditional table tags (table, tr, td, th). Here is JSFIddle of what I have at the moment. How can I get the same result as with <td colspan="5"></td> but using only divs and CSS.
EDITS:
* Table cell's width in one row must not be fixed, it should be dynamic and it should be possible to make them (cells) different width (in one row).
* Table cell's width in different rows of the same column must be equal. Like in traditional table. Only "colspanned" cell's width must be different.
As stated in CSS 2.1 specification in part "17.5 Visual layout of table contents"
Cells may span several rows or columns. (Although CSS 2.1 does not define how the number of spanned rows or columns is determined ...
So the answer is easy! Don't think of CSS tables exactly the same as HTML tables. As there are some differences like what mentioned in "17.2.1 Anonymous table objects":
... the "missing" elements must be assumed in order for the table model to work. Any table element will automatically generate necessary anonymous table objects around itself, consisting of at least three nested objects corresponding to a 'table'/'inline-table' element, a 'table-row' element, and a 'table-cell' element. ...
So you can do it this way (each row as a table and dropped table-row for avoiding unnecessary div block) until they specify a way for defining number of spanned rows or columns:
CSS
.row {
display: table;
width: 100%;
}
.cell {
display: table-cell;
width: 16.67%;
}
.wideCell {
display: table-cell;
}
HTML
<div class="row">
<div class="cell">One</div>
<div class="cell">Two</div>
<div class="cell">Three</div>
<div class="cell">Four</div>
<div class="cell">Five</div>
<div class="wideCell">Six</div>
</div>
<div>One Two Three Four Five Six</div>
<div class="row">
<div class="cell">One</div>
<div class="cell">Two</div>
<div class="cell">Three</div>
<div class="cell">Four</div>
<div class="cell">Five</div>
<div class="wideCell">Six</div>
</div>
You need to use CSS float and width to get the table-like effect you're looking for. What I'm basically doing is I'm placing 5 divs all with a fixed width and class name, and floating them to the left. The wideCell has the same width the .wrapper which just holds them all together in a nice block.
HTML
<div class="wrapper">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="wideCell"></div>
</div>
CSS
.wrapper {
width:510px;
}
.cell {
width:100px;
height:50px;
background-color:#ff0000;
float:left;
border:1px #000 solid;
}
.wideCell {
width:508px;
height:50px;
background-color:#ff0000;
float:left;
border:1px #000 solid;
}
DEMO
EDIT
CSS
.table{
width: 100%;
}
.table .row{
width: 100%;
height: 25px;
margin: 0px;
padding: 0px;
}
.table .row .cell{
width: 150px;
float: left;
border: solid 1px #CCC;
height: 25px;
}
.table .clear_float{
clear: both;
}
.table .row .cell.rowspan{
width: 759px;
border: solid 1px #CCC;
}
html
<div class="table">
<div class="row">
<div class="cell">One</div>
<div class="cell">Two</div>
<div class="cell">Three</div>
<div class="cell">Four</div>
<div class="cell">Five</div>
</div>
<div class="clear_float" />
<div class="row">
<div class="cell rowspan">
One Two Three Four Five
</div>
</div>
<div class="clear_float" />
<div class="row">
<div class="cell">One</div>
<div class="cell">Two</div>
<div class="cell">Three</div>
<div class="cell">Four</div>
<div class="cell">Five</div>
</div>
<div class="clear_float" />
<div class="row">
<div class="cell rowspan">
One Two Three Four Five
</div>
</div>
<div class="clear_float" />
<div class="row">
<div class="cell">One</div>
<div class="cell">Two</div>
<div class="cell">Three</div>
<div class="cell">Four</div>
<div class="cell">Five</div>
</div>
<div class="clear_float" />
<div class="row">
<div class="cell rowspan">
One Two Three Four Five
</div>
</div>
</div>
I have searched a lot there is nothing like colspan in display:table CSS.
You can try this: CSS display:table
<div style="display:table;">
<div style="display:table-row;">
<span style="display:table-cell;">Name</span>
<span style="display:table-cell;"><input type="text"/></span>
</div>
<div style="display:table-row;">
<span style="display:table-cell;">E-Mail</span>
<span style="display:table-cell;"><input type="text"/></span>
</div>
<div style="display:table-row;">
<span style="display:table-cell;">Password</span>
<span style="display:table-cell;"><input type="text"/></span>
</div>
</div>
<div style="display:table;">
<div style="display:table-row; " >
<span style="display:table-cell;">
<button>Send Message</button>
</span>
</div>
</div>
You can do this ( where data-x has the appropriate display:xxxx set ):
<!-- TH -->
<div data-tr>
<div data-th style="width:25%">TH</div>
<div data-th style="width:50%">
<div data-table style="width:100%">
<div data-tr>
<div data-th style="width:25%">TH</div>
<div data-th style="width:25%">TH</div>
<div data-th style="width:25%">TH</div>
<div data-th style="width:25%">TH</div>
</div>
</div>
</div>
<div data-th style="width:25%">TH</div>
</div>
<!-- TD -->
<div data-tr>
<div data-td style="width:25%">TD</div>
<div data-th style="width:50%">
<div data-table style="width:100%">
<div data-tr>
<div data-td style="width:25%">TD</div>
<div data-td style="width:25%">TD</div>
<div data-td style="width:25%">TD</div>
<div data-td style="width:25%">TD</div>
</div>
<div data-tr>
...
</div>
</div>
</div>
<div data-td style="width:25%">TD</div>
</div>
Check this fiddle out i hope that would suffice what you need
html tables
CSS
div.table {border: 1px solid black; display: table; }
div.tr {border: 1px solid black; display: table-row; }
div.td {border: 1px solid black; display: table-cell; }
Html
<div class="table">
<div class="tr">
<div class="td">Row 1, Cell 1</div>
<div class="td">Row 1, Cell 2</div>
<div class="td">Row 1, Cell 3</div>
</div>
<div class="tr">
<div class="td">Row 2, Cell 1</div>
<div class="td">Row 2, Cell 2</div>
<div class="td">Row 2, Cell 3</div>
</div>
<style>
.cl {clear:both;}
.block {}
.left {float:left;}
</style>
<div class="block">
<div class="left">Title 1</div>
<div class="left">Value 1</div>
<div class="cl"></div>
</div>
<div class="block">
<div class="left">Title 2</div>
<div class="left">Value 2</div>
<div class="cl"></div>
</div>
Is it possible to avoid adding <div class="cl"></div> at the end of each .block?
There are two common solutions to this problem.
Add overflow: hidden to the parent of the floated elements (so in this case, .block).
Use "clearfix": http://nicolasgallagher.com/micro-clearfix-hack/
Some more information here: Is clearfix deprecated?
A good time to use clear: both is when you already have an element available to add it to.
For instance, the common case of floated columns with a footer: http://jsfiddle.net/thirtydot/vhBkM/
you could do this:
<style>
br {clear:both;}
</style>
<div class="block">
<div class="left">Title 2</div>
<div class="left">Value 2</div>
</div>
<br/>
a second option re: #animuson comment
<style>
.container br {clear:both;}
</style>
<div class="container">
<div class="block">
<div class="left">Title 2</div>
<div class="left">Value 2</div>
</div>
<br/>
</div>
You shouldn't need the <div class="cl"></div> divs at all. Just put the clear: both on the block div.
Example: http://jsfiddle.net/mKazr/
CSS
.block {
clear: both;
overflow: hidden; /* If you want to make the div size to the contents and not collapse use this line (from thirtydot answer) */
}
.left { float:left; }
HTML
<div class="block">
<div class="left">Title 1</div>
<div class="left">Value 1</div>
</div>
<div class="block">
<div class="left">Title 2</div>
<div class="left">Value 2</div>
</div>
Edit: added code
Try using overflow:hidden on the .block I know that that sometimes will fix it.