I am working on a web app. One of the views has been divided into different portions in order to display different information utilizing the whole view and make stuff more manageable. The problem is that the beginning of the information on placementContainerRight gets lined up with the last information from placementContainerLeft giving me a big free space on top of the placementContainerRight.
My html:
<div id="mainContainer">
<%--Start of left container --%>
<div id="placementContainerLeft">
<%--This section will handle the three for the specific Enterprise --%>
<div class="section">
<div class="sectionTitle">
All Agencies
</div>
<div class="horLine"></div>
<div class="placementFill">
<div class="placementItemTitle">
<div class="placementTableItems">
<table width="100%">
<tr class="placementTableHeading">
<th></th>
<th>Number of Accounts</th>
<th>Amount of Placement</th>
<th>Percentage of Placement</th>
<th>NeuPlacement Score</th>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="section">hmmm</div>
<%--End of left container --%>
</div>
<%--Start of right container --%>
<div id="placementContainerRight">
<%--This section handles the Bar FusionChart --%>
<div class="section">
<div class="sectionTitle">
This are the id's in my css:
#mainContainer
{
width:900px;
vertical-align: top;
margin-left:20px;
float:left;
}
#placementContainerLeft
{
width:578px;
margin-left:5px;
clear:left;
}
#placementContainerRight
{
width:267px;
margin-left:628px;
clear:right;
}
And this is the way it currently looks:
Does anybody know how to fix this problem?
This cheap and simple answer is to add "float: left" to your #placementContainerLeft #placementContainerRight.
There may be better ways to do this, but I think this is the simplest.
UPDATE: oh and remove that huge margin-left on your #placementContainerRight
Related
I have datatable table usng the rowgrouping plugin. I want to jump rows within groups to the right.
Simply said: .group-item class TRs should be moved lets say 10px to the right. How to do that?
I've tried display:block and than margin-left:10px, but that breaks column widths.
To put a jump on an html <tr> is impossible due to the nature of HTML tables. You'll have to change structure a bit.
Option 1, nest a new table
<style>
.subTable {
margin-left: 10px;
}
</style>
<table>
<tr>
<td>
<table class="subTable">
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
Option 2 is to use some other kind of structure and emulate a table look:
<style>
.jump-over {
position: relative;
left: 10px;
}
</style>
<div class="table">
<div class="row">
<div class="span1"></div>
<div class="span1"></div>
<div class="span1"></div>
<div class="span1"></div>
<div class="span1"></div>
</div>
<div class="row jump-over">
<div class="span1"></div>
<div class="span1"></div>
<div class="span1"></div>
<div class="span1"></div>
<div class="span1"></div>
</div>
<div class="row">
<div class="span1"></div>
<div class="span1"></div>
<div class="span1"></div>
<div class="span1"></div>
<div class="span1"></div>
</div>
</div>
The other CSS for this should be simple and governed by your individual design. You could use a grid framework to do the row and columns for you, but I wouldn't try to make it responsive as this would break the table emulation.
Both of the previous options will not preserve the original table's column widths; the sub-table will have it's own column widths based on its content and the div's will have to have explicitly set widths to start with.
There is one other very ugly option that I do not recommend: it can be done by inserting an extra <td> as the first child of the row in question, but then all previous first children of the parent table will have to have col-span set to 2 (+1 for each nested table beneath it). You can see why that would be a bad idea.
Disclaimer: this is untested code and is meant merely to illustrate a technique.
having some fun trying to layout these nested divs and trying to figure out clears. I'm trying to get my ad to the right of my content on www.ffldraftoptimizer.com but its showing up beneath my content. Did so much testing and searching for a solution, really can't say what I have tried and what I haven't. I've condensed the code and put in some comments as to how its basically laid out currently. Hoping someone might be able to check out the site and help out.
//container:
//div.MaxWidth
//{
//width:50%;
//height:auto;
//max-width:50%;
//text-align:justify;
//text-justify:inter-word;
//}
<div class="MaxWidth">
//#left {float:left}
<div id="left">
<div >
<img src="images/optimizefront.jpg" class="floatLeft" />
//content that wraps around the image as desired
</div>
</div>
<div>
//ad
</div>
</div>
you have to remove the MaxWidth, and try this, this will separate it.
#left
{
width:50%;
float:left;
}
#right
{
width:50%;
float:right;
}
<div>
<div id="left">
<img src="......."/>
</div>
<div id="right">
</div>
</div>
Consider the following table structure:
<table style="width:150px;">
<tr>
<td>some dynamicly generated content that can wrap several lines</td>
<td valign="bottom"><img ... /></td>
</tr>
</table>
How do I get this effect using CSS (i.e. that when the content in the first TD takes more lines,
the tables grows vertically and the image "drops" to the bottom)
Try display:inline-block You'll need a small hack for older browsers (Easily google-able), but it should accomplish what you need:
http://jsfiddle.net/4vYHa/
.content{
width:150px;
display:inline-block;
}
.bottom-image{
display:inline-block;
}
<div class="wrapper">
<div class="content">
<p>Lorem ipsum</p>
</div>
<div class="bottom-image">
<img src="http://placehold.it/250x150">
</div>
</div>
Edit: If you then need the image to stick to the top you would just add vertical-align:top;:
.bottom-image{
display:inline-block;
vertical-align:top;
}
<div id="maintable">
<div class="data1">some dynamicly generated content that can wrap several lines</div>
<div class="data1"><img ... /></div>
</div>
then apply CSS to your data1 to float left and clear left, that will keep them above each other. You can go on to add width restrictions too.
Use floated divs. Give the text div no fixed width, it will then stretch as needed and the image div will eventually "drop" below the text.
try something like this
<div style="width:150px;">
<div class="dynamic">some dynamicly generated content that can wrap several lines</div>
<div style="width:20px;"><img ... /></div>
</div>
EDIT
<div style="width:150px;">
<div style="width:100px; float:left;">some dynamicly generated content that can wrap several lines</div>
<div style="width:50px; float:right;"><img src="test.png" /></div>
</div>
Check Jsfiddle Output: http://jsfiddle.net/srinivasan/AhJzH/1/
What I am trying to accomplish is having a fixed-width first div and a fluid second div which will fill up the rest width of the parent div's width.
<div class='clearfix'>
<div style='float:left; width:100px;'>some content</div>
<div style='float:left'>some more content</div>
</div>
and on this one everything seems alright and fluid.
<div style='display:table'>
<div style='display:table-cell; width:100px;'>some content</div>
<div style='display:table-cell'>some more content</div>
</div>
I want to go ahead with the second one but i feel like the second example will give me headaches in the future.
Could you offer some suggestions or insights?
display: table-cell is perfectly fine to use, with just one downside..
It doesn't work in IE7 (or IE6, but who cares?): http://caniuse.com/#search=css-table
If you don't need to support IE7, then feel free to use it.
IE7 still has some usage, but you should check your Analytics, and then make a decision.
To answer your specific use case, you can do it without display: table-cell, provided that you don't need the height to adjust based on content:
http://jsfiddle.net/g6yB4/
<div class='clearfix'>
<div style='float:left; width:100px; background:red'>some content</div>
<div style='overflow:hidden; background:#ccc'>some more content</div>
</div>
(why overflow: hidden? With: http://jsfiddle.net/g6yB4/3/ vs without: http://jsfiddle.net/g6yB4/4/)
You could do something like this. It puts your main content first. You can use a vertically repeating css background image on your main "content" container to create the illusion of a background running all the way down the left column.
<div id="content" style="clear:both;">
<div id="mainwrap" style="float:left; width:100%;">
<div id="main" style="margin-left:100px">
Main content here
</div>
</div>
<div id="leftnav" style="float:left; width:100px; margin-left:-100%;">
Left content here
</div>
</div>
To extend to a 3-column with fluid center:
<div id="content" style="clear:both;">
<div id="mainwrap" style="float:left; width:100%;">
<div id="main" style="margin-left:100px; margin-right:100px;">
Main content here
</div>
</div>
<div id="leftnav" style="float:left; width:100px; margin-left:-100%;">
Left content here
</div>
<div id="rightnav" style="float:left; width:100px; margin-left:-100px;">
Right content here
</div>
</div>
To get the first example working, you should also float the containing div, this will make sure that both of the elements within sit as you would expect within it. Not really sure what you mean by 'is a pain', though?
One down side of using table-row (very related to the OP) is that you can't use margin/padding on a row.
How do I achieve colspan/rowspan behavior in tableless (e.g. div.table {display: table;} div.tr {display: table-row;} etc.) table?
I would imagine that this would be covered by CSS Tables, a specification which, while mentioned on the CSS homepage, appears to currently be at a state of "not yet published in any form"
In practical terms, you can't achieve this at present.
you can simply use two table divs, for instance:
<div style="display:table; width:450px; margin:0 auto; margin-top:30px; ">
<div style="display:table-row">
<div style="width:50%">element1</div>
<div style="width:50%">element2</div>
</div>
</div>
<div style="display:table; width:450px; margin:0 auto;">
<div style="display:table-row">
<div style="width:100%">element1</div>
</div>
</div>
works great!
So basically, you've turned all your <table>, <tr> and <td> elements into <div> elements, and styled them to work exactly like the original table elements they've replaced?
What's the point in that?
It sounds like someone's told you that you shouldn't be using tables in modern web design, which is sort of right, but not in this way -- what you've done doesn't actually change anything about your code. It certainly hasn't got rid of the table; it's just made it harder to read.
The true meaning of the point about not using tables in modern sites is to achieve the page layout you want without using the kind of layout techniques that involve setting out a grid of table cells.
This is achieved by using position styles and float styles, and a number of others, but certainly not display:table-cell; etc. All of this can be achieved without ever needing colspans or rowspans.
On the other hand, if you are trying to place an actual block of tabular data on the page - for instance a list of items and prices in a shopping basket, or a set of statistics, etc, then a table is still the correct solution. Tables were not removed from HTML, because they are still relevant and still useful. The point is that it is fine to use them, but only in places where you are actually display a table of data.
The short answer to your question is I don't think you can -- colspan and rowspan are specific to tables. If you want to carry on using them, you will need to use tables.
If your page layout is such that it relies on tables, there really isn't any point doing a half-way house effort to get rid of the table elements without reworking how the layout is done. It doesn't achieve anything.
Hope that helps.
Trying to think in tableless design does not mean that you can not use tables :)
It is only that you can think of it that tabular data can be presented in a table, and that other elements (mostly div's) are used to create the layout of the page.
So I should say that you have to read some information on styling with div-elements, or use this page as a good example page!
Good luck ;)
You could always use CSS to simply adjust the width and the height of those elements that you want to do a colspan and rowspan and then simply omit displaying the overlapped DIVs. For example:
<div class = 'td colspan3 rowspan5'> Some data </div>
<style>
.td
{
display: table-cell;
}
.colspan3
{
width: 300px; /*3 times the standard cell width of 100px - colspan3 */
}
.rowspan5
{
height: 500px; /* 5 times the standard height of a cell - rowspan5 */
}
</style>
In order to get "colspan" functionality out of div based tabular layout, you need to abandon the use of the display:table | display:row styles. Especially in cases where each data item spans more than one row and you need different sized "cells" in each row.
<div style="clear:both;"></div> - may do the trick in some cases; not a "colspan" but may help achieve what you are looking for...
<div id="table">
<div class="table_row">
<div class="table_cell1"></div>
<div class="table_cell2"></div>
<div class="table_cell3"></div>
</div>
<div class="table_row">
<div class="table_cell1"></div>
<div class="table_cell2"></div>
<div class="table_cell3"></div>
</div>
<!-- clear:both will clear any float direction to default, and
prevent the previously defined floats from affecting other elements -->
<div style="clear:both;"></div>
<div class="table_row">
<!-- the float is cleared, you could have 4 divs (columns) or
just one with 100% width -->
<div class="table_cell123"></div>
</div>
</div>
I've achieved this by separating them in different , e.g.:
<div class="table">
<div class="row">
<div class="col">TD</div>
<div class="col">TD</div>
<div class="col">TD</div>
<div class="col">TD</div>
<div class="col">TD</div>
</div>
</div>
<div class="table">
<div class="row">
<div class="col">TD</div>
</div>
</div>
or you can define different classes for each tables
<div class="table2">
<div class="row2">
<div class="col2">TD</div>
</div>
</div>
From the user point of view they behave identically.
Granted it doesn't solve all colspan/rowspan problems but it does answer my need of the time.
you just use the :nth-child(num) in css for add the colspan like
<style>
div.table
{
display:table;
width:100%;
}
div.table-row
{
display:table-row;
}
div.table-td
{
display:table-cell;
}
div.table-row:nth-child(1)
{
display:block;
}
</style>
<div class="table>
<div class="table-row">test</div>
<div class="table-row">
<div class="table-td">data1</div>
<div class="table-td">data2</div>
</div>
</div>
You can use Normal TR, TD and use colspan in td, It works as a hack.
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>