locked
Unsure how to move boxes RRS feed

  • Question

  • User-1767698477 posted

    I'm using a 2 column template. I'm not sure how to move the sidebar to the right of the main content so that I can expand expand the width of the main content. Can someone possibly help? I would also like to understand how to control the amount of white space between the top of where my content starts and the black bar below nav menu bar as well as the space between the bottom of the content and where the bottom brown part starts.. Here is my code from master page and also the css:

    %@ Master Language="VB" CodeFile="default1.master.vb" Inherits="templates_default1" %>

    <!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 id="Head1" runat="server">
    <meta runat="server" id="metaRefresh" http-equiv="refresh" content="" />
    <meta content="index, follow" name="robots" />
    <meta content="7 days" name="revisit-after" />
    <meta runat="server" id="meta2" http-equiv="refresh" content="" />
    <meta id="metakeywords" runat="server" content="mortgage application integration, create du 3.2 file, mortgage application"
    name="keywords" />
    <meta id="metadescription" runat="server" content="Mortgage loan application integration. Generate a du 3.2 file which can be imported into loan processing software"
    name="description" />
    <meta runat="server" id="meta1" http-equiv="refresh" content="" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <link href="http://fonts.googleapis.com/css?family=Raleway:400,200,500,600,700,800,300"
    rel="stylesheet" />
    <link href="default.css" rel="stylesheet" type="text/css" media="all" />
    <link href="fonts.css" rel="stylesheet" type="text/css" media="all" />
    <!--[if IE 6]>
    <link href="default_ie6.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    </head>
    <body>
    <script type="text/javascript" src="wz_tooltip.js"></script>
    <div id="wrapper">
    <div id="menu-wrapper">
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
    </asp:ContentPlaceHolder>
    <!-- end #menu -->
    <div id="header-wrapper">
    </div>
    </div>
    <div id="banner">
    </div>
    <div id="page" class="container">
    <div id="content">
    <div class="title">
    <h2>
    </h2>
    </div>
    <div>
    <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
    </asp:ContentPlaceHolder>
    </div>
    </div>
    <div id="sidebar">
    <div class="box2">
    <!-- MORTGAGE LOAN CALCULATOR BEGIN -->
    <script type="text/javascript">
    mlcalc_default_calculator = 'loan';
    mlcalc_currency_code = 'usd';
    mlcalc_amortization = 'year_nc';
    mlcalc_purchase_price = '300,000';
    mlcalc_down_payment = '20';
    mlcalc_mortgage_term = '30';
    mlcalc_interest_rate = '4.5';
    mlcalc_property_tax = '3,000';
    mlcalc_property_insurance = '1,500';
    mlcalc_pmi = '0.52';
    mlcalc_loan_amount = '250,000';
    mlcalc_loan_term = '15';
    </script>
    <script type="text/javascript"> if (typeof jQuery == "undefined") { document.write(unescape("%3Cscript src='" + (document.location.protocol == 'https:' ? 'https:' : 'http:') + "//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'%3E%3C/script%3E")); mlcalc_jquery_noconflict = 1; };</script><div style="font-weight:normal;font-size:9px;font-family:Tahoma;padding:0;margin:0;border:0;text-align:center;background:transparent;color:#EEEEEE;width:150px;" id="mlcalcWidgetHolder"><script type="text/javascript"> document.write(unescape("%3Cscript src='//www.mlcalc.com/widget-narrow.js' type='text/javascript'%3E%3C/script%3E"));</script><a href="https://www.mlcalc.com/" rel="nofollow" style="font-weight:normal;font-size:9px;font-family:Tahoma;color:#EEEEEE;text-decoration:none;">www.mlcalc.com</a></div>
    <!-- MORTGAGE LOAN CALCULATOR END -->

    <br />
    <br />
    </div>
    </div>
    </div>
    </div>
    <div id="footer-wrapper">
    <div id="footer" class="container">
    <div id="box1">
    <div class="title">
    </div>
    <br />
    <ul class="style1">
    <li><a href="resources.aspx">Resources </a></li>
    <li><a href="privacy.aspx">Privacy </a></li>
    </ul>
    </div>
    <br />
    <div id="box2">
    <div class="title">
    </div>
    <ul class="style1">
    <li><a href="about.aspx">About</a></li>
    <li><a href="contact.aspx">Contact</a></li>
    </ul>
    </div>
    <br />
    <div id="box3">
    <div class="title">
    <h2>
    </h2>
    </div>
    <p>
    </p>
    <ul class="contact">
    <li><a href="#" class="icon icon-twitter"><span>Twitter</span></a></li>
    <li><a href="#" class="icon icon-facebook"><span>Facebook</span></a></li>
    <li><a href="#" class="icon icon-dribbble"><span>Dribbble</span></a></li>
    </ul>
    </div>
    </div>
    </div>
    <div id="copyright" class="container">
    <p>
    &copy; MortgageLoanApply.com All rights reserved. | <a href="default.aspx">Mortgage
    Applications</a>
    </p>
    </div>
    </body>
    </html>

    CSS  starts here

    html, body
    {
    height: 100%;
    }

    body
    {
    margin: 0px;
    padding: 0px;
    background: #1E1B1A;
    font-family: 'Raleway' , sans-serif;
    font-size: 11pt;
    font-weight: 400;
    color: #363636;
    }


    h1, h2, h3
    {
    margin: 0;
    padding: 0;
    }

    p, ol, ul
    {
    margin-top: 0px;
    }

    p
    {
    line-height: 190%;
    }

    strong
    {
    }

    a
    {
    color: #171717;
    }

    a:hover
    {
    text-decoration: none;
    }

    a img
    {
    border: none;
    }

    .image
    {
    display: inline-block;
    }

    .image img
    {
    display: block;
    width: 100%;
    }

    .image-full
    {
    display: block;
    width: 100%;
    margin: 0 0 2em 0;
    }

    .image-left
    {
    float: left;
    margin: 0 2em 2em 0;
    }

    .image-centered
    {
    display: block;
    margin: 0 0 2em 0;
    }

    .image-centered img
    {
    margin: 0 auto;
    width: auto;
    }

    hr
    {
    display: none;
    }


    /*********************************************************************************/
    /* List Styles */
    /*********************************************************************************/

    ul.style1
    {
    margin: 0;
    padding: 0;
    list-style: none;
    }

    ul.style1 li
    {
    border-top: solid 1px #E5E5E5;
    padding: .80em 0;
    }

    ul.style1 li:first-child
    {
    border-top: 0;
    padding-top: 0;
    }

    ul.style2
    {
    margin: 0;
    padding: 0;
    list-style: none;
    }

    ul.style2 li
    {
    border-top: solid 1px #E5E5E5;
    padding: 0.80em 0;
    }

    ul.style2 li:first-child
    {
    border-top: 0;
    padding-top: 0;
    }

    ul.style3 li
    l{
    margin: 20px 0;
    }

    /*********************************************************************************/
    /* Social Icon Styles */
    /*********************************************************************************/

    ul.contact
    {
    margin: 0;
    padding: 1.5em 0em 2.5em 0em;
    list-style: none;
    }

    ul.contact li
    {
    display: inline-block;
    padding: 0em 0.30em;
    font-size: 1em;
    }

    ul.contact li span
    {
    display: none;
    margin: 0;
    padding: 0;
    }

    ul.contact li a
    {
    color: #FFF;
    }

    ul.contact li a:before
    {
    display: inline-block;
    background: #3f3f3f;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #FFFFFF;
    }

    ul.contact li a.icon-twitter:before
    {
    /* background: #2DAAE4;*/
    background: #1Eb1a;
    }
    ul.contact li a.icon-facebook:before
    {
    /* background: #39599F;*/
    }
    ul.contact li a.icon-dribbble:before
    {
    /* background: #C4376B;*/
    }
    ul.contact li a.icon-tumblr:before
    {
    /* background: #31516A;*/
    }
    ul.contact li a.icon-rss:before
    {
    background: #F2600B;
    }


    /*********************************************************************************/
    /* Heading Titles */
    /*********************************************************************************/

    .title
    {
    margin-bottom: 2em;
    text-transform: uppercase;
    }

    .title h2
    {
    font-weight: 400;
    font-size: 2em;
    color: #FFB30F
    }

    .title .byline
    {
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 0.90em;
    color: #6F6F6F;
    }

    /** WRAPPER */

    #wrapper
    {
    background: #FFFFFF url(images/) repeat;
    }

    #footer-wrapper
    {
    background: #0F0F0F;
    }

    .container
    {
    width: 1200px;
    margin: 0px auto;
    }

    .clearfix
    {
    clear: both;
    }


    /*********************************************************************************/
    /* Wrappers */
    /*********************************************************************************/

    #header-wrapper
    {
    overflow: hidden;
    background: url(./images/bg01.png) repeat;
    background-size: 100%;
    padding: 0em 0em 0.0em 0em;
    background: #333333;
    }


    /*********************************************************************************/
    /* Header */
    /*********************************************************************************/

    #header
    {
    ;
    overflow: hidden;
    text-align: center;
    }

    /*********************************************************************************/
    /* Logo */
    /*********************************************************************************/

    #logo
    {
    width: 500px;
    height: 100px;
    margin: 0 auto;
    padding: 0em 0em;
    text-transform: uppercase;
    }

    #logo h1
    {
    letter-spacing: 0.10em;
    font-size: 3em;
    }

    #logo p
    {
    letter-spacing: 0.10em;
    color: #FFF;
    }

    #logo a
    {
    text-decoration: none;
    color: #FFF;
    }

    /*********************************************************************************/
    /* Banner */
    /*********************************************************************************/

    #banner
    {
    overflow: hidden;
    height: 50px;
    background: url(images/pc01.jpg) no-repeat center;
    background-size: cover;
    }

    #banner .image
    {
    }


    /** MENU */

    #menu-wrapper
    {
    background: #FFB30F; /**-- background: #16a085; */
    }

    #menu
    {
    overflow: hidden;
    height: 50px;
    }

    #menu ul
    {
    margin: 0;
    padding: 0px 0px 0px 0px;
    list-style: none;
    line-height: normal;
    text-align: center;
    }

    #menu li
    {
    display: inline-block;
    }

    #menu a
    {
    display: block;
    letter-spacing: 1px;
    padding: 0px 40px;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.80em;
    line-height: 50px;
    border: none;
    color: #FFF;
    }

    #menu a:hover, #menu .current_page_item a
    {
    color: #A29100;
    text-decoration: none;
    }

    #menu a:active, #menu .current_page_item a
    {
    color: White;
    }

    #menu .current_page_item a
    {
    background: #A29100;
    }

    /** PAGE */

    #page
    {
    ;
    overflow: hidden;
    padding: em 0em 5em 1em;
    }

    /** CONTENT */

    #content
    {
    float: left;
    width: 820px;
    }

    /*********************************************************************************/
    /* Sidebar */
    /*********************************************************************************/

    #sidebar
    {
    float: right;
    width: 250px;
    padding: 3em 0em 0em 0em;
    }

    #sidebar .title h2
    {
    font-size: 1.6em;
    }

    #sidebar .box1
    {
    margin-bottom: 3em;
    }


    /*********************************************************************************/
    /* Copyright */
    /*********************************************************************************/

    #copyright
    {
    overflow: hidden;
    padding: 3em 1em;
    text-align: center;
    }

    #copyright p
    {
    letter-spacing: 0.20em;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.80em;
    color: rgba(255,255,255,.5);
    }

    #copyright a
    {
    text-decoration: none;
    color: rgba(255,255,255,.7);
    }

    /*********************************************************************************/
    /* Welcome */
    /*********************************************************************************/

    #welcome
    {
    overflow: hidden;
    padding: 1.5em 0em;
    border-bottom: 1px solid #E5E5E5;
    text-align: center;
    }

    #welcome h2
    {
    letter-spacing: 0.20em;
    text-transform: uppercase;
    font-size: 1.6em;
    }

    #welcome p
    {
    font-size: 1.3em;
    }

    #welcome .byline
    {
    display: block;
    padding: 0em 0em .5em 0em;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 1.2em;
    color: #6F6F6F;
    }

    /*********************************************************************************/
    /* Portfolio */
    /*********************************************************************************/

    #portfolio-wrapper
    {
    background: rgba(0,0,0,.04);
    padding: 1em 0em;
    color: rgba(255,255,255,.7);
    }

    #portfolio
    {
    overflow: hidden;
    }

    #portfolio .title h2
    {
    font-size: 1.2em;
    color: #FFF;
    }

    #portfolio .byline
    {
    font-size: 1em;
    color: #EEA7C1;
    }

    #column1, #column2, #column3, #column4
    {
    width: 282px;
    }

    #column1, #column2
    {
    float: left;
    margin-right: 24px;
    }

    #column3
    {
    float: left;
    }

    #column4
    {
    float: right;
    }

    /*********************************************************************************/
    /* Button Style */
    /*********************************************************************************/

    .button
    {
    display: inline-block;
    margin-top: 1.5em;
    padding: 1.50em 3em 1.50em 3em;
    background: #16a085;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 0.90em;
    color: #FFF;
    }

    .button:before
    {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    text-align: center;
    color: #FFF;
    }

    /*********************************************************************************/
    /* Footer */
    /*********************************************************************************/

    #footer-wrapper
    {
    overflow: hidden;
    padding: 0.0em 0em;
    background: #1E1B1A;
    }

    #footer
    {
    color: #ADADAD;
    }

    #footer .title h2
    {
    font-weight: 400;
    font-size: 1.2em;
    color: #FFF;
    }

    #footer .title
    {
    /* border-color: #2D2926 !important; */
    }

    #footer .style1 li
    {
    /*border-color: #2D2926 !important;*/
    }

    #footer .style1 a
    {
    font-size: 1em;
    color: #B1B1B1;
    }

    #box1
    {
    float: left;
    width: 154px;
    margin-right: 24px;
    padding-right: 30px;
    }

    #box2
    {
    float: left;
    width: 154px;
    margin-left: 24px;
    padding-right: 30px;
    padding-left:0px;
    }

    #box3
    {
    float: right;
    width: 254px;
    padding-left: 40px;
    }

    Tuesday, April 14, 2020 4:29 AM

