{"id":2864,"date":"2012-11-27T23:02:44","date_gmt":"2012-11-27T23:02:44","guid":{"rendered":"http:\/\/www.dognmonkey.com\/techs\/?p=2864"},"modified":"2012-11-28T18:41:15","modified_gmt":"2012-11-28T18:41:15","slug":"min-max-width-in-css","status":"publish","type":"post","link":"https:\/\/www.dognmonkey.com\/techs\/min-max-width-in-css.html","title":{"rendered":"Min-Max-Width In CSS"},"content":{"rendered":"<p style=\"text-align: center;\"><em>I like fluid themes, all my themes are fluid, the other day playing with the min-width, max-width, and just width, I found out something interesting.<\/em><\/p>\n<p style=\"text-align: center;\"><em>My theme has 3 columns, 1 content in left column, and 2 sides bars in right column. If I set both of these width with max-width, the content will shrink to the size of the content page (narrower width).<\/em><\/p>\n<p style=\"text-align: center;\"><em><\/em><em><a class=\"preview\" href=\"\/media\/wpweb\/css\/minmax\/sm_maxwidth.jpg\" rel=\"lightbox[minmax]\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" title=\"max-width set in CSS\" src=\"\/media\/wpweb\/css\/minmax\/tn_maxwidth.jpg\" alt=\"max-width\" width=\"250\" height=\"21\" \/><\/a>\u00a0\u00a0\u00a0\u00a0 <a class=\"preview\" href=\"\/media\/wpweb\/css\/minmax\/sm_maxwidth1.jpg\" rel=\"lightbox[minmax]\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" title=\"content display shrink to accommodate narrow content\" src=\"\/media\/wpweb\/css\/minmax\/tn_maxwidth1.jpg\" alt=\"max-width\" width=\"250\" height=\"80\" \/><\/a><\/em><\/p>\n<p style=\"text-align: center;\"><em>If I set my both columns to min-width, the side-bars pushed all the way down, off the page.<\/em><\/p>\n<p style=\"text-align: center;\"><a class=\"preview\" href=\"\/media\/wpweb\/css\/minmax\/sm_minwidth.jpg\" rel=\"lightbox[minmax]\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" title=\"min-width on both columns\" src=\"\/media\/wpweb\/css\/minmax\/tn_minwidth.jpg\" alt=\"min-width\" width=\"250\" height=\"21\" \/><\/a>\u00a0\u00a0\u00a0\u00a0 <a class=\"preview\" href=\"\/media\/wpweb\/css\/minmax\/sm_minwidth1.jpg\" rel=\"lightbox[minmax]\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" title=\"side-bars pushed down to bottom of page\" src=\"\/media\/wpweb\/css\/minmax\/tn_minwidth1.jpg\" alt=\"min-width\" width=\"250\" height=\"82\" \/><\/a><\/p>\n<p style=\"text-align: center;\"><a class=\"preview\" href=\"\/media\/wpweb\/css\/minmax\/sm_minwidth2.jpg\" rel=\"lightbox[minmax]\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" title=\"sidebars pushed down to bottom page\" src=\"\/media\/wpweb\/css\/minmax\/tn_minwidth2.jpg\" alt=\"min-width\" width=\"250\" height=\"56\" \/><\/a><\/p>\n<p style=\"text-align: center;\"><em>If I set both with just width &#8211; everything will fit in place as designed.<\/em><\/p>\n<p style=\"text-align: center;\"><a class=\"preview\" href=\"\/media\/wpweb\/css\/minmax\/sm_width.jpg\" rel=\"lightbox[minmax]\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" title=\"set width to both columns\" src=\"\/media\/wpweb\/css\/minmax\/tn_width.jpg\" alt=\"width\" width=\"250\" height=\"23\" \/><\/a>\u00a0\u00a0\u00a0\u00a0 <a class=\"preview\" href=\"\/media\/wpweb\/css\/minmax\/sm_width1.jpg\" rel=\"lightbox[minmax]\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" title=\"set width to both columns\" src=\"\/media\/wpweb\/css\/minmax\/tn_width1.jpg\" alt=\"width\" width=\"250\" height=\"80\" \/><\/a><\/p>\n<p style=\"text-align: center;\"><em>If I set min-width to content column and width to sidebars (right column), the page also display correctly without content shrinking.<\/em><\/p>\n<p style=\"text-align: center;\"><em><\/em><a class=\"preview\" href=\"\/media\/wpweb\/css\/minmax\/sm_minonly.jpg\" rel=\"lightbox[minmax]\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" title=\"set min-width to content column only\" src=\"\/media\/wpweb\/css\/minmax\/tn_minonly.jpg\" alt=\"min-width\" width=\"250\" height=\"26\" \/><\/a>\u00a0\u00a0\u00a0\u00a0 <a class=\"preview\" href=\"\/media\/wpweb\/css\/minmax\/sm_minonly1.jpg\" rel=\"lightbox[minmax]\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" title=\"set min-width to content only\" src=\"\/media\/wpweb\/css\/minmax\/tn_minonly1.jpg\" alt=\"min-width\" width=\"250\" height=\"79\" \/><\/a><\/p>\n<p style=\"text-align: center;\"><em>So, next time when you change your theme CSS, if you run into displaying problem, these min-max may be the cause of it.<\/em><\/p>\n<p style=\"text-align: center;\"><em><\/em><em>Cheers,<\/em><\/p>\n<p style=\"text-align: center;\">\n","protected":false},"excerpt":{"rendered":"<p>I like fluid themes, all my themes are fluid, the other day playing with the min-width, max-width, and just width, I found out something interesting. My theme has 3 columns, 1 content in left column, and 2 sides bars in right column. If I set both of these width with max-width, the content will shrink <a href=\"https:\/\/www.dognmonkey.com\/techs\/min-max-width-in-css.html\" class=\"more-link\">&#8230;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[288],"tags":[51,226,289],"class_list":["post-2864","post","type-post","status-publish","format-standard","hentry","category-css-wordpress","tag-css","tag-max-width","tag-min-width"],"views":3389,"_links":{"self":[{"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/posts\/2864","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/comments?post=2864"}],"version-history":[{"count":4,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/posts\/2864\/revisions"}],"predecessor-version":[{"id":2874,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/posts\/2864\/revisions\/2874"}],"wp:attachment":[{"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/media?parent=2864"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/categories?post=2864"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/tags?post=2864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}