Chrome has a particular issue with elements not remaining within their designated containers

I'm an aspiring programmer who is still learning the ropes, as evidenced by this simple website. I'm struggling to understand why everything is overflowing outside of the container div, except for the search function.

For reference, I've been using Chrome to test and view all my programming work. However, when I put it in jsfiddle, the layout looks different. I'm not sure what I'm doing wrong in terms of sizing and positioning all the elements.

Below is the code snippet:

HTML:

<!DOCTYPE html>    
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>      
<body>  
    <div class="container">

        <!-- Rest of the HTML markup -->

    </div>
</body>
</html>

CSS:

.container
{
    margin:auto auto; 
    width:975px;
}

<!-- Rest of the CSS styles -->

.searchbutton
{
    width: 50px;
    height: 45px;
}

Here's an image showing the overflow issue.

htmlcsstwitter-bootstrap

Answer №1

There are two main issues you need to address:

1) Your fixed-width elements do not adjust to different viewport sizes, meaning they are not responsive. Check out Media Queries for more information.

2) You seem to be misunderstanding the grid system usage; examples like 

<div class="row col-md-12">
are incorrect. Refer to Grid System for clarification.

Since you are new to this, it's important to grasp the fundamental principles of HTML/CSS and how Bootstrap functions in general. Dive into the Documentation for further understanding.

Below is a snippet demonstrating how your code could be structured: 

/**For Nav Pills Navigation**/

/*#nav {
    margin-bottom: 20px;
}*/

