Hello i am new to html/css coding, I need a small help in coding a part of my layout. Please take a look at this image http://i56.tinypic.com/5f2g4n.jpg How do i code this? Should i use separate classes for web design, e-commerce & social marketing or i should use tables to make it? Which one do you think will be professional?
Simple way.... <table style="width:100%"> <tr> <td width="33%">Block 1</td> <td width="33%">Block 2</td> <td width="33%">Block 3</td> </tr> </table> Code (markup): If u don't like using table, then use the following.... <div style="width:100%"> <div style="float:left; width:33%">Block 1</div> <div style="float:left; width:33%">Block 2</div> <div style="float:left; width:33%">Block 3</div> <div style="clear:both"></div> <div> Code (markup): Please separate the style from html. I have inlined the styles just for illustration.
Percentages are known to be fiddly in CSS. Have you tested that 33% doesn't overflow Trix? I've had to use tenths of a percentage to get these things right.
If there is problem for %width... then give a fixed width for the outer table / div...... what do you think are people who have liquid layouts ?
Hey, I used fluid layouts all the time. I've just had weird problems where 3 x 33% appears over 100%. So I had to reduce them to 32.9% or lower.
that problem will arise only if there is margin or padding or border or cellspacing or cellpadding is given (not sure though everything will cause it)..... if theresnt any it will not create problem... it should not.... 99% should not be problem....
OK those are good points, but shouldn't width be relative anyway? Why would padding/margins affect something which should be a 100% percent of a space anyway? I'm going to try and recreate the problem.