Force a <div> to be fluid - Scale with a page

[annyvz]

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.

[Ingolme]

If you don't give them or their container a width then they will take up the full width of the page by default.

[kelly2marie]

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.

[dsonesuk]

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.

[kelly2marie]

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