How do I create VERTICAL Divs and nav-like bar at the left?

We are in the end process of finishing our website project for our class, and I am trying to make the view document page of our website, which should look something like the paint image attached.

View Page prototype image; follow the link because stackoverflow needs reputation to embed images :/

I already have a header and footer that I'm going to use from the homepage I made. All I'm trying to do now is to create the inner div sections as you can see in the image, and I want them to be like that vertical. I've been searching for samples online, but I can't find what I need.

basically the left div like section is where the documents created will appear as links so that the user would be able to choose from them to view. the website we are making is pretty much a collaboration website where teams of engineers log on to the website, the system will match them to the team name they registered with, and each team will have their own private workspace of the view page doc that im in the process of trying to create now. so each team will have different links at the left side and so its a "dynamic" or "changing" div section. thats why i said its supposed to be like a navigation bar, but isnt one at the same time because it depends on each team's amount of private created documents.

in the middle is where they would be able to view the documents when they click on the link to view from the homepage or from this nav like bar in this view page.

at the right is where we plan to have a team chat . i believe here is where we insert a plugin team chat? unless its an easy thing to start one from scratch :D?

here is the HTML code of whats so far a header, footer, and a middle div section. CSS follows

HTML:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>doc view</title>
    <link rel="SHORTCUT ICON" HREF="images/logo.ico">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap CSS -->
    <link href="css/homepageStyle.css" rel="stylesheet">
    <script src="javascript/jquery.js"></script>
    <script src="javascript/bootstrap.min.js"></script>
    <!-- Bootstrap JavaScript -->
</head>

<body>
    <header>
        <div class="container">
            <a href=""><img class="logoImage" border="0" alt="logo" src="images/logo.gif"></a>
        </div>
    </header>
    <div class="ContentSection1">
        <div class="container">
            <div class="col-lg-5 col-sm-6">
            </div>
        </div>
    </div>
    <footer>
        <div class="container">
            <div class="col-lg-12">
            </div>
        </div>
    </footer>
</body>

</html>

CSS:

header {
    padding: 20px 0;
    background: url(../images/HPbg.jpg) no-repeat 100% 0%; 
    text-align: center;
}

footer {
    padding: 25px 0;
    background-color: #99CCCC;
    text-align: center;
}

.logoImage { 
    position: absolute;
    left: 47%;
    top: 3.5%;
    z-index: 1;
}

.ContentSection1 {
    padding: 50px 0;
    background-color: AliceBlue ;
}

body, html {
    width: 100%;
    height: 100%;
}

thanks in advance!

Answers


You can use bootstrap grid for this:

HTML:

<header>
   ....
</header>
<div class="col-md-12">
  <div class="col-md-2 col-sm-2 left"> ... </div>
  <div class="col-md-8 col-sm-8 center"> ... </div>
  <div class="col-md-2 col-sm-2 right"> ... </div>
</div>
<footer>

CSS:

header {
    height: 50px;
    background-color: green; 
}
.left {
    background-color: yellow;
    height:80px; /* not mandatory */
}
.center {
    background-color: blue;
    height: 100px; /* not mandatory */
}
.right {
    background-color: gray;
    height: 50px; /* not mandatory */
}
.col-md-12 {
    height: 100px; /* not mandatory */
    padding: 0px;
}
footer {
    background-color: teal;
    height: 50px;
}

Additionally, you can simply do this.

<div class="col-md-3>
<ul class=" nav nav-pills nav-stacked ">
  <li class="active "><a href="# ">Home</a></li>
  <li><a href="# ">Menu 1</a></li>
  <li><a href="# ">Menu 2</a></li>
  <li><a href="# ">Menu 3</a></li>
</ul>
</div>
<div class="col-md-6 ">
Center column
</div>
<div class="col-md-3>
    Right column
</div>

Need Your Help

why does code throw exception from an environnement iis to another

c# asp.net-mvc iis

i deploy asp mvc web application in my local iis does work correctly, but when i moved to another iis start throwing exception not thrown before, i do not know whether there's nmatching in configur...

Issue with array need to adjust string

php arrays string

Hello there guys so first of all, I have this code: