annyvz Posted September 22, 2014 Share Posted September 22, 2014 Hi, I have two <div> tags on a page containing some info, Is there a way to force these two divs to be fluid/scalable as the page is sized? Please see my illustrations attached. Thank you. Link to comment Share on other sites More sharing options...
Ingolme Posted September 22, 2014 Share Posted September 22, 2014 If you don't give them or their container a width then they will take up the full width of the page by default. Link to comment Share on other sites More sharing options...
kelly2marie Posted September 27, 2014 Share Posted September 27, 2014 To make the divs fluid, you can set their widths to percentages. In addition, it sounds like you are looking for info about Responsive Web Design. Here you begin with a fluid layout, then use Media Queries to create a different set or sets of CSS Styles for different Device sizes. (Take a look at kellys-tutorials.com/demo. This is a current site I am building to be Responsive. Resize the browser width and watch as the layout changes. Just keep in mind, I am in the early stages of this site, and it needs work. But you should get the idea. Go ahead and look in the code and css. take whatever code you need to help you.) For a quick Tutorial, but not an ideal method, take a look at http://webdesignerwall.com/tutorials/responsive-design-in-3-steps. For an entire site, I would use a Mobile First Approach and would make my layout fluid from the beginning, not just in the media queries. I can't put all this in here as entire books are written on the topic. See http://alistapart.com/article/responsive-web-design for more info. Hope this helps somewhat. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 27, 2014 Share Posted September 27, 2014 Using unnecessary percentage width such as 100% on block elements can cause problems if using padding and margins, as these are added to full width which can cause stacking, scrollbars to appear if used for full width of screen, so be careful on usage. Link to comment Share on other sites More sharing options...
kelly2marie Posted September 30, 2014 Share Posted September 30, 2014 dsonesuk is right. in addtion, if you set a width at 100% and add a border, this too will trigger a horizontal scroll bar. However, to avoid these issues with padding, margins, and borders and the default css box model, we can add a css3 property called "box-sizing". Basically, we use that to change the way the box model is applied, in other words, change the way padding, margins, and borders behave by default which is additive. meaning, if you add any of these properties to block box that has a width specified, it causes the entire width of the element to increase. use box-sizing with a border-box value, and that problem goes away entirely. So, add the following style to your css reset (at the beginning of your style sheet: *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } You can learn more about css3 box-sizing property at: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp and https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now