Answers

  • User-1330468790 posted

    Hi sking,

     

    I'm using a 2 column template. I'm not sure how to move the sidebar to the right of the main content so that I can expand expand the width of the main content.

    This can be solved by adding following modification on CSS style:

    1. Expand the width property to 100% for the ".container" class  

    .container {
                width: 100%;
                margin: 0px auto;
            }

    2. Take either one from below modifications

     #sidebar {
                float: right; 
                width: 250px; //delete this
                padding: 3em 0em 0em 0em;
            }
    

    OR

    <div style="float:right; font-weight: normal; font-size: 9px; font-family: Tahoma; padding: 0; margin: 0; border: 0; text-align: center; background: transparent; color: #EEEEEE; width: 150px;" id="mlcalcWidgetHolder">
                            <script type="text/javascript"> document.write(unescape("%3Cscript src='//www.mlcalc.com/widget-narrow.js' type='text/javascript'%3E%3C/script%3E"));</script>
                            <a href="https://www.mlcalc.com/" rel="nofollow" style="font-weight: normal; font-size: 9px; font-family: Tahoma; color: #EEEEEE; text-decoration: none;">www.mlcalc.com</a>
                        </div>

    Reason:

    The layout of your project is shown as below. However, the width of the "page" is not big enough so that there are some spaces outside the right border of the "Page" section.

    Moreover, the calculator does not take the whole space of the "SideBar" section as the width you set is not wide too and it is also located in the left side inside the "SideBar" section .

    As I suggested, the sidebar(calculator) could move to the most right hand side by solving the "width" and "location" problem.

     

    I would also like to understand how to control the amount of white space between the top of where my content starts and the black bar below nav menu bar as well as the space between the bottom of the content and where the bottom brown part starts.

    I think you are still in the process of design the CSS style which will control the space between different parts of the HTML file.

    What I can suggest is to use the debugger of the browser (Press F12).

    Inside the debugger page, you could find that there is a tab called "Elements" where you could select a specific element/part in the page and check the style properties. You can even change the property in debugger and see the corresponding change immediately.

      

    Hope this can help you.

    Best regards,

    Sean 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 15, 2020 6:21 AM

