1,105,450 Community Members

Width Auto Resize to fit Screen

Member Avatar
cguan_77
Nearly a Posting Virtuoso
1,379 posts since Apr 2007
Reputation Points: 8 [?]
Q&As Helped to Solve: 117 [?]
Skill Endorsements: 0 [?]
 
0
 

hi guys, is there a way to auto resize the width to fit the screen? is it possible?

Member Avatar
ravi_9793
Newbie Poster
13 posts since Mar 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 2 [?]
Skill Endorsements: 0 [?]
 
0
 

you can use:

width=100%
Member Avatar
ingeva
Junior Poster
106 posts since Jul 2008
Reputation Points: 4 [?]
Q&As Helped to Solve: 9 [?]
Skill Endorsements: 0 [?]
 
0
 

you can use:

width=100%

To fill the screen you must also maximize the window.
Who would ever want to do that? :)

Member Avatar
MidiMagic
Nearly a Senior Poster
3,404 posts since Jan 2007
Reputation Points: 556 [?]
Q&As Helped to Solve: 215 [?]
Skill Endorsements: 2 [?]
 
0
 

The width attribute is deprecated. Use a style:

.wfl {width: 100%}

Then, in the tag you want to be wide, put the following:

<tag class="wfl">

The tag will assume the full width of its container.

Member Avatar
cguan_77
Nearly a Posting Virtuoso
1,379 posts since Apr 2007
Reputation Points: 8 [?]
Q&As Helped to Solve: 117 [?]
Skill Endorsements: 0 [?]
 
0
 

thanks MidiMagic i'll try it out :)

Member Avatar
MJ Pieterse
Junior Poster
144 posts since Mar 2009
Reputation Points: 2 [?]
Q&As Helped to Solve: 18 [?]
Skill Endorsements: 0 [?]
 
0
 

i would suggest that you float your tables on 100%. the main advantage on using percentages is that you would style the sheet according to most people's screens. visit sitepoint.com for more info on styling on CSS. they have a huge selection on books for you to sort your problem.

Member Avatar
Trapped
Newbie Poster
4 posts since Mar 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 2 [?]
Skill Endorsements: 0 [?]
 
0
 

Indeed to have a fluid layout you will have to use % to determine the width instead of pixels.

Member Avatar
Rhyan
Posting Whiz in Training
240 posts since Oct 2006
Reputation Points: 5 [?]
Q&As Helped to Solve: 26 [?]
Skill Endorsements: 0 [?]
 
0
 

Actually <div> element is 100% stretched by default, unless contained in another block element with fixed widht, or unless floated. So, if you are using div's and do not use neither float, nor width properties, they will be still 100% wide.
Now, what is your goal so we could help more?

Member Avatar
churro89
Newbie Poster
1 post since Sep 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

These might help:
https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

and CSS:

max-width: 100%;
Member Avatar
Mona3
Newbie Poster
3 posts since Sep 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Good subject!!

Member Avatar
Banyak
Newbie Poster
1 post since Apr 2014
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

thanks guys, the css max-width: 100%; works!

You
Post:
Start New Discussion
Tags Related to this Article