Reputation: 727

Menus not aligning in Center and aside overlapping

I have created a pen Here → https://codepen.io/codeispoetry/pen/NpKZpN but I am facing 2 challenges →

1 → You can see that the content in the right hand side aside is overlapping the footer. I tried to set height:auto to many elements but still that could not fix the issue.enter image description here

2 → I want that my menu items should be exactly in the middle of that top row. Centred Menu Items

Code Here →

 <!DOCTYPE html>
<html lang="en">
    <head>
        <!-- <meta charset="utf-8"> -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>Responsive Two Column Layout (Left Column Fluid)</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/style.css">
    </head>

    <body>
        <div class="max-width">

            <header>
               <div class="logo floating-inline">
                   <img src="https://s3.amazonaws.com/projectsts/generic/logo2.png" alt="">
               </div><!-- logo -->

               <nav class="floating-inline">
                  <ul class="nav inline-items">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">World</a></li>
                 </ul>
              </nav>
            </header>

            <div class="post-title">
                <h1>Responsive Two Column Layout Left Column → Fluid, Right Column → Adaptive.</h1>
            </div> <!-- post-title -->
            <div class="site-container">
                <main class="left-column">
                    <h2>Left Column (fluid)</h2>

                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>

                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>

                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>

                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
                </main>

                <aside class="right-column">
                    <h2>Right Column</h2>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>

                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>

                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>

                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>

                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
                </aside>
            </div>
            <footer>
                <p><a href="#">Contact Us</a> | <a href="#">FAQ</a> | <a href="#">Privacy Policy</a></p>
                <p>&copy;2017 Copyright Text Here</p>
            </footer>
        </div>
    </body>
</html>

CSS Here →

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

body { margin: 0; }
.max-width {max-width: 1400px; margin: 0 auto;}
.site-container, .post-title, footer, header { position: relative; margin: .5em; }
.left-column, .right-column,.post-title, footer, header {  border: 1px solid #ccc; padding: 1.25em; }
.left-column { margin-bottom: .5em; }
.floating-inline{display: inline-block;vertical-align: middle;}
.nav {
  list-style: none;
  margin-left: 0;
  margin-bottom: 0;
  padding-left: 0;
}
.nav > li,
.nav > li > a {
  display: inline-block;
  *display: inline;
  zoom: 1;
  text-decoration: none;
}
.inline-items {
  margin-top: 0;
}
.inline-items li {
  margin-left: 0;
  border-left: 1px solid black;
  padding-left: 10px;
  padding-right: 10px;
}
.inline-items li:first-child {
  margin-left: 0;
  border: none;
  padding-left: 0;
  padding-right: 10px;
}
.inline-items li:last-child {
  padding-right: 0;
}

/* MEDIA QUERIES */
@media screen and (min-width: 47.5em ) {
  .left-column { margin-right: 19.5em; }

    .right-column { position: absolute; top: 0; right: 0; width: 18.75em; }
}

Please guide me where I am going wrong.

Upvotes: 0

Answers (3)

Anshul

Reputation: 128

header{
    height:100px;
}
nav{
    float:left;
    width:50%;
    margin:20px auto;
}
.logo{
    float: left;
    width: 40%;
}

Upvotes: 0

Obed Parlapiano

Reputation: 3732

solution to first problem

https://codepen.io/obedparla/pen/xqxBXW

Basically the issue is the way you're making the divs "float" next to each other. You are forcing them to stay in place by using absolute positioning. Absoulute positioned elements don't respect the boxes or spaces of other elements, they're on top of all of them.

.clear{
  clear: both;
}
.left-column{
  width: 70%;
  float: left;
  margin: 0;
}

.right-column{
  width: 28%;
  float: right;
}

I've added the following to your css, at the end, to override your current css. It sets the elements to float, and the corrects widths, giving the same effect but without your issue. This is the correct way of doing it. You can also check flex-box.

You'll also need to

<div class="clear"></div>

between the floating elements and the footer, to clean the floats (otherwise they'll overlap on the footer).

solution to second problem

Since you're using inline-blocks to align the logo and the text, you'd need to set the width of each of the elements.

The working pen is here: https://codepen.io/obedparla/pen/xqxBXW

The only thing I added was:

nav.floating-inline{
 width: 70%;
}

ul.nav.inline-items{
  text-align: center;
}

By giving a width to the floating inline elements (the nav) you can then use text-align center and they'll be centered in between those 70% width.

You can play around with this to achieve the exact result you want. Giving the logo a bigger width and such.

For the first issue, the content is not overlaping the footer your codepen. Could you submit a screenshot if that's still the case?

Upvotes: 3

Manoj Balakonda

Reputation: 138

<nav class="floating-inline" style="width: 80%;text-align: center;">

I hope this helps :)

Upvotes: 0

Menus not aligning in Center and aside overlapping

Answers (3)

Related Questions