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
Related
As the title suggests, I have two stacking <div>s.
They are placed in an absolutely positioned container that covers the whole page. Basically, those 2 <div>s, taken together, should also cover the whole space of the containier.
Another important aspect is that these <div>s have dynamic content. The bottom one can have a lot of content, so an overflow: auto rule is required. The top one can also have dynamic content, but it's not really expected to grow out of control. Thus, I don't want to cut the overflow.
The main question is: How can the top one affect the other one's height without the risk of overlapping? (I prefer a CSS only solution, or something that wouldn't imply JS pixel values computations)
Here are two images that describe the best what I'm trying to achieve:
"initial state"
a state with some more data in the top div
Here is also a JSfiddle for convenience: http://jsfiddle.net/60qan4t6/
This is the kind of situation that display:flex handles extremely well. Update to your fiddle:
http://jsfiddle.net/60qan4t6/1/
Note, I quickly wrote this, so it's missing browser prefixes to support some browsers, but the fiddle should work in Chrome just fine.
Be sure to see check browser support for flexbox here:
http://caniuse.com/#feat=flexbox
If it's acceptable to set height to div's you can use such an example
.top-area {
background: red;
overflow: hidden;
height: 40%;
}
.bottom-area {
overflow: auto;
height: 60%;
}
http://jsfiddle.net/xqh2vw2g/
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.
I'm building a relatively complicated page with some nested tables that should scroll. Despite reading as much as I can on HTML tables, I don't seem to understand what's going.
See http://jsfiddle.net/JasonJSFiddle/etye72eg/
I want the top panel portion to always be 80% of the screen and the bottom to be 20% of the screen.
table.outer-table tr.outer-table-row1 {
height:80%;
}
table.outer-table tr.outer-table-row2 {
height:20%;
}
I was assuming by putting the 'overflow:auto' in the , this will make the nested tables scroll while maintaining the 80%/20% ratio of the outer table. However, it seems to just push the cells out so top and bottom is 50% each.
How can I get the top portion to be 80% of the screen, and the nested table on the right to scroll and the bottom portion to be 20% and the nested table at the bottom to scroll?
Thanks!
Its usually not recomended to do layout with tables. Unless if you're working with mail marketing or some weird browser that doesn't support divs.
I like to do layout with divs using the css attributes:
display: table;
display: table-row;
display: table-cell;
It gives the divs some tableish layout capabilities.
I have made an example for you with divs here;
You can put the tables that are really necessary inside the divs. But to use percentual sizes, you have to make sure that the outer (outermost) element have a fixed size. (can be your div#main, or some other external wrapper of your layout).
Hope it helps
http://jsfiddle.net/eDYDD/
Seen above is a jsfiddle that mostly explains what I'm trying to do. I can't seem to get the #main_info to fill the 100% height of #main, so the border will fill 100% of the div and you know, look nice. Any help would be appreciated.
In CSS unless a parent has a fixed height, you cannot make a child fill 100% of it's height, without some trickery.
You can use display table to make the elements behave like a table, ensuring that the child fills out the parent.
You can make it so the border-right in your case is visually managed by the parent element, using a background image.
You can use JavaScript to maintain the appearance of the two elements.
Which one of these applies to you really depends on your use case. Since your avatar info is simply a border-right at this point, creating a visual border on #main_info is probably the easiest way to go.
Using a table based layout would also solve this nicely, but would require extra markup to ensure that you have a table element, a row element and a cell element.
Use absolute positioning.
#main {
position: relative;
}
#main_info {
height: 100%;
position: absolute;
}
http://jsfiddle.net/eDYDD/3/
Take a look at Equal Height Columns with Cross-Browser CSS:
Creating equal height columns with CSS is not as easy as it may first seem. This tutorial highlights the display problems that occur with multiple column layouts, and then shows a simple solution that works in all common web browsers. The method shown here is 100% CSS hack-free, image-free and JavaScript-free so it can even be used on the most strictly coded websites.
I modified your jsfiddle. The other answers miss out the easiest solution, which is to inherit your min-height property of the parent element:
#main_info {
width: 20%;
min-height: inherit;
border-right: 1px solid #E4E4E4;
}
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.