Positioning in html, and whitespace to the right of the page

Question

So I'm new to html and css, and right now I'm trying to figure out how to fix the positioning on this page.

It normally looks like the first image in the album:

But for some reason there is this white-space to the left which can be scrolled to if, overflow-x is not "hidden" like the second picture of that album.

Also, I don't know if you people go on facebook or other websites (like this one even), but when you resize a page, the elements on the page don't start just jumping around, but if I have overflow-x: hidden; then I assume they elements have to jump around, and the text will start to wrap, like third picture in the album.

So how do I go about making the page not move around when the window is resized, and as a bonus, what is that whitespace?

-Chris

EDIT (some code):

<!DOCTYPE html>
<html>
    <head>
        <title>Homepage</title>

        <link rel="stylesheet" href="main.css">
        <link rel="stylesheet" href="bootstrap.css">
        <link rel="stylesheet" href="shift.css">

    </head>
    <body>
    <div id="wrapper">
    <!-- Navbar stuff -->
    <div class="nav">
        <div class="container">
            <ul class = "pull-left">
                <li><a href="#">Logo</a></li>
                <li><a href="#">Browse</a></li>
            </ul>
            <ul class = "pull-right">
                <li><a href="#">Sign Up/Login</a></li>
                <li><a href="#">Help</a></li>
            </ul>
        </div>
    </div>

    <!-- Main swipey thing -->
    <div class ="jumbotron">
        <div class ="container">
            <h1>Blah blah blah</h1>
        </div>
    </div>

    <!-- Buy/Sell -->
    <div class="portals">   
        <div class="container">
            <div class="row">   
                <div class="col-md-6">  
                    <div class="buy-portal">
                        <div class="container">
                            <h3>Need school?</h3>
                            <img src="http://goo.gl/an2HXY">
                        </div>
                    </div>
                </div>

                <div class="col-md-6">  
                    <div class="sell-portal">
                        <div class="container">
                            <h3>Sell old</h3>
                            <img src="http://goo.gl/0sX3jq">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <div class="footer">
        <div class="container">
            <ul class="pull-right">
                <li><a href="#">Contact</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Bug Tracking</a></li>
            </ul>
        </div>
    </div>
</body>

And the css:

    /*! Other stuff */
html,body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

/*! Navbar css */
 .nav {
    background-color: #DEB087;
    border-bottom: 1px solid #DEB087;
}
.nav a {
    color: #875D4B;
    font-size: 15px;
    font-weight: bold;
    padding: 14px 10px;
}

.nav li {
    display: inline;
}

/*! jumbotron */
.jumbotron {
    background-image:url('http://goo.gl/04j7Nn');
    height: 500px;
}

.jumbotron .container {
    position: relative;
    top:100px;
}

.jumbotron h1 {
    color: #DEB087;
    font-size: 40px;  
    font-family: 'Shift', sans-serif;
    font-weight: bold;
}

/*! Buy/Sell */
.portals {
    background-color: #f7f7f7;
    padding: 14px 10px;
    border-bottom: 1px solid #dbdbdb;
    float:none;

}

.buy-portal h3 {
    font-size:20px;
 }

.sell-portal h3 {
    font-size:20px;
}

 /*! Footer */

.footer {
    background-color: #49484C;
 }

.footer a {
    color: #E8E5F2;
    font-size: 11px;
    font-weight: bold;
    padding: 14px 10px;
}

.footer ul {
    list-style-type: none;
}

Answer 1

please rename class container on your script HTML. Before:

<!-- Buy/Sell -->
<div class="portals">   
    <div class="container">
        <div class="row">   
            <div class="col-md-6">  
                <div class="buy-portal">
                    <div class="container"> <!--Rename "container" with another name -->
                        <h3>Need school?</h3>
                        <img src="http://goo.gl/an2HXY">
                    </div>
                </div>
            </div>

            <div class="col-md-6">  
                <div class="sell-portal">
                    <div class="container"> <!--Rename "container" with another name -->
                        <h3>Sell old</h3>
                        <img src="http://goo.gl/0sX3jq">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

After:

<!-- Buy/Sell -->
<div class="portals">   
    <div class="container">
        <div class="row">   
            <div class="col-md-6">  
                <div class="buy-portal">
                    <div class="content"> <!-- "container" replace with "content" -->
                        <h3>Need school?</h3>
                        <img src="http://goo.gl/an2HXY">
                    </div>
                </div>
            </div>

            <div class="col-md-6">  
                <div class="sell-portal">
                    <div class="content"> <!-- "container" replace with "content" -->
                        <h3>Sell old</h3>
                        <img src="http://goo.gl/0sX3jq">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

and I also changed a little in class "jumbotron" you, hails like this:

.jumbotron {
     background: url ("http://goo.gl/04j7Nn") no-repeat scroll center center / cover RGBA (0, 0, 0, 0); 
     height: 500px; 
     text-align: center; 
}

Result : Here on jsfiddle

Hope that helps.

Positioning in html, and whitespace to the right of the page

Question

1 answers

solution1
1 2014-08-12 09:36:57

Positioning in html, and whitespace to the right of the page

Question

1 answers

solution1 1 2014-08-12 09:36:57

solution1
1 2014-08-12 09:36:57