Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    Dec 2013
    Posts
    1
    Member #
    37970

    Trying to get two divs to remain side by side and scale with window size.

    Hey all, first time here.

    So I am trying to get two divs to not overlap one another. The one on the left, my navigation bar, I would like to remain as is and be stationary. The one on the right, my main area, I would like to remain to the right of the navigation bar but scale in width as the window scales. How can I do this?? I will attach both my page code and stylesheet codes.

    Main page:

    <!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>Website Main Page</title>
    <link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
    <div id="header"><h1 style="text-align:center; margin:30px;">Japan: Land of the Rising Sun</h1></div>
    <div id="navbar">
    <div id="nav"><a href="index.html">Home</a></div>
    <div id="nav"><a href="history.html">History</a></div>
    <div id="nav"><a href="culture.html">Culture</a></div>
    <div id="nav"><a href="pop_culture.html">Pop Culture</a></div>
    <div id="nav"><a href="language.html">Language</a></div>
    <div id="nav"><a href="religion.html">Religion</a></div>
    <div id="nav"><a href="videos.html">Videos</a></div>
    <div id="nav"><a href="links.html">Links</a></div>
    </div>
    <div id="main">
    <h1>Welcome to Japan: Land of the Rising Sun! ^_^</h1>
    </div>
    </body>
    </html>

    Stylesheet:

    @charset "utf-8";
    /* CSS Document */

    #header {
    margin:auto;
    position:relative;
    border:2px solid black;
    border-radius:5px;
    height:100px;
    width:auto;
    background-image:url(../images/header1.png);
    border-spacing:2px;
    }

    #navbar {
    position:absolute;
    float:left;
    height:256px;
    width:100px;
    border:2px solid black;
    background-color:#363;
    border-radius:5px;
    margin-top:2px;
    text-align:center;
    font-family:Georgia, "Times New Roman", Times, serif;
    }

    #main {
    float:right;
    height:600px;
    border:2px solid #000;
    width:auto;
    position:inherit;
    margin-left:2px;
    }

    #nav {
    height:25px;
    width:98px;
    padding-top:5px;
    border:1px solid #000;
    }

    div div a:hover {
    text-decoration:none;
    color:#F00;
    }

    div div a {
    text-decoration:none;
    color:#000;
    }

    div div a:visited {
    text-decoration:none;
    color:#666;
    }

    Thank you so much in advance! I appreciate all your help!!!!

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    There's a couple of ways you can do this. First, if compatibility isn't an issue, there's flexbox. I wouldn't recommend it, since compatibility is really bad and browsers don't even agree on the syntax. Second, you could use the CSS calc() function, where you'd set the fixed width of the sidebar, then set the width of the content area with calc().

    Here's how that would work in CSS:
    Code:
    .sidebar{
      width:100px;
    }
    .content{
      width: calc(100%-100px); /* If you need a margin, don't forget to consider that in the calc() */
    }
    Browser support is fairly good. I haven't done it this way myself, but it should work.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Tags for this Thread

All times are GMT -6. The time now is 05:28 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com