CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
CreatureKing
CreatureKing

Reputation: 1

Bootstrap container shifts to the left when row has image content

I'm trying to develop a pretty simple site using twitter bootstrap. When adding content I noticed that all of the content with the container class was being shifted a bit to the left with the addition of a child div of the row class with image content. The padding/margin/width of the container div doesn't seem to be changing so I'm really not sure what's affecting this change.

The HTML and CSS is below and the issue can be seen if you comment out the divs with classes .row1 and .row2. Doing so returns the content of the container class to its regular location.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>
        <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
        <script src="http://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    </head>
    <body>
        <!-- Header -->
        <div id="header">
            <div class="container">
                <div id="leftHeader">
                    <h1>Title</h1>
                    <h1 class="subtitle"><small>Subtitle</small></h1>
               </div>
               <div id="rightHeader">
                    <h3>Declaration</h3>
               </div>
            </div>
        </div>
        <!-- Navbar -->
        <nav class="navbar navbar-default">
            <div class="container">
                <!-- Navbar Header -->
                <div class="navbar-header">
                    <a class="navbar-brand" href="index.htm">Company Name</a>
                </div>

                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="services.htm">Services</a></li>
                        <li><a href="pricing.htm">Pricing</a></li>
                        <li><a href="aboutus.htm">About Us</a></li>
                        <li><a href="contactus.htm">Contact Us</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- Content -->
        <div class="container">
            <div class="row row1">
                <div class="col-md-12">
                    <div id="countercont">
                        <div id="counter"><div>0</div></div><div id="introRest">Counter text</div>
                        <div id="edge">Other side</div>
                    </div>
                </div>  
            </div>
            <div class="row row2">
                <div class="col-md-4 img1">
                    <img src="computer.jpg" />
                </div>
                <div class="col-md-4 img2">
                    <img src="lightbulb.jpg" />
                </div>
                <div class="col-md-4 img3">
                    <img src="dome.jpg" />
                </div>
            </div>
            <div class="row row3">
                <div class="col-md-6">
                    <h1>Title</h1>
                    <p>Text</p>
                </div>
                <div class="col-md-6">
                    <h1>Title 2</h1>
                    <p>Other Text</p>
                </div>
            </div>
       </div>
    </body>
</html>

CSS

.subtitle {
    margin-top: -15px;
}

#leftHeader {
    float: left;
}

#rightHeader {
    float: right;
}

#rightHeader h3 {
    font-size: 28px;
    padding-top: 40px;
}

#counter {
    border-style: solid;
    border-width: 1px;
    width: 150px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#counter div {
    font-size: 50px;
    width: 82px;
    margin: 0 auto;
}

#introRest, #edge{
    font-size: 30px;
    display: none;
}

#edge {
    float: right;
    font-style: italic;
}

#countercont {
    height: 80px;
}

.img1, .img2, .img3 {
    text-align: center;
}

.img1 img, .img2 img, .img3 img {
    border: 2px solid black;
    height: 240px;
    width: 240px;
}

.row2 {
    padding-top: 10px;
    padding-bottom: 30px;
}

.row3 ul {
    padding-left: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.row3 li {
    font-size: 13px;
}

Upvotes: 0

Views: 1972

Answers (1)

Mckay Multimedia
Mckay Multimedia

Reputation: 1096

Did you try adding a max-width to your images?

.img1 img, .img2 img, .img3 img {
    border: 2px solid black;
    height: 240px;
    width: 240px;
    max-width:100%; /* Added these */
    max-height:100%; /* Added these */
}

Example on Bootply

Upvotes: 1

Related Questions