CODEWITHSUNDEEP
htmlcssruby-on-rails
Vito
Vito

Reputation: 786

Remove spacing with css (main and side divs)

I have the following problem in a Rails app (but the problem is about the css): In my css , i have two divs: one for the main content and the other for the side (column menu) content. The problem is: when i insert the side content , it pushes bottom the content of the main div. I explain better with immages.

Image 1:

enter image description here

Image 2:

enter image description here

I want to fix this thing. So i want to remove the blank space but i want to have all the menu liks. How can i do this?

My application.html.erb:

<!DOCTYPE html>

<html>

    <head>

      <title>name</title>

      <%= stylesheet_link_tag   "application", :media => "all" %>

        <%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>

      <%= javascript_include_tag "application" %>

      <%= csrf_meta_tags %>

    </head>



    <body class="<%= controller.controller_name %>">

        <div id="banner">

             <%= @page_title || "name" %>

        </div>



        <div id="columns">

            <div id="side"> 
            <ul class="nav nav-pills nav-stacked">
                <li><a href="#"><i class="fa fa-home fa-fw"></i>Home</a></li>
                <li><%= link_to "Nuovo contatto", companies_new_path ,class: "glyphicon glyphicon-pencil"%></li>
                <li><a href="http://www.jquery2dotnet.com"><i class="fa fa-file-o fa-fw"></i>Pages</a></li>
                <li><a href="http://www.jquery2dotnet.com"><i class="fa fa-bar-chart-o fa-fw"></i>Charts</a></li>
                <li><a href="http://www.jquery2dotnet.com"><i class="fa fa-table fa-fw"></i>Table</a></li>
                <li><a href="http://www.jquery2dotnet.com"><i class="fa fa-tasks fa-fw"></i>Forms</a></li>
                <li><a href="http://www.jquery2dotnet.com"><i class="fa fa-calendar fa-fw"></i>Calender</a></li>
                <li><a href="http://www.jquery2dotnet.com"><i class="fa fa-book fa-fw"></i>Library</a></li>
                <li><a href="http://www.jquery2dotnet.com"><i class="fa fa-pencil fa-fw"></i>Applications</a></li>
                <li><a href="http://www.jquery2dotnet.com"><i class="fa fa-cogs fa-fw"></i>Settings</a></li>
            </ul>
        </div>



         <div id="main">

                <% if notice %>

                <p class="alert alert-success"><%= notice %></p>

                <% end %>

                <% if alert %>

                    <p class="alert alert-danger"><%= alert %></p>

                <% end %>



             <%= yield %>


         </div>





        </div></div> <!-- FINE DIV BODY -->

     </body>

 </html>

My application.css

    /*

 * This is a manifest file that'll be compiled into application.css, which will include all the files

 * listed below.

 *

 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,

 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.

 *

 * You're free to add application-wide styles to this file and they'll appear at the top of the

 * compiled file, but it's generally better to create a new file per style scope.

 *

*= require fullcalendar

 *= require_self

 *= require jquery.ui.all

 *= require_tree .







*/



#banner {

  background: #282827;

  padding: 10px;

  border-bottom: 2px solid;

  font: small-caps 20px/20px "Times New Roman", serif;

  color: #141414;

  text-align: left;



  img {

    float: left;

  }

}



#notice {

  color: #000 !important;

  border: 2px solid red;

  padding: 1em;

  margin-bottom: 2em;

  background-color: #f0f0f0;

  font: bold smaller sans-serif;

}



#columns {

  background: #646462;



  #main {

    margin-left: 17em;

    padding: 2em;

    background: white;

  }



  #side {
        color: red;

    float: left;

    padding: 1em 2em;

    width: 13em;

    background: #646462;



    ul {

      padding: 0;



      li {

        list-style: none;



        a {

          color: #bfb;

          font-size: small;

        }

      }

    }

  }

}

Upvotes: 1

Views: 66

Answers (2)

BroiSatse
BroiSatse

Reputation: 44725

Try changing this bit:

#main {
    margin-left: 17em;
    padding: 2em;
    background: white;
  }

To:

#main {
    overflow: hidden;
    padding: 2em;
    background: white;
  }

overflow: hidden will trigger BFC (block formatting context) and will prevent floating side div to change your main div content flow.

Upvotes: 1

anand kulkarni
anand kulkarni

Reputation: 156

make side menu position as fixed. so it will not overlap on main div. may be this will help you

Upvotes: 2

Related Questions