Web page not responsive: how to use position absolute and relative?


Tags: html,css3,css-position

Problem :

I made a simple website however the divs are not appearing properly

  • I have a div section-one that is position: relative [green] and I a second div called silver-break-bar div that is position: absolute inside.

I also have a section-two div [red color] below section-one. The issue is three fold.

  1. The section-two is displaying over the green div. Why Doesn't is display below the green div? I've even made body {height: auto}

![enter image description here

  1. The second issue is I've made my red-car img padding:0 margin:0 so i doesn't go outside of page, however the div is still not wrapping around image?

  2. The third issue is when I resize the browser the pink div is covering up the headline? Why is that?

Update: Finally, I am trying to create divs that display underneath each other i.e section-one, section-two, section-three similar to this. enter image description here

UPDATE: Here is the code, sorry I forget to add it!

HTML

    <!DOCTYPE html>
<html>
<head>
    <title>Responsive Navigation Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
    <link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
    <script src="js/jquery-3.0.0.min.js"></script>
    <script>
        $(function() {
            var pull        = $('#pull');
                menu        = $('nav ul');
                menuHeight  = menu.height();

            $(pull).on('click', function(e) {
                e.preventDefault();
                menu.slideToggle();
            });

            $(window).resize(function(){
                var w = $(window).width();
                if(w > 320 && menu.is(':hidden')) {
                    menu.removeAttr('style');
                }
            });
        });
    </script>
</head>

<body>
<div id='main-header'>
    <nav class="clearfix">
        <ul class="clearfix">
            <li><a href="#">Home</a></li>
            <li><a href="#">How ItS</a></li>
            <li><a href="#">Why Us</a></li>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <a href="#" id="pull">Menu</a>
    </nav>
</div>

    <div id='section-one'>
            <h1> Order anything from anywhere in Karachi instantly at your doorstep. </h1>
                <div class='silver-line-break'></div>
                <div id='fee-estimate-box'>
                    <form id='fee-estimate-form' action="#">
                            <legend>Delivery Fee Calculator</legend>
                            <span>First name: </span> <input type="text" name="firstname" value="Mickey">
                            <span>Last name: </span> <input type="text" name="lastname" value="Mouse">
                            <input type="submit" value="Submit">
                    </form>
                </div>                  <div class='silver-break-bar'>
                    <img id='red-car' src="img/red-car.png" alt="" height="60%" width="30%;">
                </div>
    </div>

    <div id='section-two'>
        <p>section two div</p>
    </div>
</body>
</html>

CSS

/* Basic Styles */
* {
   margin-top:  0px;
   padding: 0;
}
body {
    margin: 0;
  height: auto;
    background-color: #ece8e5;
}

/***** NAVIGATION ***/
/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

nav {
    height: 40px;
    width: 100%;
    background: white;
    font-size: 11pt;
    font-family: 'PT Sans', Arial, sans-serif;
    font-weight: bold;
    position: relative;
    border-bottom: 1px solid #283744;

}
nav ul {
    padding-right: :5px;
    margin: 0 auto;
    width: 500px;
    height: 40px;
  float: right;
  margin-right: 0%;
}
nav li {
    display: inline;
    float: left;
}
nav a {
    color: black;
    display: inline-block;
    width: 85px;
    text-align: center;
    text-decoration: none;
    line-height: 40px;
    /*text-shadow: 1px 1px 0px #283744;*/
}
nav li a {
    /*border-right: 1px solid #576979;*/
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
nav li:last-child a {
    border-right: 0;
}
nav a:hover, nav a:active {
    background-color: #8c99a4;
}
nav a#pull {
    display: none;
}

/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
    nav {
        height: auto;
    }
    nav ul {
        width: 100%;
        display: block;
        height: auto;
      float: none;
    }
    nav li {
        width: 50%;
        float: left;
        position: relative;
    }
    nav li a {
        border-bottom: 1px solid #576979;
        border-right: 1px solid #576979;
    }
    nav a {
        text-align: left;
        width: 100%;
        text-indent: 25px;
    }
}

/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
    nav {
        border-bottom: 0;
    }
    nav ul {
        display: none;
        height: auto;
    }
    nav a#pull {
        display: block;
        background-color: white;
        width: 100%;
        position: relative;
    }
    nav a#pull:after {
        content:"";
        background: url('../img/nav-icon.png') no-repeat;
        width: 30px;
        height: 30px;
        display: inline-block;
        position: absolute;
        right: 15px;
        top: 10px;
    }
}

