Trying to fit my webpage to the browser

Trying to fit my webpage to the browser
0.0 0

#1

There is over 1000 pixels spare shared between the left and right of the webpage. I have googled stuff and tried what was offered, but still hasn’t worked. Someone please try to figure it out? Here is the code, thanks

<html>

  <head>
    <title>The Boon Exchange</title>
    <style>

    /* Login/Register Bar Starts */
          #loginRegister {
          width: 1375px;
          height: 44px;
          background-color: 252525;
          position: relative;
          left: 63px;
          top: -8px;
          }

          #familyOwnedBusiness {
          color: #C0C0C0;
          font-weight: 700;
          position: relative;
          left: 585px;
          top: 11px;
          font-style: oblique;
          font-size: 20;
          }

          #loginRegisterText {
          color: C0C0C0;
          position: relative;
          left: 1057px;
          top: -25px;
          }


    /* Login/Register Bar Finishes*/


    /* Banner Menu Starts */
          #banner {
          width: 270px;
          height: 80px;
          background-color: black;
          position: relative;
          left: 50px;
          top: 16px;
          }

          #bannerHead {
          font-family: Oxygen, sans-serif;
          border: 4px solid #000000;
          border-color: #000000;
          position: relative;
          left: 63;
          top: -8;
          width: inherit;
          height: 110px;
          background-color: black;
          border-width: 3px;
          }

          #bannerOptionsDiv {
          border-top-color: #000000;
          border-bottom-color: #000000;
          border-right-color: #000000;
          width: 550px;
          height: 112px;
          position: relative;
          left:801px;
          top:-113px;
          padding:20px;
          }

          .options {
          position: relative;
          top: 25;
          left: 9.7;
          font-size: 14;
          text-align: center;
          font-weight: 700;
          color: C0C0C0;
          }
    /* Banner Menu Finishes */

</style>
  </head>

  <body>

    <!-- Login/Register Bar Starts -->
        <div id="loginRegister">
          <div id="familyOwnedBusiness"
            <p>A Family Owned Business
          </div>
          <p id=loginRegisterText><span style='word-spacing: 10px;'> Login <span style="color: #2B2B2B">|</span> Create</span><span style='word-spacing: 0.5;'> a FREE account!</span></p>
        </div>
    <!-- Login/Register Bar Finishes -->

    <!-- Banner Menu Starts -->
        <div  id="bannerHead">
          <img src="boon_exchange_logo.png" alt="The Boon Exchange" id="banner">
          <div id="bannerOptionsDiv">
            <br />
            <p class="options"><span style='word-spacing: 25px;'>HOME SUBSCRIBE FAQS </span><span style='word-spacing: 0.5;'> ABOUT US</span></p>
          </div>
        </div>
    <!-- Banner Menu Finishes -->

  </div>
  </body>

</html>


#2

You have several left: properties defined with 500px or 1000px which add to the dimensions of the page. You’ll probaby have to use a responsive unit like percentages if you want it responsive.


#3

Im a beginner, any way to simplify what you said?


#4

Do you have a sketch of how you want the page to look on desktop vs mobile device? If not, then I would start there, then post a copy of it as a reply to this thread, so we can understand what you are attempting to do.

A second option (which is not as good as a picture), would be to describe where you want each div positioned on the page with respect to the other divs.


#5

I want it to look as it is, except for the huge margins or sides (dont mind the missing photo)


#6

First, fix the html syntax error caused by your code below. Your opening div is missing a > and if you really want a p element nested inside the div, you need to add a closing tag for it (</p>).

<div id="familyOwnedBusiness"
            <p>A Family Owned Business
          </div>

Next, I would start commenting out each place you specify a left: ???px; so you can see how it affects the gap on the right side of the page. When you specify the left property, you are shifting the starting point of the content over the specified number of pixels.