Skip to main content
F
focused_Gemstone157F
Known Participant
February 10, 2017
Answered

Divs not lining up

  • February 10, 2017
  • 3 replies
  • 1373 views

This is the layout I am trying to design:

header

<row1>

<col 1> image      xxx       <col2>       image

<Row2>

<col1> menu               <col 2)  content

footer      

A pretty basic standard layout, however, why is the menu moving up between the space between col1 and col2 of row 1 (marked as XXX.?

Hope this makes sense.

D

    This topic has been closed for replies.
    Correct answer osgood_

    Maybe the below would help:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8"/>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Page Title</title>

    <style>

    * {

    box-sizing: border-box;

    }

    body {

    font-family: Times, "Times New Roman", "serif";

    background-color: #FFFFFF;

    }

    .container {

    width: 80%;

    max-width: 1024px;

    margin: 0 auto;

    border: 1px solid #000;

    }

    .float_left {

    float: left;

    }

    .float_right {

    float: right;

    }

    header h1 {

    margin:0;

    padding: 30px 0;

    font-size: 18px;

    color: #92B8DE;

    font-weight: 400;

    text-align: center;

    overflow: hidden;

    }

    .corporate_logos {

    overflow: hidden;

    padding: 15px 30px;

    }

    aside {

    float: left;

    width: 25%;

    background-color: #8999BB;

    margin: 0;

    padding: 0;

    }

    .side_menu {

    padding: 30px;

    }

    .side_menu ul {

    margin: 0;

    padding: 0;

    }

    .side_menu li {

    margin: 0;

    padding: 0;

    list-style: none;

    }

    .side_menu a {

    text-decoration: none;

    color: #fff;

    display: block;

    padding: 5px 0;

    }

    .content {

    float: left;

    width: 75%;

    padding: 0 35px;

    }

    footer {

    clear: both;

    padding: 10px;

    text-align: center;

    }

    </style>

    </head>

    <body>

    <div class="container">

    <header>

    <h1>PREVENT LAW FOR CANADIAN PROFESSIONALS</h1>

    <div class="corporate_logos">

    <img  src="images/scales-preventive.gif" alt="Scales of Justice" class="float_left">

    <img src="images/preventivelawreporter.gif" alt="Law Reporter" class="float_right">

    </div>

    <!-- end corporate_logos -->

    <nav class="top_menu">

    <ul>

    <li><a href="#">Elementary & Secondary</a></li>

    <li><a href="#">Post-Secondary</a></li>

    <li><a href="#">Research Services</a></li>

    <li><a href="#">Research Login</a></li>

    <li><a href="#">Subscribe </a></li>

    <li><a href="#">Renew</a></li>

    <li><a href="#">Contact Us</a></li>

    </ul>

    </nav>

    <!-- end top_nav -->

    </header>

    <!-- end header -->

    <div class="main_content_wrapper">

    <aside>

    <nav class="side_menu">

    <ul>

    <li><a href="#">Login</a></li>

    <li><a href="#">Research Services</a></li>

    <li><a href="#">Testimonials</a></li>

    <li><a href="#">Links</a></li>

    <li><a href="#">Subscribe</a></li>

    <li><a href="#">Renew</a></li>

    </ul>

    </nav>

    <!-- end main_menu -->

    </aside>

    <main class="content">

    <h3>MAIN CONTENT should be to the right of the top/bottom sidebars</h3>

    </main>

    <!-- end content -->

    </div>

    <!-- end main_content_wrapper -->

    <footer>

    <h3>Footer - Preventive Law Reporter</h3>

    </footer>

    <!-- end footer -->

    </div>

    <!-- end container -->

    </body>

    </html>

    3 replies

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    February 13, 2017

    Reply #4 is as close as you will get as a correct answer.

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Niharika Jha
    Adobe Employee
    Niharika Jha
    Adobe Employee
    February 13, 2017

    Hi,

    Can you try using "Apply Source Formatting" and see if this fixes the issue your are facing? If not then please share your code and the CSS files your are using to format the layout.

    Regards,

    Niharika Gupta

    F
    focused_Gemstone157FAuthor
    Known Participant
    February 13, 2017

    Thank you so much! 

    Here it is:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Preventive Law Reporter</title>
    <link rel="stylesheet" href="stylestest.css">
    <link rel="stylesheet" href="js/slicknav.css">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>

    <body>
    <div id="container">
      <header>
        <div class="row">
          <div class="col">
            <h1> PREVENTIVE  LAW  FOR  CANADIAN  PROFESSIONALS</h1>
          </div>
        </div>
        <div class="row">
          <div class="col1-image"> <img  src="images/scales-preventive.gif" alt="Scales of Justice"> </div>
          <div class="col2-image"> <img src="images/preventivelawreporter.gif"> </div>
        </div>
      </header>
      <ul id="menu">
        <li><a href="#">Elementary & Secondary</a></li>
        <li><a href="#">Post-Secondary</a></li>
        <li><a href="#">Research Services</a></li>
        <li><a href="#">Research Login</a></li>
        <li><a href="#">Subscribe </a></li>
        <li><a href="#">Renew</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
      </header>
      <main>
        <div class="row">
          <div class="col-sidebar">
            <ul id="mainmenu">
              <li><a href="#">Login</a></li>
              <li><a href="#">Research Services</a></li>
              <li><a href="#">Testimonials</a></li>
              <li><a href="#">Links</a></li>
              <li><a href="#">Subscribe</a></li>
              <li><a href="#">Renew</a></li>
            </ul>
          </div>
          <div class="row">
            <div class="col-sidebarbottom">This should be under the blue sidebar but with a white background.
              Contact us:<br>
              By Email:<br>
             
              <br>
              By Phone:<br>
              Telephone: <br>
              Fax: (<br>
              <br>
              By Mail:<br>
              </div>
          </div>
          <div class="col-main">MAIN CONTENT should be to the right of the top/bottom sidebars </div>
        </div>
      </main>
      <footer>
        <h3>Footer - Preventive Law Reporter</h3>
      </footer>
      <script src="js/jquery-1.11.3.min.js"></script>
      <script src="js/jquery.slicknav.js"></script>
      <script>
      $(function(){
       $('#menu').slicknav();
      });
    </script>
    </div>
    </body>
    </html>

    CSS:

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

    /*Desktop Global View*/

    body {font-family: Times, "Times New Roman", "serif"; background-color: #FFFFFF;}
    #container {max-width: 1024px; border: solid; border-color: #000000; border-width: 1px; padding-top: 1%; margin-left: 20%; margin-right: 20%; padding-left: 0%; padding-bottom: 1%; padding-right: 2%; align-content: center; height: inherit;
    }

    header

    {height: 120px; }

    h1 {
    color: #8ba5ba;
    text-align: center;
    font-size: 100%;
    font-weight: 400;

    }
    .col1-image {float: left; max-width: 80%; }

    .col2-image {float: right; max-width: 80%; }
    .row:after { clear:both;}

    #menu {
    display: none;
    }
    .slicknav_menu {
    display: none;
    }

    .col-sidebar {
    background-color: #8999bb;
    width: 100px;
    float: left;
    }

    .col-main {
    background-color: #fff;
    margin-left: 25px;
    float: right;
    height: "600px"
    }

    #mainmenu ul {
        margin: 0;
       padding: 0;
    color: #fff;
    text-align: left;

    }

    #mainmenu li  {
      font-size: 12px;
    list-style-type: none;
    color: #fff;
    font-family: Times, "Times New Roman", "serif";
    line-height: 22px;
    text-align: left;
     
    }
    #mainmenu li a {
      text-decoration: none;
      color: #fff;
    text-align: left;
    }

    .row:after { clear:both;}

    /*Tablet View*/
    @media (max-width: 768px)
    {}

    /*Mobile View*/
    @media (max-width: 400px)
    {

    .slicknav_menu {
    display: block;
    }
    h1 {
    color: #8ba5ba;
    text-align: center;
    font-size: 60%;
    font-weight: 400;}



    #mainmenu {
    display: none;
    }
    img {
        max-width: 60%;
        max-height: 60%;
    }
    .heading {
    color: #8ba5ba;
    font-size: 60%;
     
    font-weight: 100;
    max-width: 60%;
    }
     

    O
    osgood_Correct answer
    Legend
    February 13, 2017

    Maybe the below would help:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8"/>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Page Title</title>

    <style>

    * {

    box-sizing: border-box;

    }

    body {

    font-family: Times, "Times New Roman", "serif";

    background-color: #FFFFFF;

    }

    .container {

    width: 80%;

    max-width: 1024px;

    margin: 0 auto;

    border: 1px solid #000;

    }

    .float_left {

    float: left;

    }

    .float_right {

    float: right;

    }

    header h1 {

    margin:0;

    padding: 30px 0;

    font-size: 18px;

    color: #92B8DE;

    font-weight: 400;

    text-align: center;

    overflow: hidden;

    }

    .corporate_logos {

    overflow: hidden;

    padding: 15px 30px;

    }

    aside {

    float: left;

    width: 25%;

    background-color: #8999BB;

    margin: 0;

    padding: 0;

    }

    .side_menu {

    padding: 30px;

    }

    .side_menu ul {

    margin: 0;

    padding: 0;

    }

    .side_menu li {

    margin: 0;

    padding: 0;

    list-style: none;

    }

    .side_menu a {

    text-decoration: none;

    color: #fff;

    display: block;

    padding: 5px 0;

    }

    .content {

    float: left;

    width: 75%;

    padding: 0 35px;

    }

    footer {

    clear: both;

    padding: 10px;

    text-align: center;

    }

    </style>

    </head>

    <body>

    <div class="container">

    <header>

    <h1>PREVENT LAW FOR CANADIAN PROFESSIONALS</h1>

    <div class="corporate_logos">

    <img  src="images/scales-preventive.gif" alt="Scales of Justice" class="float_left">

    <img src="images/preventivelawreporter.gif" alt="Law Reporter" class="float_right">

    </div>

    <!-- end corporate_logos -->

    <nav class="top_menu">

    <ul>

    <li><a href="#">Elementary & Secondary</a></li>

    <li><a href="#">Post-Secondary</a></li>

    <li><a href="#">Research Services</a></li>

    <li><a href="#">Research Login</a></li>

    <li><a href="#">Subscribe </a></li>

    <li><a href="#">Renew</a></li>

    <li><a href="#">Contact Us</a></li>

    </ul>

    </nav>

    <!-- end top_nav -->

    </header>

    <!-- end header -->

    <div class="main_content_wrapper">

    <aside>

    <nav class="side_menu">

    <ul>

    <li><a href="#">Login</a></li>

    <li><a href="#">Research Services</a></li>

    <li><a href="#">Testimonials</a></li>

    <li><a href="#">Links</a></li>

    <li><a href="#">Subscribe</a></li>

    <li><a href="#">Renew</a></li>

    </ul>

    </nav>

    <!-- end main_menu -->

    </aside>

    <main class="content">

    <h3>MAIN CONTENT should be to the right of the top/bottom sidebars</h3>

    </main>

    <!-- end content -->

    </div>

    <!-- end main_content_wrapper -->

    <footer>

    <h3>Footer - Preventive Law Reporter</h3>

    </footer>

    <!-- end footer -->

    </div>

    <!-- end container -->

    </body>

    </html>

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    February 10, 2017

    Please show us the code.

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices