{"id":81,"date":"2005-03-16T13:35:45","date_gmt":"2005-03-16T11:35:45","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/archives\/2005\/03\/16\/faux-borders-pseudo-table-effect\/"},"modified":"2008-06-02T11:04:07","modified_gmt":"2008-06-02T09:04:07","slug":"faux-borders-pseudo-table-effect","status":"publish","type":"post","link":"http:\/\/www.maratz.com\/blog\/archives\/2005\/03\/16\/faux-borders-pseudo-table-effect\/","title":{"rendered":"Faux Borders and Pseudo Table Effect"},"content":{"rendered":"<p>Our recent project <a href=\"http:\/\/www.24sata.hr\/\">24sata<\/a> is living happily and after <a href=\"http:\/\/www.mi3dot.org\/gallery\/showcase\/njava\/\">Vanja\u2019s<\/a> <a href=\"http:\/\/www.maratz.com\/blog\/archives\/2005\/03\/11\/two-color-sifr\/\">Two color sIFR <\/a> and <a href=\"http:\/\/www.maratz.com\/blog\/archives\/2005\/03\/16\/two-color-sifr-take-two\/\">Two color sIFR Take Two<\/a> articles, it\u2019s now time for me to explain how I managed to position \u2018comments\u2019 and \u2018read more\u2019 links to bottom of every news preview box, which are all in the same row and of different amount of text within.<!--more--><\/p>\n<p>A few issues had to be taken into consideration:<\/p>\n<ul>\n<li>Design composition required those links to be placed at the bottom of each news box, no matter how much text is in the box<\/li>\n<li>Design also required that all the boxes in a particular row are of equal height and consistent no matter how much text is in the box<\/li>\n<\/ul>\n<h3>Wrapper to the Rescue<\/h3>\n<p>Three boxes had to be wrapped into some containing element (<a href=\"http:\/\/webdesign.maratz.com\/lab\/faux_borders\/01.php\">example 1<\/a>), so we can float them to the left . (<span class=\"corrected\">One must float everything inside also, to ensure expanding of the parent element.<\/span> Even though it\u2019s usually a good practice, in this particular case floating everything breaks layout in IE.) At this point, we can also set rules for width and borders of the boxes (<a href=\"http:\/\/webdesign.maratz.com\/lab\/faux_borders\/02.php\">example 2<\/a>). As you can see boxes are not positioned where they should be, because wrapper\u2019s width is set to 606px and boxes must be at the most 200px wide (plus margin of 2px). With 1px border, total width of those boxes is more than width of wrapper (mathematically: (200px width + 2px right-margin + 2 x 1px borders) x 3 boxes = 612px total width). We could have set width to 198px right away, but then again we would have to set a value back to 200px, once we deploy faux borders. Faux what? Oops! Keep reading&#8230; <\/p>\n<h3>Faux Border<\/h3>\n<p>In <a href=\"http:\/\/webdesign.maratz.com\/lab\/faux_borders\/03.php\">example 3<\/a> I made an <a href=\"http:\/\/webdesign.maratz.com\/lab\/faux_borders\/faux_borders.gif\">image<\/a> and placed it as the background of the wrapper, so we don\u2019t need bottom and side borders of the news boxes, which now solves problem of news preview boxes being too wide. However, we need top border, because we can\u2019t predict actual height of each box, since it depends on the amount of text within. Faux border background image is therefor positioned at the very bottom of the wrapper. This way we get the impression that boxes are extended to the bottom of the wrapper and are of equal height, even though they actually aren\u2019t. Perfect! Now let\u2019s go a little bit further&#8230;<\/p>\n<h3>Stuck Links to the Bottom<\/h3>\n<p>Next thing to do is positioning \u2018comments\u2019 and \u2018read more\u2019 link to the bottom of the wrapper (<a href=\"http:\/\/webdesign.maratz.com\/lab\/faux_borders\/04.php\">example 4<\/a>), since the boxes are not as high as they appear to be. First of all, we add <code>position: relative;<\/code> rule for the wrapper. This ensures absolute positioning of \u2018comments\u2019 and \u2018read more\u2019 links relative to wrapper, not to the corresponding boxes (which are of different heights, remember?). Since we can add class names <code>cnt1<\/code>, <code>cnt2<\/code> and <code>cnt3<\/code> to the boxes, we can safely position each of them separately.<\/p>\n<pre>.smallBox .subNav { position: absolute; bottom: 0; }\r\n.cnt1 .subNav { left: 0; }\r\n.cnt2 .subNav { left: 202px; }\r\n.cnt3 .subNav { left: 404px; }<\/pre>\n<p>(<code>.smallBox<\/code> and <code>cnt1<\/code> etc. are two different class names at the same element).<\/p>\n<p>Also, we must establish bottom padding of the boxes, since the links are positioned absolute, so they are out of the flow. Without bottom padding, text in the longest box would fall behind the links. To fix this, we can <strong>increase<\/strong> padding bottom by 1em (or whatever <code>line-height<\/code> of the links is), to ensure that text in the boxes doesn\u2019t fall behind.<\/p>\n<h3>Final Touch<\/h3>\n<p>Finally, we have to move \u2018comments\u2019 link to the left and \u2018read more\u2019 link to the right (<a href=\"http:\/\/webdesign.maratz.com\/lab\/faux_borders\/05.php\">example 5<\/a>). To achieve that, just float parent element (in this case <code>&#60;ul&#62;<\/code>) and both <code>&#60;li&#62;<\/code>s (which are carrying links) to the left. For <code>&#60;li&#62;<\/code> which carries \u2018read more\u2019 link we should shift text to the right by adding <code>text-align: right;<\/code> rule. We should also set some width and paddings to both <code>&#60;li&#62;<\/code>s, so they do not collide.<\/p>\n<pre>.subNav li { list-style: none; width: 90px; float: left; }\r\n.readMore { text-align: right; }<\/pre>\n<p>And that\u2019s pretty much it&#8230;  Any thoughts?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Our recent project 24sata is living happily and after Vanja\u2019s Two color sIFR and Two color sIFR Take Two articles, it\u2019s now time for me to explain how I managed to position \u2018comments\u2019 and \u2018read more\u2019 links to bottom of every news preview box, which are all in the same row and of different amount [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"_links":{"self":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/81"}],"collection":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/comments?post=81"}],"version-history":[{"count":0,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/81\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/media?parent=81"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/categories?post=81"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/tags?post=81"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}