dynamically resize div depending on browser window width

Page 1 of 1

5 Replies - 1182 Views - Last Post: 19 September 2012 - 03:07 AM

#1 farril  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 110
  • Joined: 04-March 09

dynamically resize div depending on browser window width

Posted 11 September 2012 - 02:42 PM

Hi guys.

I've got a page which has a body min and max width. within the body are two inline div classes, the right div is fixed width. the left div i want to adjust its size automatically to fill the remaining body width depending on the body's width

<body>
	<div class="wrapper">
<!-- HEADER -->


<!-- MAIN -->
  		<div class="main content">
			<div class="form wide">
right div				
			</div>
			
			<div class="left superwide">
left div
                       </div>

			</div>
		</div>
	</div>
</body>




.content                     {
                                 min-width: 780px;
                                 padding: 0 44px;
                             }
.main                        {
                                 margin: 0 auto;
                                 max-width: 1000px;
                                 padding-bottom: 100px;
                                 padding-top: 35px;
                                 width: auto;
                             }
.wide                        { width: 310px }
.superwide		     { width: 50% }
.form                        { float: right }
.left                        { float: left }


so i want my left div to be 700px width when the main div reaches its max width, and to go down to 500px when content div reaches its min width (so it always stays at 100% of the width minus the right div.

.superwide is currently set to 50%, which works when content is at its min width. but when at the max width im getting a bigger gap between left and right divs.

I'm struggling to do this with without using javascript. hope i've explained this well enough. any ideas?

This post has been edited by farril: 11 September 2012 - 02:44 PM


Is This A Good Question/Topic? 0
  • +

Replies To: dynamically resize div depending on browser window width

#2 Lemur  Icon User is offline

  • OpenBSD Head
  • member icon


Reputation: 1111
  • View blog
  • Posts: 3,061
  • Joined: 28-November 09

Re: dynamically resize div depending on browser window width

Posted 11 September 2012 - 05:19 PM

Use relative units such as the EM and %.
Was This Post Helpful? 0
  • +
  • -

#3 farril  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 110
  • Joined: 04-March 09

Re: dynamically resize div depending on browser window width

Posted 12 September 2012 - 04:07 AM

Sorry but i'm still unclear how i'd achieve this.

I used a % width on my left div, which does change its width depending on how wide the parent div is, however as the right div is a fixed width this doesn't work, and just results in a big gap when the parent div is at its max width.
Was This Post Helpful? 0
  • +
  • -

#4 amit.soni  Icon User is offline

  • D.I.C Head

Reputation: 20
  • View blog
  • Posts: 61
  • Joined: 19-November 10

Re: dynamically resize div depending on browser window width

Posted 19 September 2012 - 01:44 AM

you can get the client browser width by javascript code :

var width = document.documentElement.clientWidth;


Happy Coding :)
Was This Post Helpful? 0
  • +
  • -

#5 StefanOnRails  Icon User is offline

  • D.I.C Head

Reputation: 35
  • View blog
  • Posts: 105
  • Joined: 31-July 12

Re: dynamically resize div depending on browser window width

Posted 19 September 2012 - 01:59 AM

You can use CSS3 flexible box model.
Maybe you'll want to watch an HTML5 Tutorials Series.
Was This Post Helpful? 0
  • +
  • -

#6 farril  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 110
  • Joined: 04-March 09

Re: dynamically resize div depending on browser window width

Posted 19 September 2012 - 03:07 AM

Thanks for the responses. I actually found a very simple way to this this. By removing the width of the left div and float them both it will automatically fill the remaining space, and reduce in size as the client width is reduced.

the flexible box model looks like a very useful feature though, so i will definitely look in to that too for future requirements.

This post has been edited by farril: 19 September 2012 - 03:08 AM

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1