Center middle div

Forum Moderators: open

Message Too Old, No Replies

Center middle div

Newbie_UK

6:59 pm on Dec 2, 2011 (gmt 0)

Hi guys,

I'm a total newbie to html so please be gentle

I have 3 divs and I want the middle div to be a static size and to be centered on the screen but the 2 either side of it to grow depending on screen with...

Is this possible?

Many Thanks

Ian

Skier88

9:48 pm on Dec 2, 2011 (gmt 0)

Here's the best I could come up with.

<!doctype html>
<html lang='en'>
  <head>
    <meta charset='utf-8'>
    <title>layout test</title>
    <style type='text/css'>
      *      {margin:0; padding:0;}
      div    {height:100px;}
      #l     {float:left; width:50%;}
      #l div {margin-right:200px; background:#f88;}
      #m     {width:400px; margin:0 auto; background:#8f8;}
      #r     {position:absolute; right:0; top:0; width:50%;}
      #r div {margin-left:200px; background:#88f;}
    </style>
  </head>
  <body>
    <div id='l'><div></div></div>
    <div id='m'></div>
    <div id='r'><div></div></div>
  </body>
</html>

Of course, it would be far simpler to just center the middle div and have fixed-width sidebars.

Newbie_UK

10:29 pm on Dec 2, 2011 (gmt 0)

Thanks Skier88

That will work a treat

Regards

Ian