Aligning my div's correctly

Question

Been having some problems aligning my div vertically with the rest of my page. So I have a top div with the main header and then I have a div below that with 3 different columns, each in a div of their own.

Here is the code for the div that contains all three columns:

    <div class="container" id="content-content-library">

<!-- test!! -->
<div class="row">


<div class="col-xs-3">
    <div class="column-left">

            <div class="row">

                <!-- NOT NEEDED!
                <div class="row-library col-xs-3">-->

                    <div class="left-navigation-home">
                        <img src="/img/home_library.png" />
                        <span>Home</span>

                        <span class="test">1</span>
                        <img src="/img/side_arrow.png" height="15" width="15" />
                    </div>
            </div>


            <!-- original -->
            <!--
            <div class="row">

                    <div class="left-navigation-home">
                        <span>Home</span>

                        <div class="library-stats-number">
                            <div class="stat">
                                <span class="counter">1</span>
                            </div>
                        </div>

                    </div>
            </div>
            -->
            <!-- end original -->   





        <!--<div class="container">-->
            <div class="row">

                    <div class="left-navigation-school">
                        <img src="/img/book_library.png" />
                        <span>School</span>
                        <span class="test">1</span>

                    </div>

            </div>  


        <!--<div class="container">-->
            <div class="row">

                    <div class="left-navigation-health">
                        <img src="/img/health_library.png" />
                        <span>Health</span>
                        <span class="test">1</span>
                    </div>

            </div>  


        <!--<div class="container">-->
            <div class="row">

                    <div class="left-navigation-community">
                        <img src="/img/user_library.png" />
                        <span>Community</span>
                        <span class="test">1</span>
                    </div>

            </div>  


        <!--<div class="container">-->
            <div class="row">

                    <div class="left-navigation-extra">
                        <img src="/img/extra_library.png" />
                        <span align="left">Extracurricular</span>
                        <span class="test">1</span>
                    </div>

            </div>

    </div>
</div>

<!-- test -->
<div class="col-xs-6 middle-column">

