Login | Register | FAQ
Anonymous

Fit to browser?

+ Post a reply

3 posts Page 1 of 1


Fit to browser?

by xKiller4Hir3 » Fri Mar 18, 2011 3:41 am

I want to stretch my entire template to fit a browsers width setting.
Can someone help me with this? I can edit #container to fit 100% width but then it leaves an entire gap on the right side since everything is floated left. This is probably the last thing I need to do before I can finally start filling in the information. Can't wait!!!! :)
This is what my site looks like right now. I would like to stretch the width to the browser to make it more neat.

Image


--HTML-----
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<link href="styles1.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="container">
   <div id="leftside">
   </div>
<div id="center">
        <div id="banner">
            <img src="buttons/banner.png" width="900" height="250" />
       </div>
       <div id="navbar">
          <img src="buttons/navbar/home-active.png" usemap="#navbar" width="900" height="40" border="0" />
              <map name="navbar">
                <area shape="rect" coords="0,0,150,90" href="index.html" alt="home" />
                <area shape="rect" coords="150,0,300,90" href="about.html" alt="about" />
                <area shape="rect" coords="300,0,450,90" href="menu.html" alt="menu" />
                <area shape="rect" coords="450,0,600,90" href="calendar.html" alt="calendar" />
                <area shape="rect" coords="600,0,750,90" href="photos.html" alt="photos" />
                <area shape="rect" coords="750,0,900,90" href="contacts.html" alt="contacts" />
             </map>
       </div>
    <div id="content">
</div>
    </div>
    <div id="rightside">
    </div>
</div>
</body>
</html>



--CSS-----
Code: Select all
@charset "utf-8";
/* CSS Document */

* {
   margin:0px;
   padding:0px;
}
#container {
   width:1332px;
}
#banner {
   width:900px;
}
#navbar {
   width:900px;
}
#center {
   float:left;
}
#content {
   width:900px;
   height:600px;
   background-image:url(buttons/content/background.png);
   background-position:top;
}
#leftside {
   width:216px;
   height:890px;
   background-image:url(buttons/side/leftside.png);
   background-repeat:repeat-y;
   background-position:left top;
   float:left;
}
#rightside {
   width:216px;
   height:890px;
   background-image:url(buttons/side/rightside.png);
   background-repeat:repeat-y;
   background-position:right top;
   float:right;
}

User avatar

xKiller4Hir3

  • Posts: 3
  • Joined: Thu Mar 17, 2011 1:03 am

Re: Fit to browser?

by HTML.net » Fri Mar 18, 2011 9:02 am

It's a good idea! You need to use % instead px on all the divs - not just the container.

- Andreas, HTML.net
User avatar

HTML.net
Site Admin

  • Posts: 1194
  • Joined: Sat Sep 11, 2010 11:24 am
--
Show some love for HTML.net on Twitter, Facebook and Google: Use the buttons on top of all pages.

Re: Fit to browser?

by josephchau » Tue Mar 22, 2011 8:46 am

HTML.net wrote:It's a good idea! You need to use % instead px on all the divs - not just the container.

- Andreas, HTML.net


i agree with this. the percentage sign is helpful
User avatar

josephchau

  • Posts: 1
  • Joined: Tue Mar 22, 2011 8:44 am


+ Post a reply

Page 1 of 1