I am quite new to using HTML and CSS and need some help aligning 3 separate tables so the vertical columns align as you go down through the page.
Due to the different amount of content in each of the tables they don't at the moment. I have tried finding advice on other posts but have not had much luck. I have the width of the tables set all the same but the columns I need them to differ in size the first two being around the same and the last one being the longest having the most content inside it.
What's the proper way I can achieve this?
Align the Columns vertically.
It would be best if you fixed the width of each column, then everything should line up nicely. Just pick a width value that matches the max likely width you are going to need.
The CSS syntax is simple. If you declare the cell in the html with something like:
<th class="col1">
in the first column header, then you can define the width of the column in the CSS with:
.col1 {width:130px}
You can try adding the following to your CSS:
td { vertical-align: top; }
You can also change 'top' to 'middle' or 'bottom' depending on where you want the content aligned.
Hope this helps!
You can achieve that by doing the following:
table .centered {
margin-left : auto;
margin-right: auto;
}
This will work if your tables have the same width.
Related
how to make 3 column layout where:
left column is fixed width
middle column is auto width (not fixed)
right column is fixed width
and all columns height are equal (but exact height is unknown)
Example:
I know i can do it by using tables, or display:table-cell, but is it possible to do it wihout using tables? I would go for table-cell but it doesn't work with older ios/android mobile devices and older browsers.
Is there some css hack available to do it without table-cell ?
Edit: In this particual case I just want to set full height color background (left: color #A, middle: color #B, right: color #C)
Edit2: I feel like 1999 table layout poltergeist/ghost is laughing in front of my face
Edit3: no js please
Have you tried using a separate <div> to draw desired backgrounds? Here, I've created an example http://plnkr.co/edit/WOaF3SZ9N8sswsxbZ116?p=preview
Take a look at my fiddle:
http://jsfiddle.net/RB9JZ/1/
I've had to use javascript to make the columns the same height:
$(".col").setMinHeight(3);
In the setMinHeight(3), 3 = number of columns, and give each column a class of col or whatever class you'd like.
This is an interesting question. Since Rich already figured out the columns, I'm going to address the issue of getting all the columns "the same height". Like you said, this is very difficult to do without table behavior. What I've always done is use background images on a div that wraps all columns. This div stretches to the height of the tallest column automatically, and if you have a repeating background, it will give the illusion of matched columns. Since you have a special case of 3 columns with a fluid width in the middle, you will probably need two divs to wrap the 3 columns, and have two background images. One aligns left, and one aligns right. Let me know if that doesn't make sense.
maybe this variant:
display:block;
height:100px;
In tables, if you have a row, that row is the same height and all cells in the row grow and shrink with dynamic content. (If one cell has a ton of text and the other cells not much they are all the same height, letting you make columns and rows).
With the popularity of div float layouts using tables is often frowned upon. However how do I duplicate this and other functionality and benefits of a table while still keeping the display set to block for the benefits of a block, cross browser?
I've seen many hacks but they always seem to be too complicated, interfere with each other, or take tweaking. I am looking for a standard reliable method for the following:
Make div boxes the same height across a row with a wrapping container
<style>
.cell { float:left; }
</style>
<div class="row">
<div class="cell">Content 1 with more width</div>
<div class="cell">Content 2<br>with<br>more<br>height<br>Content 2<br>Content 2<br></div>
<div class="cell">Content 3</div>
</div>
In this case all div's of class "cell" will have the same height, and not be fixed height at all and be floated and will stay that way for dynamic content of any size.
Vertically center content
In this case using the example above, all content would be vertically aligned to the middle, for dynamic content of any size.
Make div's of class "cell" share a common width that is based on the wrapper "row"
In a table when you specify width as 100% or fixed width the cells will automatically try to all be the same width, unless an image or block like item prohibits this. How can this be achieved with floating divs? As if you say, float all "cell" to the left, you can specify a min width or a fixed width, but I know of no way to make them share a common width that is dynamic, like a table. In floated divs by themselves they shrink to the size of the content.
How to avoid content pushing against the container/wrapper "row" and treat it as if it were just a block
For whatever reason when a floating div is inside a wrapper you can get odd behavior where content will "stick" to the wrapper as if were floating too. Even sometimes when using a <br style="clear:both"> at the end I had this happen.
If you could answer all these questions about floating divs for me it is most appreciated. Please don't tell me to break this into separate questions as they are all related to the same thing. Please don't tell me this would be better asked somewhere else. If however you wish to be helpful great :)
If the solution is using display:table-cell alone, I've tried this, it makes the divs not behave as a block, shrinking it, the background shrinks to the content too, and in other ways it does not behave as a block. Also some versions of IE do not support this and I am looking for a cross browser solution. Thank you.
If you want your div elements to behave like table cells, you can style them that way:
.row {
display: table;
width: 100%;
}
.cell {
display: table-cell;
width: 33.33%;
vertical-align: middle;
text-align: center;
}
This does not rely on setting a height or min-height on the .cell elements, so the height will remain flexible.
--- jsFiddle DEMO ---
You may apply the CSS like this;
.row{
height: 200px;
}
.cell{
display:block;
float:left;
height:100%;
}
Here is a working Live Demo.
and Here is a workaround to distribute the columns also.
Hope this helps
Note: DO NOT add percentage attribute to child divs to fill parent div (for example 50% each for 2 child divs, 25% for 4 child divs etc) since these vary according to number of divs and cannot be calculated accurately sometimes
Well, I went the jQuery route...
http://jsfiddle.net/dtgEt/1/
I would like to point out that while yes, some people will just use a table, a table is for displaying tabular data, not layout. A div has no semantic meaning and therefor is a better choice, in my opinion (unless it is actually tabular data that your are publishing to the web).
My solution works in IE 7 and probably would in IE 6. If you want to align your content in the center of the container there are many good ways to do that others have suggested (beat me to it).
If you need the formatting of a table, but you have to support older browsers that don't have support for display:table, then use a table. It's pretty much that simple.
Sometimes a table is the appropriate option, and sometimes it's the only option that will work without adding some moderately-risky JS or jQuery to simulate the formatting of a table.
For instance, a table (or display:table, which amounts to the same thing) is the only natural way to have true vertical centering of dynamic content. It's also the only natural way to enforce equal-height columns for dynamic content. And in general, a table is appropriate anytime you need to display a data grid of some sort.
For some reason my <td>s are overlapping each other. It's not supposed to do that.
I want the center to be seperate from the left column which currently isn't.
Anyone got a clue what I did wrong? This is the website where you can see the code etc:
.MiddleCenterContent has a width of 100%, forcing it to overlap its neighbours. A better method would be to make defaultTable width 100% then just define the width of the other cells, and .MiddleCenterContent would fill out.
Despite this, it's better practice to use <div> tags for layout. There are plenty of tutorials on methods using these available on the internet.
The reason is the width of 100% of .MiddleCenterContent. Do not use tables in order to structure your layout. Tables are only for tabular data. Using divs or other semanticly appropriate containers will help you to prevent such issues.
in your css you have
.MiddleCenterContent {
width: 100%;
vertical-align: top;
}
just remove the following line
width: 100%;
which forces the center cell to be 100% large, overlapping other cells
I have a html table which I would like to control the sizes of the cell manually. I am getting confused about how its supposed to work.
First of all, there is a css attribute "table-layout" which is supposed to control whether or not the cell size is automatically set to the largest content in the column or to a fixed size. I tried setting the css width for the td elements using both table-layout=auto and =fixed, and both times the content shrinked from its original size. The problem is that it didn't shrink to the size I wanted to using either value for table-layout.
Here is my css code:
table {table-layout:fixed;}
tr, td {border-style:solid;
border-width:2px;}
.coursename{width:50px;}
.startdate {width:5px;}
.isbn{width:10px;}
.author {width:20px;}
.booktitle{width:10px;}
Second of all, what exactly are the rules for a automatic table layout? If the content of all the table cells together go past the size of the page, are there certain columns which will shrink first? Will they shrink at all?
One idea that might help is, if you have a link in each cell for example, set the link like this:
a { display: block; width: 30px; }
Do this for every cell in the table row and you will have table cells with fixed widths. Provided that you fixed the width of the table as well... :)
I am still unsure what your problem is, but you could try
{table-layout:inherit;}
This should get the size from the parent element.
Also, you could insert the css element into the html and have it override any other elements by preceding it with a !
{class="!width:300px;"}
Hope this helps.
I've been trying to come up with a way to create a 3 column web design where the center column has a constant width and is always centered. The columns to the left and right are variable. This is trivial in tables, but not correct semantically.
I haven't been able to get this working properly in all current browsers. Any tips on this?
Use this technique, and simply specify a fixed width for the centre column.
Check this out: http://www.glish.com/css/2.asp
And replace the width: xx% for #maincenter by a fixed value. Seems to work when I change it with Firebug, worth a shot?
#maincenter {
width: 200px;
float: left;
background: #fff;
padding-bottom: 10px;
}
I think you'd need to start off with initial (fixed) widths for both sidebar columns and then, when the page loads, use javascript to get the window width and calculate the new width of the sidebars.
sidebar width = (window width - center column width) / 2
You could then reapply the javascript if the window is resized.
This article at A List Apart has a solution resulting in a 3-column layout that will :
have a fluid center with fixed width sidebars,
allow the center column to appear first in the source,
allow any column to be the tallest,
require only a single extra div of markup, and
require very simple CSS, with minimal patches.