<!-- <div class="column-center">-->

        <!--  
            <div class="child color-blue">
                <div class="child-header">
                    <div class="child-info">
        -->     
                    <!-- OR -->

            <!--<div class="library color-blue">-->

    <!-- section for home click! -->
        <div class="row">
            <div class="col-sm-6">
                <div class="home-header">
                    <div class="library-info">
                            <h5 class="center-column-heading">Cleaning
                            <span ng-click="showLibraryDetails()" id="library-btn">
                                <img src="/img/drop_arrow_blue.png" height="10" width="10" />
                            </span>
                            </h5>
                    </div>
                </div>
            <!--</div>-->
            <!--<div class="child-stats">-->
                <div class="library-stats" ng-class="{'lib-nav' : active}">
                    <div class="stat first">
                        <!--<span class="counter"></span>-->
                        <img src="/img/grey_circle.png" height="25" width="25" />
                        Make Bed
                        <img src="/img/exclaimation.png" height="18" width="18" />
                    </div>
                    <div class="stat">
                        <!--<span class="counter"></span>-->
                        <img src="/img/grey_circle.png" height="25" width="25" />
                        Put toys away
                        <img src="/img/exclaimation.png" height="18" width="18" />
                    </div>
                </div>
            </div>

            <!-- test -->
            <div class="col-sm-6">
                <div class="library color-blue">
                    <!--<div class="child-header">-->
                    <div class="home-header">
                        <!--<div class="child-info">-->
                        <div class="library-info">

                            <div class="text">
                                <h5 class="center-column-heading">Test
                                <img src="/img/drop_arrow.png" height="10" width="10" />
                                </h5>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    <!-- end of home section -->


        <!-- section for SCHOOL TEST click! -->
        <div class="row">
            <div class="col-sm-6">
                <div class="school-header">
                    <div class="school-info">
                            <h5 class="school-column-heading">Cleaning2
                            <span ng-click="showSchoolDetails()" id="school-btn">
                                <img src="/img/drop_arrow_pink.png" height="10" width="10" />
                            </span>
                            </h5>
                    </div>
                </div>
            <!--</div>-->
            <!--<div class="child-stats">-->
                <div class="school-stats" ng-class="{'school-nav' : active}">
                    <div class="stat first">
                        <!--<span class="counter"></span>-->
                        <img src="/img/grey_circle.png" height="25" width="25" />
                        test1
                        <img src="/img/exclaimation.png" height="18" width="18" />
                    </div>
                    <div class="stat">
                        <!--<span class="counter"></span>-->
                        <img src="/img/grey_circle.png" height="25" width="25" />
                        test2
                        <img src="/img/exclaimation.png" height="18" width="18" />
                    </div>
                </div>
            </div>

            <!-- test -->
            <div class="col-sm-6">
                <div class="library color-red">
                    <!--<div class="child-header">-->
                    <div class="school-header">
                        <!--<div class="child-info">-->
                        <div class="library-info">

                            <div class="text">
                                <h5 class="school-column-heading">Test2
                                    <img src="/img/drop_arrow.png" height="10" width="10" />
                                </h5>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    <!-- end of school TEST section -->







    <!-- second section -->
        <!--<div class="child color-blue">-->
        <div class="row">
            <div class="col-sm-6">
                <div class="library color-blue">
                    <!--<div class="child-header">-->
                    <div class="school-header">
                        <!--<div class="child-info">-->
                        <div class="library-info">

                            <div class="text">

                                <h5 class="center-column-heading">Pet Care
                                <img src="/img/drop_arrow.png" height="10" width="10" />
                                </h5>

                            </div>

                        </div>
                    </div>
                </div>
            </div>

        <!-- Media use row example -->
            <div class="col-sm-6">
                <div class="library color-blue">
                    <!--<div class="child-header">-->
                    <div class="library-header">
                        <!--<div class="child-info">-->
                        <div class="library-info">

                            <div class="text">
                                <h5 class="center-column-heading">Media Use
                                <img src="/img/drop_arrow.png" height="10" width="10" />
                                </h5>

                            </div>

                        </div>
                    </div>

                </div>
            </div>

        </div>

        <!-- third section -->

                <!--<div class="child color-blue">-->
                <div class="library color-blue">
                    <!--<div class="child-header">-->
                    <div class="library-header">
                        <!--<div class="child-info">-->
                        <div class="library-info">

                            <div class="text">
                                <h5 class="center-column-heading">Media Use
                                <img src="/img/drop_arrow.png" height="10" width="10" />
                                </h5>

                            </div>

                        </div>
                    </div>

                </div>


<!--</div>-->
</div>



<!-- <div class="column-right">-->
<div class="col-xs-3">
<div  class="column-right">

    <span class="filter-image-right">
        <img src="/img/clock_library-right.png" />
        <img src="/img/heart_library-right.png" />
        <img src="/img/handshake_library-right.png" />
        <img src="/img/lamp_library-right.png" />
    </span>

    <div>
    <h6 class="right-column-heading"><img src="/img/minus.png"/> Cleaning</h6>

    </div>
        <p>
        The concept of cleaning makes little sense to young children.  For preschoolers,
        instructions like, "Put your toys away" are too vague or abstract.  You need to
        break things down for them.  "Pick up all your blocks and put them in the bin."
        "put your dolls on the bottom shelf."  The specifiity of these instructions is key.
        "Clean your room!" is simply overwhelming.
        </p>

    <h6 class="right-column-heading">Make Bed</h6>

        <p>
        For a younger child; Focus on smoothing out sheets and blankets for a clear
        playing/sitting surface.
        </p>

    <h6 class="right-column-heading">test</h6>

        <p>
        The concept of cleaning makes little sense to young children.  For     preschoolers,
        instructions like, "Put your toys away" are too vague or abstract.  You need to
        break things down for them.  "Pick up all your blocks and put them in the bin."
        "put your dolls on the bottom shelf."  The specifiity of these instructions is key.
        "Clean your room!" is simply overwhelming.
        </p>

        <h6 class="right-column-heading">test2</h6>

        <p>
        The concept of cleaning makes little sense to young children.  For preschoolers,
        instructions like, "Put your toys away" are too vague or abstract.  You need to
        break things down for them.  "Pick up all your blocks and put them in the bin."
        "put your dolls on the bottom shelf."  The specifiity of these instructions is key.
        "Clean your room!" is simply overwhelming.
        </p>

    </div>
