CODEWITHSUNDEEP
htmlcss
FrankK
FrankK

Reputation: 511

html and css placing a non-fixed div between two fixed divs

I'm trying to build a website with 4 main divs (more to come later), 3 of which are fixed, so they dont move when i scroll, and one of them is not fixed. i've been going at it for around 6 hours and 30 minutes straight, googled for possible answers, checked youtube and spent atleast 2 hours looking at stackoverflow posts, none of which really pointed me in the right direction.

design im looking to get:

design

source (html):

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="scripts.js"></script>
    <title>Title</title>
</head>
<body>

    <div class="menu">
        <a href="#"></a>
    </div>

    <div class="contact"></div>

    <div class="upper"></div>

    <div class="main">
        <div class="paragraph"></div>
        <div class="paragraph"></div>
        <div class="paragraph"></div>
        <div class="paragraph"></div>
    </div>
</body>
</html>

source (css):

/**/
html,body{
    height: 100%;
}

body {
  background-image: url("background.jpg");
}

div {
    margin: 0px;
}

.menu {
  background-color:lightgray;
  color:black;
  width: 200px;
  height: 100%;
  top:200px;
  right: 0;
  text-align: center;
  position:fixed;
}

.contact {
  background-color:lightgray;
  color:black;
  width: 200px;
  height: 100%;
  top: 200px;
  left: 0;
  text-align: center;
  position:fixed;
}

.upper {
    background-color: black;
    width: 100%;
    height: 200px;
    position:fixed;
    top:0px;
    left:0px;
}

.main {
    background-color: green;
    width: 100%;
    margin-top:200px;
    height: 200vh;
    left: ;
}

.paragraph {
    background-color: red;
    width: 100%;
    height: 50vh;
}

i tried changing the width of the .main div, but regardless of what i try the div either goes under the .contact or .menu div

the .paragraph divs go into to the .main div, to hold some text and images once the .main div is properly positioned. the sizes of the divs in my source arent completely like they are in my design yet cus i kept trying thing to maybe solve my problem.

the .js file is currently still empty so i didnt post any source of it.

Any help is welcome: links; sources; comments; if you know something that might point me into the right direction, please post it!

edit: i tried using a wrapper, but that didnt work out too wel for me, i probably did something wrong, i posted the source that looks the most like my design when i open in in browser.

jsfiddle: http://jsfiddle.net/zt1Lyaop/

Upvotes: 0

Views: 761

Answers (2)

Steyn
Steyn

Reputation: 1321

I ignored your existing code and made a new, HTML5 and responsive way of creating such a layout. I hope this helps you in understanding this concept better http://jsfiddle.net/7k9vhk4r/2/

The key is using fixed and relative positioning, together with creating offsets based on percentages.

Upvotes: 1

Apolo
Apolo

Reputation: 4050

I just changed this:

  • added margin:0 to body

  • Change .main rules to :

    /*width: 100%;*/
margin: 200px 200px 0;
height: 2000px; /* to make it big */
/*left: ;*/

See the demo FULL PAGE

body {

  background-image: url("background.jpg");
  margin:0;
}

div {

  margin: 0px;

}

.menu {

  background-color: lightgray;

  color: black;

  width: 200px;

  height: 100%;

  top: 200px;

  right: 0;

  text-align: center;

  position: fixed;

}

.contact {

  background-color: lightgray;

  color: black;

  width: 200px;

  height: 100%;

  top: 200px;

  left: 0;

  text-align: center;

  position: fixed;

}

.upper {

  background-color: black;

  width: 100%;

  height: 200px;

  position: fixed;

  top: 0px;

  left: 0px;

}

.main {

  background-color: green;

  /*width: 100%;*/

  margin: 200px 200px 0;

  height: 2000px;

  /*left: ;*/

}

.paragraph {

  background-color: red;

  width: 100%;

  height: 50vh;

}
<div class="menu">
  <a href="#"></a>
</div>

<div class="contact"></div>

<div class="upper"></div>

<div class="main">
  <div class="paragraph"></div>
  <div class="paragraph"></div>
  <div class="paragraph"></div>
  <div class="paragraph"></div>
</div>

Upvotes: 1

Related Questions