(1)The text in red border will be varied because they are dynamic.
(2)leftAd and rightAd in adLine are vertically middle aligned.
(3)leftTitle and rightTitle in titleLine are also vertically middle aligned.
Now I am telling what I want.
I like to put the titleLine just below the adLine.
In other words, I like to remove the white space gap between the adLine and the titleLine.
You have set the element to be display:table and 100% high which means that all the rows will need to expand to fill the 100% height.
You could do as you have done for the first row where you have given it a 1px height which ensures the height remains at the minimum and you would need to do that for the adline row so that the titleline can start immediately under it…
Yes, that’s what I want.
And I want guideLine is just below the topLine and adLine is just below the topLine
and titleLine is just below the adLine and contentsLine is to be vertically centered between titleLine and the bottomLine.
Then you will need to do what I said and set them to 1px height so that they don’t stretch to 100% because that is the default behavior. Rows will try and stretch to take up the whole 100% and space will be equally distributed between them unless you force the height to be a small size and then the rest of the rows just stretch.
Unless of course I misunderstand what you are trying to do.
That layout is a little unrealistic without real content and I would never design with just boxes like that unless that is your page of course. I’m just assuming they are place-holders for content.
I added hite1(height:1px) as I change it from “<div class=“dpTr”>” to “<div class=“hite1 dpTr”>”.
The result is at http://dot.kr/x-test/autoLayOut03.php.
The titleLine of autoLayOut03 is going up a little more than the titleLine of autoLayOut01.
But the titleLine is not just below the adLine.
(In order to see it, You need to test it with IPad or smatPhone.)
Is there any way to put the titleLine place just below the adLine?
It looks directly under it to me but a bit off horizontally because you have put it in another table structure so you will lose column alignment. You can’t nest a table structure and have it align with the other rows as there is no connection. It just becomes another table with its own content. It should have just been another table-row and not a nested table structure.
However, if you gave all the cells the same width then they should line up horizontally.
e.g.
.dpTable-cell{width:33%}
That does depends on the exact dynamics of what else you are going to put in those boxes.
The hite5 div also effectively creates more table rows into the mix so it becomes more and more awkward to control things exactly. I haven’t yet worked out what the effect you want as now you have some cells that stretch and some that don’t which seems a little odd to me :).
(In order to see it, You need to test it with IPad or smatPhone.)
That should have been mentioned in the first post!
I don’t have an ipad to hand so can’t test at the moment. I’ll have a look later when my wife brings hers back.
I think there might be some misunderstanding.
if you look at http://dot.kr/x-test/autoLayOut03.php, you can, please, see 5px height between “leftTop” and “leftGuide” vertically.
And there is another 5px height between “guide2” and “ad<br>ad” vertically.
So far so good.
However
There are more than 5px height between “ad<br>ad” and “title<br>title” vertically.
I like to remove the vertical space which is more than 5px between “ad<br>ad” and “title<br>title”.
I like to put the “title<br>title” to just(means 5px height;does NOT mean directly) below the “ad<br>ad”.
Thinking 5px height is very small height, I can say it is just because it is not very long height.
Yes, I should. I am sorry about that.
iPad/smartPhone has the same look with deskTop but it shows the vertical empty space which is more than 5 px clearly because they(iPad/smartPhone) has vertically long screen.
You appear to be the victim of several basic table coding error, empty/misplaced table-rows primarily.
Try this slightly modified version of your page and see how it works on the smartPhones:
(Note that table-cells have magenta outlines and the .hite5 items are light green.)
Hopefully, there aren’t any more empty/misplaced table-rows.
Ron has given the correct answer above as you need to make sure your html is correct so I would go with his revision.
However, there is a quick fix in your original and that is just to remove the hite5 div from above the row you want to remain static and just use padding top instead.
I would still go with Rons revision above but I believe that could be simplified quite a lot by removing the nested table structure and .hite divs and just use some padding in the cells as required.
I would do it like this is about half of the code.
Of course there may be reasons that you have used nested table structures in your examples if you want different column widths but your design doesn’t seem to show that is true.
The only real difference I notice is that in my example the “title title” in the middle of the 4th row is perfectly centred but yours is offset. I don’t know of that was deliberate on your behalf or not.
http://dot.kr/x-test/autoHeight03.php has exact copy of your live version.
It looks cool.
I am sorry to say that since red_bordered box has dynamic text, it can be varied.
If “leftContents” has long text like at http://dot.kr/x-test/autoHeight04.php, “ad<br>ad” in adLine and “title<br>title” in titleLine are moved to right like the contentsLine.
I like each line(row) is independent from other lines.
“leftTop”, “leftContents”, and “rightContents” can cause those kinds of problems because they could has dynamic text.
Although “ad<br>ad” and “title<br>title” are also dynamic text, it is, I think, NOT problem because they are in the center of the their line.
It’s still not clear what you are aiming for exactly.
If you want the columns to remain at 33% width no mater the width of the content then you just need to add table-layout:fixed to the wrap in my example.
If on the other hand you want different cell widths on each row then you should create it as a series of separate table structures and not nested tables as such.
For the reason,
(1) my language of yours is not fluent.(English is not my language)
(2) my language of CSS is not fluent like you.
(3) my ability for setting idea of layOut might be not fluent as you think although I have my own reason for that.
Anyway, I like to say what I want. http://dot.kr/x-test/autoHeight06.php is basically Ron’s code above although I modified a little.
If “left contents” become “very long left contents”, since it is dynamic text, the result is at http://dot.kr/x-test/autoHeight07.php.
Although center contents is moved toward right, “title<br>title” and “ad<br>ad” are not moved toward right.
This is what I want, but if there is more refined way for that I like to get it because my greedy(?) wants more short and stable code for the layOut if there is.
This still comes down to the issue of what the real content is in these elements as you seem to have manufactured text so that your layout appears to work but as soon as any item changes your layout is all over the place as seen by the attached screenshot of your last example with some extra text added through firebug.
As you can see from the screenshot there is no clear logic into the behaviour of those elements once the size of the text boxes is changed. Nothing is centred and nothing aligns. If that’s what you intended then that’s fine but from a web page point of view it doesn’t seem to make much sense. Either the center items should remain centred and all aligned vertically or if you want independent rows then you would expect them to be centred between your side items but this is not the case. You made a big fuss about a couple of pixels in the vertical layout but these items seem miles out horizontally to me! (perhaps its just me :))
Notwithstanding the above you can still cut down on the code as you would simply need separate tables and not nested tables as I mentioned before. I’m loathe to make another demo because I must be missing something important along the way as I can’t yet see a logic pattern to the layout (there must always be logic even if its your own design logic).
I’m just assuming they are place-holders for content.