I'd like to create two column layout for my list using CSS.
Let's say I have 5 items, the presentation would be:
<item 1> <item 4>
<item 2> <item 5>
<item 3>
How can I do this with HTML and CSS? Keep in mind that the list length is variable.
I'll be generating the HTML server side using C#, that will provide more flexibility.
I finally made up my mind and use two floated DIVs to achieve this layout.
The server side code will iterate the items and create a new DIV if it passes the halfway point (current index >= half of length).
The resulting HTML would look like the following:
<div class="container">
<div class="column">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
<div class="column">
<div>Item 4</div>
<div>Item 5</div>
</div>
<div style="clear: both"></div>
</div>
CSS:
.column { float: left; }
The server side will determine when to close and create a new DIV. Not pretty, but it works.
Related
I use react js
I usually face problem like this
<div style={display: 'flex'}>
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
</div>
Let's assume above element had styled finished.
Then start to make rwd style
The problem is here.
I usually found that I need added new element to wrap it because I need to make rwd style.
Like this
<div style={display: 'flex'}>
<div> // add this element
<div>Content 1</div>
<div>Content 2</div>
</div>
<div>Content 3</div>
</div>
Then, I need to change style that I had finished, because I added new element.
Do any better way to avoid that?
Actually, you can use a tag selector such as div to select all the divs in your document or component in react context. While it is not the best way to handle it will work.
Is there a way to make the collapsible row colspanned to the number of columns? Or at least have the full width as of the div table? I stumbled upon this but it doesn't seem to help.
You may check out the full code here in this jsfiddle.
<div class="div-table">
<div class="div-heading">
<div>Head 1</div>
<div>Head 2</div>
<div>Head 3</div>
<div>Head 4</div>
<div>Head 5</div>
<div>Head 6</div>
</div>
<div class="div-row">
<div class="cell">col 1</div>
<div class="cell">col 2</div>
<div class="cell">col 3</div>
<div class="cell">col 4</div>
<div class="cell">col 5
</div>
<div class="cell">col 6</div>
</div>
<div class="div-row div-row-collapsible">
<div class="collapse text-center" id="row1">must be full width</div>
</div>
Wrap the whole thing in another div.
<div>
</div>
See here:
http://jsfiddle.net/5x8wu0sc/
I only updated the html.
The whole width available to your div containing the text "must be full width" end where the second column cell of your table should start. This seems to be aa a consequence of the display='table' used in the main div. You can't use a colspan to enlarge over the first column as explained here : Colspan/Rowspan for elements whose display is set to table-cell
I think you have to consider using bootstrap grid system. It should give you an easy way to have table stuff well done.
My current code looks something like this:
if list.isEmpty() {
output("<div>No items</div>")
} else {
for each item in list
optput("<div>" + item + "</div>")
}
However, the whole "No items" logic belongs to the view and should be separated from the logic. Ideally, I'd like to have just
for each item in list
optput("<div>" + item + "</div>")
And then have the HTML template look something like this:
<div id="container">
<div style="visible only if no siblings">No items</div>
<div>Item 1</div>
<div>Item 2</div>
<div>
The problem is that I can't figure out how to do the "visible only if no siblings" part. Is there a way to achieve this reliably (works across all standard browsers) using CSS?
Give the div you want to be visible only with no siblings a particular class:
<div id="container">
<div class="vis-only-no-siblings">No items</div>
<div>Item 1</div>
<div>Item 2</div>
<div>
As long as the divs have no other siblings, you'll be able to use the :only-child pseudoselector, like so:
#container div.vis-only-no-siblings{
display: none;
}
#container div.vis-only-no-siblings:only-child {
display: block;
}
I am trying to arrange 8 tables in two rows.I have two divs alligned horizontally I am trying to align
4 tables in rows 1
4 tables in row 2
When I try to put this below code inside another [left] DIV container. All the tables go in one line. Below is the code that I am using.
<div class="datagrid"><table>
<thead><tr><th>header</th><th>header</th></tr></thead>
<tbody><tr><td>data</td><td>data</td></tr>
<tr class="alt"><td>data</td><td>data</td></tr>
<tr><td>data</td><td>data</td></tr>
<tr class="alt"><td>data</td><td>data</td></tr>
<tr><td>data</td><td>data</td></tr>
</tbody>
</table></div>
Kindly guide me on this issue. If required I can upload complete code that I am using.
You could achieve that by adding a parent container to the first 4 tables and another one to the next 4, like so:
<div class="group">
<div class="datagrid">table 1</div>
<div class="datagrid">table 2</div>
<div class="datagrid">table 3</div>
<div class="datagrid">table 4</div>
</div>
<div class="group">
<div class="datagrid">table 1</div>
<div class="datagrid">table 2</div>
<div class="datagrid">table 3</div>
<div class="datagrid">table 4</div>
</div>
Then, add these style rules:
.datagrid {
float: left;
}
.group {
clear: both;
}
Use the float and clear.
Find the Complete code in jsfiddle
Js Fiddle
css style
.datagrid{
float:left;
}
.firstRow{
}
.secoudRow{
clear:both;
}
I'm making a 2-column layout with divs.
It should be something like this: http://dl.dropbox.com/u/4976861/html-demo.html
But there is a problem. If content stretches the side blocks vertically, the left blocks shift downwards: http://dl.dropbox.com/u/4976861/html-demo-2.html
If I put the sidebar into a wrapper div, it works fine, but it will make the code quiet messy because of the paddings and some background issues which I removed to simplify the demo, so I would like to leave this option for now.
I don't think that you're going to be able to produce the results that you would like without changing the underlying HTML. You're trying to allow elements to flow (both vertically and horizontally) within the page, but the order in which you have the elements is not going to allow this.
I might be teaching you to suck eggs, but my preference for the HTML output would be something like this:
<div class="wrap">
<div class="column1">
<div>left 1</div>
<div>left 2</div>
<div>left 3</div>
</div>
<div class="column2">
<div>right 1</div>
<div>right 2</div>
</div>
</div>
Put this under the 2 divs:
<div style="clear:both;"></div>