The footer of the main page appears just below the autogenerated menu bar at the top of the page and interferes with the div in my main page. It doesn't happen in the other pages which tips me off that something is wrong in the main page but I can't see what that is. Also, when I zoom out the content seems to veer off to the right and I don't know why.
I have given ample bottom margin to the footer and I can see the flex container div doesn't reach all the way to the bottom.
Index.cshtml
<head>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
}
#myMap {
width: 30vw;
height: 30vh;
}
.flex-container {
margin: auto;
position: fixed;
display: flex;
padding-top: 10px;
width: 80vw;
margin-bottom: -115px;
}
.flex-child {
flex: 1;
border: 2px solid yellow;
width: 49%;
max-width: 49%;
}
.flex-child:first-child {
margin-right: 20px;
width: 49%;
width: auto;
height: auto;
max-width: 49%;
}
</style>
<!--<script src="~/lib/jquery/dist/jquery.min.js"></script>-->
<script type="text/javascript" src="https://www.bing.com/api/maps/mapcontrol?callback=LoadMap" async defer></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js" defer></script>
</head>
<div class="flex-container">
<div class="flex-child left">
<h2>Bing Maps integration in ASP.NET</h2>
<h4>Select sector:</h4>
<select id="mapMenu" multiple="multiple" style="width:300px">
<option value="0">Building</option>
<option value="1">Machine</option>
<option value="2">Grid</option>
<option value="3">IT</option>
<option value="4">Power</option>
<option value="5">Platform</option>
</select>
<div id="myMap"></div>
</div>
<div class="flex-child right">
<div id="infoPane"></div>
</div>
</div>
_Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - ®</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("My Tool", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Data Entry", "DataEntry", "Home")</li>
<li>#Html.ActionLink("View Entries", "ViewEntries", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer style="position:relative; height: 50px; width: 100%;">
<p>© #DateTime.Now.Year - Schneider Electric®</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
I added the footer style tags but they did not help. Any ideas?
Apparently, my hunch was confirmed and the styling of the Layout and Index are interfering.
The solution I found is to replace the footer in Layout with a section using RenderSection("Footer", false) and then generate it the section in every page separately by doing:
At bottom of Index.cshtml:
...
#section Footer
{
<footer>...</footer>
}
For more info and an example on using RenderSection():
Here
Related
I am using Bootstrap and I know how to make the buttons appear side by side but having issues achieving what I want.
When the buttons are side by side in a 100% width container everything is fine. However, if the second button is removed I would like the first button to fill 100%.
Is there a CSS only approach?
When the buttons are side by side in a 100% width container everything
is fine. However, if one of those buttons are gone I would like the
other button to fill 100%.
Is there a CSS only approach?
Yes. You can easily accomplish this with the flex-grow property of CSS Flexbox.
From MDN:
The flex-grow CSS property specifies the flex grow factor of a flex
item. It specifies what amount of space inside the flex container the
item should take up.
Basically, you can tell an element to take up all available width. So if there are two elements, they will share the space equally. If one element is removed, the other expands to fill the width.
Here's all the code you need to make this work:
HTML
<div id="container">
<button type="button">Button 1</button>
<button type="button">Button 2</button>
</div>
CSS (relevant parts)
#container {
display: flex;
justify-content: space-around;
width: 100%;
height: 75px;
}
button {
flex-grow: 1; /* this one line tells button to stretch across all available width */
}
DEMO (click buttons for effect): http://jsfiddle.net/rjy6nvj2/1/
Note: Flexbox is supported by all major browsers, except IE 8 & 9.
CSS only solution would be to use only-child pseudo selector
* {
box-sizing: border-box;
}
.container {
width: 340px;
border: 1px solid rgba(0,0,0,0.1);
padding: 5px;
}
.btn {
margin: 0 5px 0 0;
padding: 4px 8px;
background: #5d4ca5;
color: #fff;
text-decoration: none;
text-align: center;
width:157px;
display: inline;
}
.container .btn:only-child {
width: 100%;
}
<div class="container">
<button class="btn">Button One</button>
<button class="btn">Button Two</button>
</div>
<div class="container">
<button class="btn">Button One</button>
</div>
See the working Fiddle here - http://jsfiddle.net/sjpx5c34/1/ (remove the second button and your only button will have 100% width.)
Trick named display:table-cell:
div { width:300px; border:1px solid; display:table; }
div > span { display:table-cell; border:1px solid red; width:50%; }
<div>
<span>First</span>
<span>Second</span>
</div>
<div>
<span>First</span>
</div>
Anthony Russo Hi there.
This code below will show how to first center what and when you need to center.
Because you have a reason why one button will be removed.
I set up a little sample jquery to remove the Second Button when you mouse over it, for this example.
When you mouse over, it also adds the class centerthis to the First Button to center it.
Hope this helps to get you started.
Updated
I see you have added to your post, so I have made added a small change to the my code.
When you have the second button removed, you also want the remaining button width to go 100%.
My code now does this for you too.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Remove button and center</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
}
.spacer {
margin-top: 2%;
margin-bottom: 2%;
}
.block {
height: 200px;
background-color: darkorange;
}
.block3 {
height: 40px;
width:550px;
padding-top: 3px;
background-color: blueviolet;
}
.centerthis {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.remove-on-hover {
display: none;
}
.change-width {
width: 100%;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand " href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container col-lg-12 spacer"></div>
<div class="container col-lg-12 block">
<div class="col-sm-6 block3 centerthis">
<div class="col-xs-6 centerthis" >
<div type="text" id="firstbutton" class="col-xs-6 btn btn-warning">First Button</div>
<div type="text" id="whenchanged" class="col-xs-6 btn btn-warning">Second Button</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
jQuery(function () {
var myMenu = $('#whenchanged');
myMenu.mouseenter(function () {
$('#firstbutton').addClass("centerthis change-width");
$("#whenchanged").addClass("remove-on-hover");
});
})
</script>
</body>
</html>
I have my aspx code here:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="SearchCustomer.aspx.cs" Inherits="WebApplication1.eyeofheaven.SearchCustomer" %>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="StyleSheets/SearchCustomerStyle.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<title>Search Customer</title>
</head>
<body>
<form id="form1" runat="server">
<div class="row">
<div class="twelve columns">
<!-- Header-->
<div class="container">
<nav role="navigation" class="navbar navbar-inverse navbar-fixed-top">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle active" href="#">Search<b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li>Search Form(Customer)</li>
<li>Search Form(Vehicle)</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<!-- Search form customer-->
<div id="searchcustomer" class="page-header">
<h3><span class="glyphicon glyphicon-th-large"></span>Search Customer</h3>
</div>
<div class="row">
<div class="col-md-4">
<input type="text" runat="server" id="search" size="20" class="form-control" placeholder="Customer ID">
</div>
<div class="col-md-4">
<select class="form-control" runat="server" id="Country">
<option value="select" selected disabled>Search by Country</option>
<option value="A:C ESTUDIO">A:C ESTUDIO</option>
<option value="Aaron McEwen-194712">Aaron McEwen-194712</option>
</select>
</div>
<div class="col-md-4">
<select class="form-control" runat="server" id="Currency">
<option value="selected" selected disabled>Search by Currency</option>
<option value="AUD">AUD (Australian Dollar)</option>
<option value="EUR">EUR (Euro)</option>
<option value="GBP">GBP (United Kingdom Pounds)</option>
<option value="JPY">JPY (Japan Yen)</option>
<option value="NZD">NZD (New Zealand Dollar)</option>
<option value="USD">USD (United States Dollar)</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" runat="server" onserverclick="Button1_Click" id="searchinfo" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> Search Info</button>
<button type="button" runat="server" onserverclick="Button2_Click" id="Button2" class="btn btn-danger"><span class="glyphicon glyphicon-repeat"></span>Reset</button>
</div>
</div>
<!-- Information Table-->
<div id="gridview">
<asp:GridView runat="Server" id="data" CssClass="table table-striped table-bordered table-responsive">
</asp:GridView>
</div>
</form>
</body>
</html>
And my css style here:
#searchcustomer{
margin-top:51px;
text-align:center;
background-color:#3399FF;
}
#gridview {
margin: 20px;
}
#data {
display: block;
height:400px;
overflow-y: scroll;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
#media only screen and (max-width: 800px) {
/* Force table to not be like tables anymore */
#data table,
#data thead,
#data tbody,
#data th,
#data td,
#data tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#data thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#data tr { border: 1px solid #ccc; }
#data td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
white-space: normal;
text-align:left;
}
#data td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align:left;
font-weight: bold;
}
}
The output is okay when viewed on website:
But when viewed on mobile the output is like this:
All of my "th" seems to display before my all my "td"
How do I revised my css to make an output not like this. I want to make my table when viewed on mobile (It will get the th and td display)
Example:
When viewed on mobile:
The output is:
(First it will display the th tag "IDCustomer" and next to it is the td which is "253433")
(Image below)
Note:(I just edited this image on paint to further explain my question.)
How Do I design a css style like this?
You have to use responsive solution for this :
solutions here
I have two areas, left menu pane and right content pane. CSS code for both left and right are as below
/*-----------------navi_left area-----------------------*/
layoutform {
clear: both;
//background-color: #e2e2e2;
font-size: 1em;
height: 100%;
}
.div_navi {
border:1px solid #CCCCCC;
width:216px;
height: inherit;
float: left;
}
/*------------------Contents area--------------------*/
.div_text{
border:1px solid #CCCCCC;
vertical-align:top;
width:761px;
height: 100%;
//padding:0px 0px 0px 34px;
font-size:11px;
line-height:22px;
float: right;
}
The problem is that, on some pages the right pane has more height due to more content. I want to make such that if the right page gets more height, left should inherit height from it. Below picture shows that both are unequal. I am developing application in asp.net MVC4 and _layout.cshtml is
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - Fleets Go Green DataServer</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<link href="#Url.Content("http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css")" rel="Stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.15.min.js")" type="text/javascript"></script>
</head>
<!-- New Script Added -->
<script type="text/javascript" src="#Url.Content("~/Scripts/myFile.js")" ></script>
<body>
<div class="content-wrapper">
<header>
<div class="content-wrapper">
<div class="div_line">
<div class="div_grey"></div>
<div class="div_blue"></div>
</div>
<div class="empty"></div>
<div class="div_logo">
<div class="div_left_logo">
<img src="~/Images/fgg_logo.gif" >
</div>
<div class="div_right_logo">
<img src="~/Images/fgg_head.gif" >
</div>
</div>
<div class="empty"></div>
<div class="div_line">
<div class="div_grey"></div>
<div class="div_blue">
<section id="login">
#Html.Partial("_LoginPartial")
</section>
</div>
</div>
<div class="empty"></div>
<!--
<div class="float-left">
<p class="site-title">#Html.ActionLink("Fleets Go Green Get Your Measurement", "Index", "Home")</p>
</div>
<div class="float-right">
<section id="login">
#Html.Partial("_LoginPartial")
</section>
<nav>
<ul id="menu">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("Fahrzeuge", "Index", "Fahrzeuge")</li>
<li>#Html.ActionLink("Impressum", "About", "Home")</li>
<li>#Html.ActionLink("Kontakt", "Contact", "Home")</li>
</ul>
</nav>
</div>-->
</div>
</header>
<!-- Body Layot-->
<layoutform>
<div class="div_content">
<div class="div_navi">
<div class="navi_empty"> </div>
<ul id="menu">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("Fahrzeuge", "Index", "Fahrzeuge")</li>
#if (User.Identity.IsAuthenticated)
{
<ul id="submenu">
<li>#Html.ActionLink("Smart Fortwo ED", "SmartFrortED", "Fahrzeuge")</li>
<li>#Html.ActionLink("Citroën C-Zero", "CitroenCZero", "Fahrzeuge")</li>
<li>#Html.ActionLink("miAmore", "Miamore", "Fahrzeuge")</li>
<li>#Html.ActionLink("VW Golf Blue e-Motion", "VWGolfBlueEMoon", "Fahrzeuge")</li>
<li>#Html.ActionLink("VW e-up!", "VWeup", "Fahrzeuge")</li>
<li>#Html.ActionLink("VW Elektro-Caddy", "VWElectroCaddy", "Fahrzeuge")</li>
</ul>
}
<li>#Html.ActionLink("Impressum", "About", "Home")</li>
<li>#Html.ActionLink("Kontakt", "Contact", "Home")</li>
#if (User.Identity.IsAuthenticated)
{
<li>#Html.ActionLink("Passwort ändern", "ChangePassword", "SGAccount")</li>
}
#if (User.IsInRole("Administrator"))
{
<li>#Html.ActionLink("Security Guard", "Index", "Dashboard", new { area = "SecurityGuard" }, null)</li>
}
</ul>
<div class="div_bottom_logo">
<img src="~/Images/995_bmu_logo_vmxk9d.png" >
</div>
</div>
<div class="div_text">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
</div>
<div class="empty"></div>
</layoutform>
<footer>
<div class="content-wrapper">
<div class="div_line">
<div class="div_grey"></div>
<div class="div_blue">© #DateTime.Now.Year - Niedersächsisches Forschungszentrum Fahrzeugtechnik (NFF) | IFAM Bremen |
</div>
</div>
<div class="empty"></div>
<!-- <div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year - imc Meßsysteme GmbH Berlin +49 (0)30 467090-0 - Frankfurt +49 (0)6172 59672-0 - Schweiz +41 (0)52 7221455 - Österreich +49 (0)6172-59672-0</p>
</div>-->
</div>
</footer>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Styles.Render("~/Content/themes/base/css")
#RenderSection("scripts", required: false)
</div>
</body>
myFile.js looks like this
var heightright = $('.rightcontent').height();
$('.leftcontent').css('height', heightright);
alert('JS working');
I'll throw out an idea using JS - FIDDLE.
Looking around a bit, apparently it's very difficult to do what you want with CSS without some fancy and less than optimal code (absolute positioning, etc)
References:
Floated div 100% height of parent inline-block div
Floated div 100% height of dynamic parent without absolute position?
How to make a floated div 100% height of its parent?
http://css-tricks.com/forums/topic/div-child-needs-to-have-height-of-100-of-div-parent/
JS
var heightright = $('.rightcontent').height();
$('.leftcontent').css('height', heightright);
You could call the js on pageload or on .change of the height of the right div.
Best of luck.
Try this CSS:
<style type="text/css">
/*-----------------navi_left area-----------------------*/
layoutform {
clear: both;
//background-color: #e2e2e2;
font-size: 1em;
height: 100%;
background:#0066FF;
}
.div_navi {
border:1px solid #CCCCCC;
width:216px;
display:block;
position:relative;
float: left;
height:100%;
}
/*------------------Contents area--------------------*/
.div_text{
border:1px solid #CCCCCC;
vertical-align:top;
width:761px;
//padding:0px 0px 0px 34px;
font-size:11px;
line-height:22px;
display:block;
position:relative;
float: right;
height:100%;
}
</style>
I'm learning Zurb Foundation, so this is my first web site attempt. I have a problem with the Stick Top Bar. It "kind of" works, but it does some strange things when collapsed (all my items collapse into the button menu == small screen/window).
The problem is that if I go to the bottom of the page and I click on the "Menu" button on the top bar (on a small screen/window), the page goes to the top. My english is not the best, so I'll live this preview of the webpage so you can check it out:
http://okgo.comuv.com/
Steps to reproduce:
1) Resize your browser window until the topbar becomes collapsed (mobile version of the topbar).
2) Scroll down to the bottom.
3) Click "menu".
I've tried removing almost everything on the page, but the problem still persists.
Here's the code so you can take a look at it:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Beyond The Sky</title>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/custom.modernizr.js"></script>
<style type="text/css">
body, html {
height: 100%;
width: 100%
}
#homepage {
background-color: black;
background-attachment: scroll;
background-image: url(img/nasabackground.jpg);
background-position: center center;
background-repeat: no-repeat;
height: 100%;
width: 100%;
}
#content {
background-color: black;
background-attachment: fixed;
background-image: url(img/stars.jpg);
background-position: center center;
background-repeat: repeat;
}
#homepagecontentwrapper {
height: 100%;
width: 100%;
overflow: hidden;
display: table;
}
#maintitlewrapper {
display: table-cell;
vertical-align: middle;
}
#maintitle {
color: black;
font-family: Verdana, sans-serif;
}
.centertext {
text-align: center;
}
</style>
</head>
<body>
<div id="homepage">
<div id="homepagecontentwrapper">
<div id="maintitlewrapper">
<div class="row">
<div class="small-12 columns">
<h1 id="maintitle">Hello There!<br/>This is a great site. Don't you think?</h1>
</div>
</div>
<div class="row">
<div class="large-2 small-6 columns centertext">
Contacto
</div>
<div class="large-2 small-6 columns centertext">
Nosotros
</div>
<div class="large-8 hide-for-small columns">
</div>
</div>
</div>
</div>
</div>
<div class="contain-to-grid sticky">
<nav class="top-bar">
<ul class="title-area">
<li class="name"><h1>Beyond The Sky</h1></li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="divider"></li>
<li class="active">Main Item 1</li>
<li class="divider"></li>
<li>Main Item 2</li>
<li class="divider"></li>
</ul>
</section>
</nav>
</div>
<!--Content Placeholder-->
<div id="content">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<!--End of Content Placeholder-->
<script>
document.write('<script src=' +
('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.alerts.js"></script>
<script src="js/foundation/foundation.clearing.js"></script>
<script src="js/foundation/foundation.cookie.js"></script>
<script src="js/foundation/foundation.dropdown.js"></script>
<script src="js/foundation/foundation.forms.js"></script>
<script src="js/foundation/foundation.joyride.js"></script>
<script src="js/foundation/foundation.magellan.js"></script>
<script src="js/foundation/foundation.orbit.js"></script>
<script src="js/foundation/foundation.placeholder.js"></script>
<script src="js/foundation/foundation.reveal.js"></script>
<script src="js/foundation/foundation.section.js"></script>
<script src="js/foundation/foundation.tooltips.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>
<script src="js/foundation/foundation.interchange.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Everything was perfect, until I changed a width. Instead of wrapping to a new line like normal when it gets to the div boundary, it extrudes from the box. The line length is the same as it was BEFORE I changed the div width. The line width not change to accommodate the change in div width as one would expect.
Page in question
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to TF2Shop</title>
<!-- Main Stylesheet -->
<link rel="stylesheet" type="text/css" href="../main.css" />
<link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css" />
<!-- Icomoon -->
<link rel="stylesheet" type="text/css" href="../icomooncss/style.css" />
</head>
<body>
<div class="navbar navbar-inverse navbar-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">TF2 Shop</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Home</li>
<li>Bank</li>
<li class="active">About</li>
<li><i class="icon-envelope" style="margin-right: 4px;"></i>Contact</li>
<li><i class="icon-heart" style="margin-right: 4px;"></i>Donate</li>
</ul>
</div><!--/.nav-collapse -->
<div style="float: right; margin-top: 8px;"><img src="../images/steam.png" /></div>
</div>
</div>
</div>
<div id="wrapper" style="height: 600px">
<div id="main-container">
<div id="about-section">
<ul>
<h1 style="text-decoration: underline; padding-top: 50px;">About</h1>
<li style="margin-bottom: 100px;">TF2bank was created by Josh Osborne, who is also the creator of Viddir.com. TF2 was the very first game he played on Steam and will always have a special place in his heart.</li>
<h1 style="text-decoration: underline;">Technology</h1>
<li style="margin-bottom: 100px;">TF2bank was built using HTML and CSS. SteamBot, written by Jesse Cardone is the base engine for the trade bots.</li>
<h1 style="text-decoration: underline;">Special Thanks</h1>
<li>Special thanks goes to Jesse Cardone, creator of SteamBot. Special thanks also goes to Valve for creating TF2 and Steam. And of course special thanks does to Slender Man from the StrangeBank for first
helping me code my first buds bot script and was patient and helpful the whole time!</li>
</ul>
</div>
</div>
</div>
<div id="footer">
<div id="copyright">© TF2Shop 2013</div>
<!-- <div id="info">A Slender Mann and Whizzard of Oz Collaboration</div> -->
<div style="color: #2f3034; height: 135px; width: 320px; padding-top: 30px; margin: 0 auto; font-family: 'Oswald', sans-serif; text-transform: uppercase; text-align: center;">
<div style="">
<h1 style="font-size: 57px; margin-top: -24px; padding-top: 3px; font-weight: bold; line-height: 56px;"><span style="font-size: 29px">Powered by</span><br /><span style="color: #313131; margin-left: -4px;">Steam</span></h1>
</div>
</div>
</div>
</body>
</html>
Your main-container is larger than your wrapper div.
#main-container {
width:1100px;
...
}
#wrapper {
width:1050px;
...
}
Your problem is that you've set the #wrapper div to 1050px and its child div main-container to 1100px.
If you want your wrapper div to be the same width as your container div just use this:
#wrapper {
width: 100%;
}
Now you can change the main container div without having to update the wrapper.
Your #wrapper has a CSS width of 1050px.
Your #main-container has a CSS width of 100px.
Thus the main-container div extends beyond the #wrapper div.
Either adjust the CSS width of #main-container, or clip the overflow by adding overflow: hiddenor overflow: scroll to #wrapper.