All replies

  • User-1330468790 posted

    Hi sking,

     

    I'm using a 2 column template. I'm not sure how to move the sidebar to the right of the main content so that I can expand expand the width of the main content.

    This can be solved by adding following modification on CSS style:

    1. Expand the width property to 100% for the ".container" class  

    .container {
                width: 100%;
                margin: 0px auto;
            }

    2. Take either one from below modifications

     #sidebar {
                float: right; 
                width: 250px; //delete this
                padding: 3em 0em 0em 0em;
            }
    

    OR

    <div style="float:right; font-weight: normal; font-size: 9px; font-family: Tahoma; padding: 0; margin: 0; border: 0; text-align: center; background: transparent; color: #EEEEEE; width: 150px;" id="mlcalcWidgetHolder">
                            <script type="text/javascript"> document.write(unescape("%3Cscript src='//www.mlcalc.com/widget-narrow.js' type='text/javascript'%3E%3C/script%3E"));</script>
                            <a href="https://www.mlcalc.com/" rel="nofollow" style="font-weight: normal; font-size: 9px; font-family: Tahoma; color: #EEEEEE; text-decoration: none;">www.mlcalc.com</a>
                        </div>

    Reason:

    The layout of your project is shown as below. However, the width of the "page" is not big enough so that there are some spaces outside the right border of the "Page" section.

    Moreover, the calculator does not take the whole space of the "SideBar" section as the width you set is not wide too and it is also located in the left side inside the "SideBar" section .

    As I suggested, the sidebar(calculator) could move to the most right hand side by solving the "width" and "location" problem.

     

    I would also like to understand how to control the amount of white space between the top of where my content starts and the black bar below nav menu bar as well as the space between the bottom of the content and where the bottom brown part starts.

    I think you are still in the process of design the CSS style which will control the space between different parts of the HTML file.

    What I can suggest is to use the debugger of the browser (Press F12).

    Inside the debugger page, you could find that there is a tab called "Elements" where you could select a specific element/part in the page and check the style properties. You can even change the property in debugger and see the corresponding change immediately.

      

    Hope this can help you.

    Best regards,

    Sean 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 15, 2020 6:21 AM
  • User-1767698477 posted

    Sean,

    Thanks for your information. I was able to modify my page by making some adjustments:

    #sidebar
    {
    float: right;
    /*width: 250px;*/
    padding: 2em 8em 0em 0em;
    }

    content
    {
    float: left;
    width: 890px;  <--- this was 820 px before and I bumped it up to 890px
    padding: 0em 2em 0em 10em;
    }  

    As you can see I"m using the 10em to give a good margin on the left side.

    You can view my page here at

    http://www.mortgageloanapply.com

    You can view the calculator by logging in as testuser testuser

    Friday, April 17, 2020 5:54 AM
  • User-1330468790 posted

    Hi sking,

      

    I am glad to see that you are able to modify the page to change the position of the side bar.

    If you find that the answer does help you to solve the problem, I suggest you could mark the answer which is right and helpful. This will help other people who faces the same issue to find the right answer faster.

     

    Best regards,

    Sean

    Saturday, April 18, 2020 3:41 AM