/*Smartphone*/
@media only screen and (max-width : 320px) {

  nav ul {
    float: none;
  }

    nav li {
        display: block;
        float: none;
        width: 100%;
    }
    nav li a {
        border-bottom: 1px solid #576979;
    }
}

#section-one {
    position: absolute;;
    background-color:  #80be05;
    margin-top: 0 auto;
    padding: 0;
  height: 85%;

}

#section-one h1 {
  position: relative;
    margin: 0px;
    padding: 2%;
    font-family: 'TeX Gyre Adventor', 'sans-serif';
    font-size: 57px;
    text-align: center;
    color: white;
    text-shadow: 0px 1px;
}

#section-one .silver-line-break {
    position: absolute;
    width: 100%;
    height: 10%;
    top: 100%;
    background-color: silver;
    margin: 0 auto;
}

#section-two {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: red;
}
#section-one #red-car {
  position: absolute;
  display: inline-block;
  left: 75%;
  top: 60%;
  background-color: blue;
  padding: 0;
  margin: 0 auto;
}

#section-one #fee-estimate-box {
  background-color: pink;
  position: absolute;;
  width: 70%;
  height: 40%;
  top: 50%;
  left: 2%;
}


Solution :

well. i don't know where to start :) so many issues here

made a jsfiddle

  1. IF you want sections to go one after another and not over each other , DO NOT USE position:absolute EVER !
  2. you wrote somewhere margin-top:0 auto , that is not correct, margin-top has only one value , margin:0 auto is correct and means margin-top:0,margin-right:auto,margin-bottom:0,margin-left:auto
  3. .section-two ( the red line ), if you want it to be right after the navigation, why don't you put it after the nav in the html ?. if you don't want to use that, then yes....use position:absolute on that div. BUT i suggest you make your html easier to work with

let me know if it works

code :

#section-one {
    background-color:  #80be05;
    padding: 0;
    height: 100%;
    float:left;
    width:100%
   }

#section-one h1 {
    margin: 0px;
    padding: 2%;
    font-family: 'TeX Gyre Adventor', 'sans-serif';
    font-size: 57px;
    text-align: center;
    color: white;
    text-shadow: 0px 1px;
}

#section-one .silver-line-break {
    position: relative;
    width: 100%;
    height: 10px;
    float:left;
    background-color: silver;
    margin: 10px auto;
}

#section-two {
  position: relative;
  width: 100%;
  height: auto;
  float:left;
  background-color: red;
  padding:10px 0 5px;
}
#section-one #red-car {
  position: relative;
  float:right;
  background-color: blue;
  width:25%;
  height:100px;
}

#section-one #fee-estimate-box {
  background-color: pink;
  position: relative;;
  width: 70%;
  height: auto;
  float:left;
  margin-left:2.5%;
  margin-right:2.5%;


}

read more about CSS position here : CSS POSITION


    CSS Howto..

    css/html, how to scale and center a logo image

    How to Align text with respect to image css

    How do I vertical center text next to an image in html/css?

    Speechbubble tooltip in CSS - how to move the arrow

    How to make the html table on same line? Wordpress, woocommerce

    How to line up items of varied length in a resizable space in CSS?

    How to save the state of css background-color property change when navigating away from one menu to another

    How to mark up speedometer/gauge in HTML/CSS?

    How can I use JQuery toggle for multile DIVs?

    How to remove line between two diagonally opposite css scalene triangles?

    How to make IE respect max AND min-width [duplicate]

    How to remove an css style from a div ?

    How can I get jQuery or Javascript to change css based on the current url?

    How to inherit CSS Menu on each html page linked on Homepage without using any javascript and templates

    Safari displays font differently from other browsers -Set specific font-family for specific browser - How to change font smoothing for Safari [closed]

    How to change Image inside of CSS of a usercontrol

    Floating of Divs not exact. How to arrange them the right way?

    How do you change the font-size of a custom css style?

    How to adjust CSS to display correctly in IE 6?

    How to fix layout to browser window without scroll

    How to select an element that has id starting with a digit (css)?

    How to debug Font-Awesome icons?

    How do i place 4 headers from 1 div next to each other?

    Using Jquery to show and hide elements based on an input

    How can I make dynamic progress bar using just jquery?

    How to apply transition on div movement when upper disappears?

    How to get the bottom border to stretch fully across a page in CSS

    How to force Visual Studio to honor the BOM at the start of a UTF-8 encoded CSS file?

    CSS animations - How to toggle direction with one keyframes declaration

    How does tablesort.js create the sort indicator arrows