Clever Geek Handbook

How can I add 3 columns in a html page using css?

I want to add 3 vertical columns to the html page:

#navbar

{width:15%}

#content

{width:70%}

#right

{width:15%}

This is the stylesheet I used for this:

#container {
  position: fixed;
  float: none;
  overflow: visible;
  height: auto;
  width: 100%;
  border: none;
  margin-left: 0%;
  margin-right: 0%;
  padding-left: 0%;
  padding-right: 0%;
}

#navbar {
  float: left;
  display: block;
  position: relative;
  text-align: justify;
  width: 15%;
  background: black;
}

#content {
  float: none;
  display: block;
  position: static;
  background-size: 100%;
  width: 75%;
  margin-left: 15%;
  right: 10%;
  bottom: 0;
  padding: 0;
}

#right {
  float: right;
  display: block;
  position: static;
  text-align: justify;
  width: 10%;
  background: black;
  left: 85%;
}

.page {
  position: fixed;
  margin-left: 0%;
  margin-right: 0%;
  padding-left: 0%;
  padding-right: 0%;
}
      

        
        
        
      

    
<div class="page">
  <div id="container">
    <div id="navbar">
      navbar
    </div>
    <div id="content">
      content
    </div>
    <div id="right">
      <form action="SessionDestroy" method="POST">
        right panel
      </form>
    </div>
  </div>
</div>
Run codeHide result


Even though the margin is set to 0% every time I run this code. There container

is a gap between the main display and the space bar.

Displaying a page in web view

Space between display and container

So how can I solve this problem?

+3


source to share


3 answers


Html

<body>
<div class="page">
        <div id = "container">
            <div id = "navbar">
                navbar
            </div>
            <div id = "content">
                content
            </div>
            <div id = "right">
                <form action="SessionDestroy" method="POST">
                    right panel
                </form>
            </div>
        </div>
    </div>
</body>


CSS

    body{margin:0px;}
#container{
            position: fixed;
            float:none;
            overflow: visible;
            height: auto;
            width: 100%;
            border: none;
            margin-left: 0%;
            margin-right: 0%;
            padding-left: 0%;
            padding-right: 0%;

    }
    #navbar{
            float: left;
            display:block;
            position:relative;
            text-align: justify;
            width: 15%;
            background: black;
    }


    #content{
        float: left;
        display: block;
        position: static;
        background-size:100%;
        width: 70%;      
        right: 10%;
        bottom: 0;
        padding: 0;
        text-align:center
}

#right{
        float: right;
        display:block;
        position: static;
        text-align: justify;
        width:10%;
        background: black;
        left: 85%;
}
.page{
        position: fixed;
        margin-left: 0%;
        margin-right: 0%;
        padding-left: 0%;
        padding-right: 0%;
}
+1


source


The problem seems margin: 8px

to be on the body Which makes the container's available area 100% 8px, so there is a gap of 8px.

Try to use body{margin:0px;}



Hope it helps.

+1


source


This will work.

#content {
  /*float: none;*/
  display: block;
  float: left;      /* Add this line */
  position: static;
  background-size: 100%;
  width: 75%;
  /*margin-left: 15%;*/
  right: 10%;
  bottom: 0;
  padding: 0;
}
+1


source






More articles:


All Articles