http://img580.imageshack.us/img580/1811/sinttulooh.png
I have the problem you see in the picture. That's a div with three columns. This div has a display:table property, and every column has a display:table-cell property. The problem is that, as you see, the left and right columns begin their content when the middle one has finished its content, and they should start writing from the top, as the middle column.
I don't know why it behaves like that, because there is no conflict with any other rule in the rest of the CSS. And I've seen in other examples that it is not necessary to define table-column or table-row to get that style.
How should I declare the divs to get the desired structure?
Here is the code: http://jsfiddle.net/3fMM3/2/
You don't need tables there and also you don't need to make put display:table.
Just use css styling to make a three column layout, this is what appears you want to achive.
Check this link for example :
http://matthewjamestaylor.com/blog/perfect-3-column.htm
Here's a working example :
http://jsfiddle.net/NyqGQ/1/
Note the "border-collapse" property, to merge container's and children border.
Try to set the vertical-align property to top on your table-cells.
.your-table-cells
{
vertical-align:top;
}
Related
I am trying to do 3 columns responsive layout. It should work for IE8 also. So I am using float: left for elements in row, but I faced with some troubles:
The last images in row has unexpected height. I understand that it occurs because .news_preview { width: 100%; }, but I do not understand how to fix it.
.news__item elements should have the same height = 100%. I know how to fix it using JavaScript, but is it possible to fix it using css only for my .news__item elements with float: left;?
The example: https://jsfiddle.net/3nxetb45/1/
Well, there are few points which you should be aware. I have removed height:100% from .main and used clear:both after div.
About using clear:both, use them just after floated element so by this there will be no extra height or space issue.
About second issue, i have used display:table to main element and display:table-cell to child and removed float:left to get the desired output. Also we have replaced bottom-border to get result. For more detail check fiddle..
Check here
Edit: I cannot modify the HTML page at all or else I will automatically get a 0.
My professor just gave us this assignment where we add CSS to an HTML page. We have to follow screenshots, using the right margin, padding, borders, widths, and heights.
For multiple columns, he wants us to use float, which is all fine and dandy, but 3 columns need to be floated to the left and then centered in the page.
So while the screenshot looks like this:
My actual project looks like this:
How am I supposed to float these columns, and keep them centered?
I have set text-align for section#featured, but that only centered the text, not the elements. I can't use the display property, or I'll get points taken off. In the other screenshots he does not specify any margin or padding for the columns, so they are what they are.
They are div elements floated to the left, by the way, so their default display is block. Setting an auto margin does nothing.
Any ideas? Should I just stick it to him and use display instead of float? Because that actually works.
Look at the diagram.
Create a container to represent the dark blue/purple outline. Give it a size. Centre it.
Arrange the three side-by-side elements inside that container.
You can place your elements in a div and center it using css like
#my_div {
display: table;
margin: 0 auto;
}
I'm trying to write a CSS class that allows me to sit form elements (mixed button and text inputs) in a line so that they abut. I'm using display:table on a parent, and wrapping each element in a container with display:table-cell, and it works fine except for one bug that I can't figure out a way around.
So for example, parent is control-group, the element wrappers are control-group-item, and the elements themselves are control-group-input.
.control-group
.control-group-item
.control-group-input{type: "text"}
.control-group-item
.control-group-input{type: "submit"}
CSS of this (I've normalized font size/line height/padding/browser weirdness and all form elements are inline-blocked etc.):
.control-group {
display: table;
.control-group-item {
display:table-cell;
}
gives this, which is OK:
However, I ideally need it to fill a grid column of undetermined size, rather than the browser deciding how big my elements should be. If apply width:100% on .control-group, this happens:
The orange is a background colour applied to the table cell control-group-item. The issue seems to be with the 'submit' input: the submit stays the size it should be but browsers universally add extra space next to it within the table cell. So if I apply width:100% to each .control-group-input, I get this:
Which is OK, but stretches the ‘submit’ button. I can live with that, but is there any way to get it like the second image (but without the random space) using my current approach, or should I sack that off & try something different?
Edit I do not know the sizes of the inputs in advance: I can't set a width on them, which effectively rules out most inline block/float methods. I ideally need IE 8/9 support, which is why display:table was tried.
Edit 2: here are versions on Codepen: http://codepen.io/DanielCouper/pen/knDmC
After rewriting the code there, I realise my question is: how is the width of the table cells being calculated? It's specifically the cell with the submit button that has the extra space. The extra space seems random.
Here's a working version in codepen: http://codepen.io/mkleene/pen/ldqDH
The summary is that you need to remove the width: 100% on the submit button and then give the second table cell element width: 100%. You also need to make the textbox take up its entire parent with a 100% width.
You also need to make sure that the table element is using an auto table layout.
nm, spoke too soon. Thought I had solved it, hadn't, was getting effects from some other CSS.
I've seen examples here and there of a trick to use
position:absolute
on the first column of a table, and then make the rest of the table scrollable horizontally.
This works, as seen here: http://jsfiddle.net/YMvk9/4289/
However, as soon as I added the vertical scrollbar you can see that it does not scroll the frozen pane, instead, the frozen pane now sticks down from the rest of the table in a ugly sort of way.
I need the frozen column on the left to scroll vertically. Can anyone fix the jsfiddle code?
Assuming that what you want is for the user to be able to scroll the table vertically or horizontally there are several ways to achieve this. The most straightforward would be to put your headcol cells in a table all there own then position the two tables so they are right up against each other and wrap them both in a div with overflow:scroll. I did come up with a patch-work fix for your current layout though.
Here is the FIDDLE
You had several problems:
Your overflow property was only applying to the second column of the table.
Your containing div was not containing anything because it had no positioning rules so I gave it some absolute positioning and assigned the overflow:scroll: property to that.
Once you position the container absolutely it screws up the long class so I assigned that to float:right; and gave it a margin-left to account for the headcol cells.
Finally, since you are floating an element, you have to use a "clear fix" to make sure it doesn't wrap so I added a new class and a new cell to each row to fix the layout.
Hope that helps!
UPDATE: After posting I noticed one issue in that adding margin-left to your long class screwed up the way the table looked to I removed that rule and added padding-left to the div to fix the issue. There may still be a couple minor margin & padding tweaks you need to do to make the table look just right; but it works! I updated the fiddle too.
See my fiddle here.
I am trying to position the header inside the div like so:
Not having much luck. What's going on? How do position within the table row header?
That div.headerContainer is not valid markup so the browser will try to correct it. Rather style the th 's and add classes for first and last. Here is an example. Another option would be to use an appropriately sized background image and apply it to the parent div (.geniusPicks)
HTH! :)