</div>


</div>

</div>

And the css for the three columns:

.column-left { 
height:100vh;
}

.column-right { 
background-color: #d0d0d0; 
overflow-y: scroll;
padding:10px;
margin-right:-17px;
height:100vh;
}

.middle-column{
height:100vh;
}

EDIT* I believe the issue isn't the column div, but the main header div. It is to the right most part of the webpage.

Here is the code:

<div class="container" id="main-content">
<div id="content-header" class="assignments">

    <div class="container" >
        <h1>
            Library!!
            <span class="counter">22</span>
        </h1>
    </div>
    <button type="button" class="btn btn-green btn-lg btn-header" data-toggle="modal" ng-click="newAssignment()">Save</button>
    <div id="subheader">


        <div class="row">


                <div class="col-sm-6">
                    <div class="main-label filter-image">Filter:
                        <img src="/img/clock_library.png" />
                        <img src="/img/heart_library.png" />
                        <img src="/img/handshake_library.png" />
                        <img src="/img/lamp_library.png" />
                    </div>
                </div>

                <div class="lib-text">  
                    <input class="col-sm-5" type="text" name="search">
                    <img src="/img/magnifying_glass_white.png" />
                </div>  


        </div>

    </div>
</div>

and the CSS:

#content-header {
position: relative;
margin: auto;
color: #fff;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}

Would you be able to trim down your included code to only contain the problem behaviour specified? Consider following the guidelines on how to create a [Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). — Serlite, Oct 08 '15 at 16:34
it'd probably be a good idea to mention that you are using bootstrap — cocoa, Oct 08 '15 at 16:35
@Serlite This entire div which is above is not aligned correctly. Assumed that you would need to see the entire code for the div with all the columns.. — Drew, Oct 08 '15 at 17:36
looking at the page, I think it is the header div not the columns. Seems like the header div is off to the right more. — Drew, Oct 08 '15 at 17:40
Please don't use the [tag:bootstrap] tag for [tag:twitter-bootstrap] questions. There is a [tag:twitter-bootstrap] tag for a reason. — , Oct 08 '15 at 18:23
No, you can use the [tag:twitter-bootstrap] just no [tag:bootstrap] because they mean entirely different things. — , Oct 08 '15 at 18:41

score 1 · Answer 1 · answered Oct 08 '15 at 16:48

1

I do not know what you are achieving, but I can say that you are using bootstrap on a wrong way. Every row should have divis inside with class like col-md-3. If you do not put a div inside the row, the margin will be broken.

Another thing a see is the column right css

.column-right { 
    background-color: #d0d0d0; 
    overflow-y: scroll;
    padding:10px;
    margin-right:-17px;
    height:100vh;
}

The margin-right:-17px; will brake the bootstrap grid sistem once you are changing the row content position.

Try to add the class to de div inside the rows and removing the margin-right:-17px; from your css and see whats happening.

answered Oct 08 '15 at 16:48

Bruno João

5,105
2
21
26

only thing that removing the margin-right does is push the right column to the left more. Now there is a bit of white space available. The div containing all the columns is still not aligned with the header div. – Drew Oct 08 '15 at 17:31
I did some changes to your html and css. Actually I removed the unnecessary rows and css. You can see the example at https://jsfiddle.net/otp84t7j/1/ – Bruno João Oct 08 '15 at 18:01
Thank you for this, I will go over it and fix my code. I attached code for the header div that is the problem. It is to the right most part of the webpage and I believe it is the problem and not the columns. – Drew Oct 08 '15 at 18:13

score 0 · Answer 2 · answered Oct 08 '15 at 19:13

0

Found out the problem. It was a problem in the header div. Before it was

<div class="container" id="main-content">

and I took out the container class and it was solved. This is the first div. It containers the entire header.

answered Oct 08 '15 at 19:13

Drew

31
3
8

Aligning my div's correctly

2 Answers2