jimfog Posted May 18, 2011 Share Posted May 18, 2011 Despite i have understood in theory what the min/max width property does, i have difficulty understanding the practical implications in it and how there relate to the size of the browser window.From what i realize it is an important property since it aims to adjust the content of the site in accordance with the resolution of the user's monitor-correct me if i am wrong.Let me mention some conclusions i have reached regarding this property.By setting for example an element with a min-width of 800px even if the content inside it is 400px the element will remain at 800px.I think that i can achieve the same effect by using just width:800px;I did some testing and noticed that there seems not to be any difference between having width:800px; and min-width:800pxAny help will be more than appreciated. Link to comment Share on other sites More sharing options...
Err Posted May 18, 2011 Share Posted May 18, 2011 What if you want your content to expand past 800 pixels? width:800px will limit the width, but min-width will allow the minimum width to be 800 and allows it expand past that. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 18, 2011 Share Posted May 18, 2011 If you have a outer container element with a fluid width, for example of 80%, this will stretch to 80% of the current screen width, but! say you have some fixed width child elements, within in it. Now if the outer container width falls below 960px (width usually used for 1024 width resolution screens), the child containers may start to stack above each other as they are too wide to fit side by side, in this situation min-width: 960px; would prevent this from happening.The max-width (which i can't remember ever using), would be used in a similar situation where a extra wide screen would make the design less desirable, so a restriction is set to prevent it going beyond a specific width. Link to comment Share on other sites More sharing options...
jimfog Posted June 10, 2011 Author Share Posted June 10, 2011 If you have a outer container element with a fluid width, for example of 80%, this will stretch to 80% of the current screen width, but! say you have some fixed width child elements, within in it. Now if the outer container width falls below 960px (width usually used for 1024 width resolution screens), the child containers may start to stack above each other as they are too wide to fit side by side, in this situation min-width: 960px; would prevent this from happening.The max-width (which i can't remember ever using), would be used in a similar situation where a extra wide screen would make the design less desirable, so a restriction is set to prevent it going beyond a specific width.I think i am close(very) at understanding this notion.On first it seems difficult, but eventually someone can get at the bottom of it. Link to comment Share on other sites More sharing options...
ckrudelux Posted June 10, 2011 Share Posted June 10, 2011 If you have a outer container element with a fluid width, for example of 80%, this will stretch to 80% of the current screen width, but! say you have some fixed width child elements, within in it. Now if the outer container width falls below 960px (width usually used for 1024 width resolution screens), the child containers may start to stack above each other as they are too wide to fit side by side, in this situation min-width: 960px; would prevent this from happening.The max-width (which i can't remember ever using), would be used in a similar situation where a extra wide screen would make the design less desirable, so a restriction is set to prevent it going beyond a specific width.If you make lets say a menu for something mobile like a ipad and a phone, since it's mobile you want to use the hole width of the screen.So you set the menu to use 100% width of the screen, but for readability issues we can't make them smaller then 100px and not greater then 300px so you won't lose focus.so a css for this would look something like this:.PointToEffectedElement{margin: 0 auto;width: 100%;min-width: 100px;max-width: 300px;}So first we have centered the element in case someone has a wider screen.Next we set it to use all screen spaceAfter what we set the minimum width this element can be so if you have a smaller screen you would need to scroll.Ending with the maximum width allowed to use if the screen is wider then the readability width of the element.Hope this helps. Link to comment Share on other sites More sharing options...
jimfog Posted June 10, 2011 Author Share Posted June 10, 2011 If you make lets say a menu for something mobile like a ipad and a phone, since it's mobile you want to use the hole width of the screen.So you set the menu to use 100% width of the screen, but for readability issues we can't make them smaller then 100px and not greater then 300px so you won't lose focus.so a css for this would look something like this:.PointToEffectedElement{margin: 0 auto;width: 100%;min-width: 100px;max-width: 300px;}So first we have centered the element in case someone has a wider screen.Next we set it to use all screen spaceAfter what we set the minimum width this element can be so if you have a smaller screen you would need to scroll.Ending with the maximum width allowed to use if the screen is wider then the readability width of the element.Hope this helps.Yes it does.Thanks Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.