CODEWITHSUNDEEP
htmlcss
Ronaldo
Ronaldo

Reputation: 367

split table-cell to add more columns and rows

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/

Upvotes: 0

Views: 348

Answers (2)

Austin Best
Austin Best

Reputation: 1058

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

Upvotes: 0

Ashwin Singh
Ashwin Singh

Reputation: 7355

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;

Upvotes: 1

Related Questions