how can i add 3 columns in an html page using css?

Question

I want to add 3 vertical columns in a html page:

#navbar {width:15%}

#content {width:70%}

#right {width:15%}

This is the stylesheet that I used to do so:

#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>

Even though the margin is set as 0%, every time I run run this code. There is a space between the main display and the container.

So, how can I solve this problem?

I still have that error. Because of that, right panel is being displayed in a line below the navbar and the content. — Code_Ninja
– Code_Ninja, Commented Apr 17, 2017 at 11:17

chirag solanki · Accepted Answer · 2017-04-17 11:13:56Z

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%;
}

dattebayo · Accepted Answer · 2017-04-17 11:20:50Z

1

The problem seems to be margin: 8px on the body Due to which the available area for the container is 100% - 8px, which is why there is a gap of 8px.

Try using body{margin:0px;}

Hope this helps.

answered Apr 17, 2017 at 11:20

dattebayo

1,4221 gold badge10 silver badges4 bronze badges

Comments

Inkyu Han · Accepted Answer · 2017-04-17 11:26:36Z

1

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;
}

answered Apr 17, 2017 at 11:26

Inkyu Han

915 bronze badges

Collectives™ on Stack Overflow

how can i add 3 columns in an html page using css?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related