0

I'm trying to build this layout:

enter image description here

I have this at this time: http://jsfiddle.net/Gh6mB/12/

The problem is that the div #detalhes doesn't take all available space on horizontal. This div must be divided in a left part (for image) and the right side, to display the other informations. I already changed the stype of the div to table-cell, table-row and table but It didn't work. You can see this in the full screen result: http://jsfiddle.net/Gh6mB/12/embedded/result/

Ronaldo
  • 357
  • 2
  • 8
  • 21

2 Answers2

1

Got it working http://jsfiddle.net/Gh6mB/21/

Added this to your div #detalhes 

display:block; float:left; width:100%;

and removed this

position:relative;
Ashwin Singh
  • 7,197
  • 4
  • 36
  • 55
  • Do you know why the hover effect doesn't work for this cell after changing it to block? – Ronaldo Jun 27 '12 at 13:44
  • There is a little problem. When I put a nbsp inside my span .arrow the div #detalhe collaps. http://jsfiddle.net/Gh6mB/24/ – Ronaldo Jun 27 '12 at 13:47
  • So you see no hover effect. If you want hover effect, you will have to code for the div separately. Not an issue though, just a single line of code. Its basically because it now behaves as an block element. – Ashwin Singh Jun 27 '12 at 14:01
  • Hi, how can I put the hover effect in this div? My hover is for the anchor. Will I have to put hover on the div? – Ronaldo Jun 27 '12 at 18:45
0

When you use divs and floating you also have to take into account resizing the page moves things around, another option....

simple solution, use tables.

<table width="100%"><tr><td width="90%" colspan="2"></td><td width="10%"></tr><tr><td width="10%"></td><td width="80%"></td><td width="10%"></tr></table>

The colspan will take up the 2 rows for the first column, use css for images, etc

Austin Best
  • 1,028
  • 4
  • 14
  • 30
  • 1
    I would recommend not using tables. – Ashwin Singh Jun 27 '12 at 13:35
  • Maybe if you are going to do that, you should elaborate. Considering tables and divs are both valid HTML, they are both W3C compliant, neither is deprecated, unless it is a personal opinion, how about stating WHY so the users have a better understanding. – Austin Best Jun 27 '12 at 13:40
  • I tryed to use tables, but I changed to divs because I need an anchor element for each row. The table doesn't accept an anchor inside a td or tr. – Ronaldo Jun 27 '12 at 13:40
  • 1
    @AustinBest here have a look http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html – Ashwin Singh Jun 27 '12 at 13:43
  • @ Ashwin, I'm sorry but peoples opinions do not add up for me. I have been a web dev for 11 years, and have no problems with using tables and accomplish anything needed using them. So i have no problem if people do not like them, personal preferences, i was merely stating you should explain your answer, not just say "dont use this" is all :) – Austin Best Jun 27 '12 at 13:48
  • 1
    @AustinBest But the link does explain a lot of reasons to not use tables. Have you even read them? – Ashwin Singh Jun 27 '12 at 13:50
  • The big problem for my case is that I have each row inside a anchor. I want to permit user to go to the detail page when click on any part of row. – Ronaldo Jun 27 '12 at 13:51
  • @Ronaldo, you can put an onclick handler on the TD so i am not sure what you are meaning will not work. If i saw your non working code i could help you further regardless of tables or divs. – Austin Best Jun 27 '12 at 14:11
  • I have an example here. http://jsfiddle.net/KMjm6/ The anchor is not working. Someone told me (http://stackoverflow.com/questions/11213638/split-a-cell-table-in-several-rows-without-disformat-table) that anchor is no valid child for tr. – Ronaldo Jun 27 '12 at 16:27
  • 1
    I am not sure if my changes stick or not? If not, here is an example of how to make the row "click-able".... Take out the a all together and use an onclick handler... – Austin Best Jun 27 '12 at 17:51
  • 1
    Essentially if you only want one of the TD tags clickable instead of the whole row, you can put the onclick on the td instead of tr :) – Austin Best Jun 27 '12 at 17:54
  • To add my 2ct to the table discussion. Tables are perfectly fine for tabular data. The content of the op could be viewed from 2 angles. Tabular data of dates and events or nested lists of times with associated events. I'd take the second interpretation. To use more semantic markup, this could ideally be displayed using nested `dl` elements. /rant – Torsten Walter Jun 28 '12 at 12:14