CODEWITHSUNDEEP
htmlcss
dev333
dev333

Reputation: 799

How to partition a div into 3 parts separated by borders in html

I have a navigation bar on the top of a page.In the next div below navigation bar,I'm trying to partition a div into 3 columns which are separated by their borders but not separated by background color.

I want the background color to be unique for all the 3 partitions.I tried using frameset and frame tags.But it is partitioning the entire page.I don't want an entire page to be partitioned into 3 columns.

Firstly,at the top of the page,I want the navigation bar to be placed and later I want one particular div of that page to be partitioned into 3 columns.How can I achieve this?

Can anyone please help me out regarding this issue ...

My html code:

     <!DOCTYPE html>
    <html ng-app="Admin">
    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/style.css" />
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/angular.min.js"></script>
    <script src="js/angular-animate.min.js"></script>
    <script src="js/Scripts/Home.js"></script>
    <script src="js/angular-route.min.js"></script>
    <script
        src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
    <script src="http://caitp.github.io/ng-media/ng-media.js"></script>
    </head>

    <body class="home">
        <div ng-controller="Home" class="container">
            <nav class="navbar navbar-inverse">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <img src="images/logo.jpg" style="width: 100px;">
                    </div>
                    <div>
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="home1.html">HOME</a></li>
                            <li class="dropdown"><a class="dropdown-toggle"
                                data-toggle="dropdown" href="#">EXPLORE OCR <span
                                    class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Option1</a></li>
                                    <li><a href="#">Option2</a></li>
                                    <li><a href="#">Option3</a></li>
                                </ul></li>
                            <li class="dropdown"><a class="dropdown-toggle"
                                data-toggle="dropdown" href="#">+FEATURES <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Option1</a></li>
                                    <li><a href="#">Option2</a></li>
                                    <li><a href="#">Option3</a></li>
                                </ul></li>
                            <li class="dropdown"><a class="dropdown-toggle"
                                data-toggle="dropdown" href="#">HELP <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Option1</a></li>
                                    <li><a href="#">Option2</a></li>
                                    <li><a href="#">Option3</a></li>
                                </ul></li>
                        </ul>
                    </div>
                    <div class="navbar-header">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="signIn.html" style="padding-left: 332px;">SignIn</a></li>
                            <li><a href="logOut.html">LogOut</a></li>
                        </ul>
                    </div>

                </div>
            </nav>

        </div>
    <div>
// I'm trying to partition this div into 3 columns(left,center,right).
   </div>



    </body>
    </html>

Upvotes: 1

Views: 5909

Answers (4)

TheQuestioner
TheQuestioner

Reputation: 722

you'd rather need HTML Table here. if you still insist on using divs then use it as a CSS Table

Upvotes: 0

Jobs
Jobs

Reputation: 259

this is the solution

This is the html code, inside your html

<div class="maindiv">
 <div id="divone" class="subdiv"></div>
 <div id="divtwo" class="subdiv"></div>
 <div id="divthree" class="subdiv"></div>
</div>

this is your css code.in your css file

div.maindiv{
 width:99%;
 height:400px; /*use any height you want*/
 border:0px solid black;/*use 1px if you want and remove this after you positioned correctly*/
 position:absolute;
 top:300px;/*try with changing this according to your view*/
}

div.maindiv div.subdiv{
 width:33%;
 height: 100%;
 border:1px solid red;
 float: left;
 background-color: pink;
}

this is easy if you use bootstrap.

Upvotes: 0

tbernard
tbernard

Reputation: 468

There are several methods. I usually like to use display: table-cell. Something like:

<div class="three-columns">
    <div class="column">
        <!-- Content Here -->
    </div>
    <div class="column">
        <!-- Content Here -->
    </div>
    <div class="column">
        <!-- Content Here -->
    </div>
</div>

And

div.three-columns {
    display: table;
    width: 100%;
    border-collapse: collapse; /* Prevent spaces between cells */
}
div.three-columns > .column {
    display: table-cell;
    width: 33.33%;
    border-left: <BORDER DEFINITION HERE>
}
div.three-columns > .column:first-child {
    /* Since we only want borders between the elements, remove the leftmost border */
    border-left: none; 
}

The table layout engine requires every cell in a row be the same height. Simply add borders.

Upvotes: 1

Rovi
Rovi

Reputation: 259

I am not very clear with your question. But is the below code suiting your requirement. I have added the css inline. 

<div>
    <div style="float: left;width: calc(100%/3);background:red">left</div>
    <div style="float: left;width: calc(100%/3);background:pink">center</div>
    <div style="float: left;width: calc(100%/3);background: blue">right</div>
   </div>

Upvotes: 0

Related Questions