div.logo {
  padding-top: 20px;
  padding-bottom: 20px;
}
.navbar#nav-menu {
  background: linear-gradient(gray, #eee);
  border-radius: 5px;
  border: 1px solid #000;
  color: #666;
  font-weight: bold;
  text-align: center;
}
.navbar #menu > li {
  background: linear-gradient(gray, #eee);
  border-radius: 5px;
  border: 1px solid #000;
  color: #666;
  font-weight: bold;
  text-align: center;
}
#searchForm .btn.btn-navi {
  background: linear-gradient(rgba(212, 0, 0, 0), #795548);
  border: 1px solid #000;
  color: #666;
  font-weight: bold;
}
div.resultbox {
  margin-top: 20px;
  background: linear-gradient(rgba(212, 0, 0, 0), #795548);
  border-radius: 5px;
  border: 1px solid #000;
  color: #666;
  font-weight: bold;
}
/**For NAVBAR Navigation**/

@media (min-width: 768px) {
  .navbar#nav-menu {
    margin-bottom: 5px;
  }
}
@media (max-width: 768px) {
  div.resultbox {
    margin-top: 0;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="logo">
        <img src="http://placehold.it/1150x300/f00/fff" class="img-responsive" />
      </div>
    </div>
  </div>
</div>
<!--Can be repalced with the below NAV PILLS -->
<div class="container">
  <nav class="navbar navbar-default" id="nav-menu">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>
    </div>
    <div class="collapse navbar-collapse" id="bs-nav">
      <ul class="nav navbar-nav">
        <li><a href="#">Dashboard </a>

        </li>
        <li><a href="#">Invoicing</a>

        </li>
        <li><a href="#">Scheduler</a>

        </li>
        <li><a href="#">Employees</a>

        </li>
        <li><a href="#">User Management</a>

        </li>
        <li><a href="#">Customers</a>

        </li>
      </ul>
    </div>
  </nav>
</div>
<!--Can be used Instead of the above NAVBAR -->
<!--<div class="container">
<div class="row" id="nav">
    <div class="col-sm-12">
        <ul class="nav nav-pills nav-justified" id="menu">
            <li role="presentation"><a href="#">Dashboard</a>

            </li>
            <li role="presentation"><a href="#">Invoicing</a>

            </li>
            <li role="presentation"><a href="#">Scheduler</a>

            </li>
            <li role="presentation"><a href="#">Employees</a>

            </li>
            <li role="presentation"><a href="#">User Management</a>

            </li>
            <li role="presentation"><a href="#">Customers</a>

            </li>
        </ul>
    </div>
</div>
</div>-->
<div class="container">
  <div class="row">
    <form id="searchForm">
      <div class="form-group">
        <div class="col-sm-4">
          <button type="button" class="btn btn-default btn-lg btn-block btn-navi">New Employee</button>
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-4">
          <button type="button" class="btn btn-default btn-lg btn-block btn-navi">Employee Schedule</button>
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-4">
          <div class="input-group input-group-lg">
            <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn">
        <button class="btn btn-default btn-lg btn-navi" type="button">Go!</button>
      </span>

          </div>
        </div>
      </div>
    </form>
  </div>
  <div class="resultbox">
    <div class="table-responsive">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>Name</th>
            <th>Status</th>
            <th>Phone</th>
            <th>Email</th>
            <th>Title</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Something</td>
            <td>Something</td>
            <td>Something</td>
            <td>Something</td>
            <td>Something</td>
          </tr>
          <tr>
            <td>Something</td>
            <td>Something</td>
            <td>Something</td>
            <td>Something</td>
            <td>Something</td>
          </tr>
          <tr>
            <td>Something</td>
            <td>Something</td>
            <td>Something</td>
            <td>Something</td>
            <td>Something</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Top strategies for creating a fully responsive HTML design

Currently, I am exploring the concept of responsiveness in my small projects for educational purposes. I have been researching websites such as: w3schools-mediaquery While I have come across some interesting insights, I am curious about how to effectivel ...

htmlresponsive-designresponsive

Is there a way for me to update the placeholder text in my script from "CHANGE ME

Can anyone help me troubleshoot this code that's not working on my computer? I have a paragraph with the text CHANGE ME inside an element with the id "warning". I want to update this text when the login button is clicked, but it doesn't seem to ...

javascripthtml

Error encountered in loop for concatenating html elements: identifier unexpectedly found (jquery + html + php)

I am attempting to concatenate HTML inside a variable within a loop and then return it populated. However, I am encountering an error: Uncaught SyntaxError: Unexpected token += in my code. <a style="cursor: pointer" id="addmore">More Entree ?</ ...

phpjqueryhtmljson

A guide on showcasing a value in an Input box using AngularJS

Recently, I started delving into AngularJS and I am determined to create a user info editing page where the old info is displayed in input fields. The goal is to allow users to easily see and update their information. I previously achieved this without usi ...

javascripthtmlangularjsfrontend

Ways to display only a specific color in an image

Looking to work with an image that contains predefined color blocks? Take this example picture as reference: https://i.sstatic.net/QlwvY.png Is there a method to display only certain colored areas while keeping the rest transparent? Note that no edge pat ...

javascripthtmlcsstypescriptfrontend

Styling React Native components using multiple CSS arguments

Can you help me with styling in react-native using CSS like this? border-width: 5px 5px 5px 5px I attempted to use: borderWidth:{5,5,5,5} and borderWidth:'5px 5px 5px 5px' but it didn't work ...

cssreactjsreact-native

Is it possible to refresh a div on one .aspx page using content from another .aspx page?

Just beginning my journey with asp.net and currently tackling a project that involves two .aspx pages. Events.aspx: This page is where the site admin can update upcoming events and webinars using an available panel to input event title, date, information ...

c#javascriptjqueryasp.nethtml

Hiding the visibility of a table-cell will conceal the background color of its parent table row

In my coding project, I have implemented forms with a structure that utilizes display:table-row and display: table-cell. Previously, in Firefox 52, I was able to hide a cell element using visibility:hidden, effectively hiding the cell while maintaining the ...

jqueryhtmlcssfirefox

The behavior of placing an <a> element within an inline <li> element

I find the HTML / CSS result below to be quite puzzling and unexpected. I am eager to understand the reasoning behind how this is being interpreted. Consider: #nav { list-style-type-none } #nav li { display: inline; } /* make the LI's stack ho ...

htmlcssblockinline

What is the best way to insert my words within the boundary?

I am seeking assistance on inserting text within the border I created using an image. As I continue to add more text, I want it to display within the border as I type. Any guidance you can provide would be greatly appreciated. Thank you! li { list-sty ...

htmlcss

Utilize jQuery to toggle and swap between multiple classes

I am looking to implement a feature where clicking on certain cells will add and switch classes, similar to a calendar schedule. I attempted the code sample below, but it did not successfully toggle each class. The desired outcome is to switch classes li ...

javascriptjqueryhtmlcss

When padding is added, the size of the containing div will still be affected even with the box-sizing property set to

If you click the Button in the following example, it will add padding to a div called label. If you click it 12 times or more, the size of the containing div named button will start to change size and turn red. I have already applied box-sizing: border-bo ...

htmlcss

Ensure to verify the presence of a null value within the ngFor iteration

I have a webpage where I am displaying information in buttons. These buttons show various objects from a list along with their corresponding fields (e.g. object.name, object.age, etc.). Sometimes, one of those fields is null. How can I check if a value is ...

javascripthtmlangularjsangular

Achieve a disabled scroll bar feature on Firefox

I am experiencing an issue with a Javascript tabbed dialog where the pages have varying heights. Some of them are larger than the browser window. In Internet Explorer, there is always a scrollbar present on the right side. When it is not needed, it appear ...

htmlcssinternet-explorerfirefoxscrollbar

What is the best way to choose a div on the second tier?

<div id="class" style="cursor: pointer"> <label id="cost">@Html.DisplayFor(modelItem => item.Cost)</label> <div class="no" hidden="hidden"> <input type="text" id='@item.PriceId' class="text" style="te ...

jqueryhtml

Dynamic Entry: The Art of JQuery Animation

I want to achieve a sequential flying-in effect when my page loads, with each div sliding in one by one. Currently, all the divs fly in simultaneously, but I'd like them to come in sequentially. Here is my code snippet: <script> function ani ...

javascriptjquerycss

Unable to activate/deactivate the form components on a Grails webpage

I have multiple forms and buttons on a single page in my Grails application. What I'm trying to achieve is the ability to hide and show different forms on the page using an enable button with jQuery. I attempted to use ID selectors, but this resulted ...

jqueryhtmltemplatesgrails

Conceal a DIV upon being shown in a designated container

My current struggle involves hiding a specific DIV element only when it is displayed within another div. The scenario is this: I have a Contact Form that appears in two different places - once in a sidebar and again on a dedicated contact page. The form is ...

phpcss

Removing portions of the iframe's src code

I am looking to embed a page's content on my website using an iframe, but I would like to exclude the header section of the page so that only the content below it is visible, without the navigation bar. Code: <div id="content"> <div sty ...

htmlcssiframe

What is the best way to resize an image to fit a jumbotron in Bootstrap?

I need to fit an image of size 1800px by 200px into a jumbotron so that the jumbotron's size adjusts to fit the image. The jumbotron should also be responsive to different screen sizes. Here is my code: <style> .jumbotron1{ background- ...

csstwitter-bootstrap