I have a fluid grid layout website - currently in design - and the main page is an ‘Article’ (Dreamweaver CC) and I understand that tables are no longer used and it’s now completed with DIVs/CSS. As I understand it - and please correct me if I am wrong - I can insert a new div within ‘Article’ as a parent ‘wrapper’ and then place all DIVs within that. However, it’s only two columns but many rows and yet each DIV is normally assigned a fixed size, but as the site is fluid now can I achieve this?
The first column is all text, whereas the second will just have several icon links to books depending on their format; ePub, .Mobi, PDF, etc.
You can set <div>s to be a % width of their parent element, which would keep them in proportion, if that’s what you’re looking for.
But one of the biggest pitfalls when people move from a layout-table mindset to using HTML+CSS is that they try to recreate the exact code but using a separate <div> instead of each instance <table>, <tr> and <td>. That’s the wrong way to go about it. You need to start from scratch with what you want to achieve, forget about how you would have coded it for layout tables, and look at (a) what each item does, to decide whether it should be in a <div> or something else, and (b) the simplest and most efficient way to set things out.
You have made some very valid points as I was trying to recreate without any luck, but % width sounds like the right key here. For PCs and Tablets they will see both columns, whereas mobile will not see the second column due to the fact they have smaller screens. I know I can move the second column to display below the first, but then the page will be far too long.
My current knowledge of CSS is being pushed beyond my comfort zone, but I guess that’s how we learn. I shall have a play and see how it goes; else I shall be back asking more questions.