How to stop the right div wrapping below the left div - css

I am having a problem with a div wrapping underneath the left div it is side by side with, I want the div to get narrower until it is side by side with the menubar, and then stop moving but not wrap.
I have two divs side by side, the div on the left is a menu bar, and the one on the right is a div used to enter content on the site. The div on the left is set to take 16% of the width, and the one on the right is set to take 86% of the width. When I make the browser window narrower it resizes getting more narrow, until the mainpage div wraps underneath the menubar div. I want to stop the div wrapping underneath.
HTML
<html>
<head>
<meta content="en-gb" http-equiv="Content-Language">
<title>rthrhtdrhrth</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
.auto-style30 {
font-size: medium;
text-align: left;
}
.auto-style32 {
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
}
</style>
</head>
<body>
<!--In this site the design code is the same for each page such as the menubar, and banners however the mainpage content will be
different for each page as it contains that pages individual content.
<!--The below bannerdiv div, is the div that contains the top banner picture for the sight.
percentages are used throughout the site to maintain a liquid layout. -->
<div id="bannerdiv" align="left" title="Banner">
<img alt="z" height="114" src="Untitled3.jpg" width="100%"></div>
<div id="container">
<h3 id="container" class="auto-style4">ythtytytyytht</h3>
<!--The container div is used to create top green line. --></div>
<div id="menubar" align="center" style="width: 16%; height: 100px;" title="menu">
<!-- This is the code for the menubar, to add a new option to the menubar-->
<!-- Add a new <li> tag below the bottom link, to delete a link, delete the desired
link element. -->
<ul>
<li style="">
<img alt="logo" height="63" src="images/ClevelandLogo.gif" width="126"></li>
<li><a auto-style5"="" href="index.html" style="height: 20px; class=">Home</a></li>
<li>General</li>
<li>Site map</li>
<li>Rules & Procdures</li>
<li>Envirommental</li>
<li>Energy</li>
<li>IT</li>
<li>SAP</li>
<li>Purchasing</li>
<li>Quality</li>
<li>Safety</li>
<li>Human resources</li>
<li>Production</li>
<li>Engineering</li>
<li>Feedback</li>
<li>Teesdock</li>
<li>Company mobile phones</li>
<li>Climate Survery Updates</li>
<li>Training</li>
<li>Sports Dome</li>
</ul>
</div>
<!--The mainpage div is where all the page's indivdual content is displayed.-->
<div id="mainpage" class="auto-style1" style="height: 486px; width: 84%; float: right; color: #000000; font-size: 11pt;">
</div>
<!-- The container1 div is used to create the bottom green line in the site -->
</div>
<h3 id="container1" class="auto-style4" style="width: 100%"></h3>
</div>
<br>
<!-- Picturecontainer2 contains the image that creates the bottom site banner. -->
<div id="picturecontainer2" style="float: left;">
<img alt="z" height="114" src="da.png" width="100%"></div>
</div>
</body>
</html>
CSS:
#container {
overflow-x:hidden;
margin: 0px;
background-color: #008852;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
color: #FFFFFF;
text-align: left;
max-width: 10%;
}
#main
{
overflow-x:hidden;
height: 100%;
weight: 100&;
}
html, body {
overflow-x: hidden;
height: 100%;
}
#picturecontainer1{
float: left;
}
#menubar
ul
{
list-style-type: none;
margin: 0;
padding: 0;
float: left;
margin-right: 30px
}
#menubar a:link, #menubar a:visited
{
border-top-width: 1px;
display: block;
font-weight: bold;
color: #000000;
background-color: #EFF1EB;
width: 180px;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
border-style: solid;
border-color: #638529;
font-family: Arial, Helvetica, sans-serif;
border: 1px;
position: fixed;
}
#mainpage {
border: thin solid #008852;
width: 84%;
float: none;
background-color: #EDEFEE;
height: auto;
border-radius: 20px;
height: 100%;
position: fixed;
color: #008852;
clear: none;
}
#menubar a:hover, #menubar a:active
{
background-color: #7A991A;
}
#menubar {
border-width: 1px;
border-style: none;
font-size: xx-small;
width: 50%;
margin-top: 11px;
float: left;
vertical-align: 0%;
}
#bannerdiv
{
margin-bottom: 20px;
}
.newStyle1 {
text-align: left;
}
footer {
font-family: Arial, Helvetica, sans-serif;
text-align: left;
background-color: #008852;
}
.auto-style1 {
text-align: center;
margin-left: 0px;
margin-top: 11px;
font-family: Georgia;
margin-right: 0px;
}
s
#bannerdiv {
text-align: center;
}
.auto-style4 {
margin-left: 0px;
text-align: left;
}
.auto-style5 {
margin-top: 0px;
}
.auto-style8 {
text-align: left;
font-size: xx-small;
}
.auto-style6 {
text-align: left;
font-size: xx-small;
font-weight: bold;
}
.auto-style10 {
margin-left: 0px;
}
.auto-style12 {
text-align: left;
font-size: xx-small;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style11 {
font-family: Arial, Helvetica, sans-serif;
}
.auto-style9 {
font-family: "Franklin Gothic Medium";
position: fixed;
}
#container1 {
font-family: Arial, Helvetica, sans-serif;
margin-top: 20px;
background-color: #008852;
clear: right;
}
#table {
}
#mainpage a:link, #mainpage a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-weight: bold;
}
#picturecontainer2 {
border-style: none;
float: left;
position: static;
clear: none;
display: inline;
vertical-align: top;
clear: both;
}
#picturecontainer1 {
border-style: none;
width: 126px;
border-right-width: thick;
border-bottom-width: thick;
border-left-width: thick;
}
.auto-style20 {
text-align: center;
}
.auto-style21 {
border-collapse: collapse;
border-width: 0px;
background-color: #EDEFEE;
}
.auto-style19 {
text-align: left;
font-size: small;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style17 {
text-align: left;
font-size: x-small;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style15 {
text-align: left;
font-size: x-small;
font-weight: normal;
}
.auto-style18 {
text-align: left;
font-size: 12pt;
}
#mainpage a:link, #mainpage a:visited {
}
.auto-style23 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11pt;
a text-decoration: none;
}
.auto-style14 {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
}
#picturecontainer2 img, #bannerdiv img {
overflow: hidden;
width: 100%;
}
.auto-style21 {
font-weight: normal;
}
#picturecontainer2 {
border-style: none;
float: left;
}
.auto-style14 {
text-align: center;
}
.auto-style15 {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
#mainpage a:hover a: active {
font-family: Arial, Helvetica, sans-serif;
}
.auto-style25 {
text-align: left;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style26 {
text-align: left;
font-size: x-small;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style38 {
font-size: medium;
text-align: center;
}
.auto-style27 {
text-align: left;
font-size: small;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style24 {
text-align: center;
}
p, h2, h3, h4, td, a {
color: #008852;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style14 {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
}
.auto-style15 {
text-align: left;
font-size: 9pt;
font-weight: normal;
}
.auto-style17 {
text-align: left;
font-size: 9pt;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style18 {
text-align: left;
font-size: 12pt;
}
.auto-style19 {
text-align: left;
font-size: small;
font-family: Arial, Helvetica, sans-serif;
}
#picturecontainer2 {
border-style: none;
float: left;
}
.auto-style20 {
text-align: left;
font-size: 9pt;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style21 {
font-weight: normal;
}
#query {
height: 200px;
}
.auto-style30 {
font-size: medium;
text-align: left;
}
.auto-style32 {
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
}
.auto-style14 {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
}
.auto-style15 {
text-align: left;
font-size: 9pt;
}
.auto-style17 {
text-align: left;
font-size: 9pt;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style18 {
text-align: left;
font-size: 12pt;
}
.auto-style19 {
text-align: left;
font-size: small;
}
#picturecontainer2 {
border-style: none;
float: left;
}
#wrapper {
min-width:100%
}


Start with removing the position:fixed you have on #mainpage and see how that helps you. You do have a lot of style going on, and that makes it hard to troubleshoot. You should first get your positioning set and then add the pretty stuff once you have it laid out right (IMHO).

Related

How to make padding responsive

I'm new to learning HTML and CSS and I really struggle with responsive design. I want to make my nav bar responsive and I think the best way is to edit the padding. If someone could give me some pointers I would really appreciate it.
.navbar-left {
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 36px 29px;
text-decoration: none;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.navbar-center {
float: left;
font-size: 30px;
color: black;
text-align: center;
padding: 27px 311px;
text-decoration: none;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.navbar-right {
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 36px 29px;
text-decoration: none;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.navbar-left:hover,
.navbar-right:hover {
background-color: #f8f8f8;
}
<nav>
<a class="navbar-left" href="bio.html">About</a>
<a class="navbar-left" href="resume.html">Resume</a>
</nav>
<nav>
<a class="navbar-center" href="index.html">Sydnie Knowlton</a>
</nav>
<nav>
<a class="navbar-right" href="works.html">Portfolio</a>
<a class="navbar-right" href="contact.html">Contact</a>
</nav>

set the width your three nav to 33.33% and float them all to the left
don't rely on the side padding, use width:50% so the two links inside the nav fill all the space inside, and text-align:center to center the content
* {
box-sizing: border-box;
}
nav {
width: 33.33%;
float: left;
}
.navbar-left {
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 36px 2%;
text-decoration: none;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
width: 50%;
}
.navbar-center {
float: left;
font-size: 30px;
color: black;
text-align: center;
padding: 27px 0;
text-decoration: none;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
text-align: center;
}
.navbar-right {
float: right;
font-size: 16px;
color: black;
text-align: center;
padding: 36px 2%;
text-decoration: none;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
width: 50%;
}
.navbar-left:hover,
.navbar-right:hover {
background-color: #f8f8f8;
}
<nav>
<a class="navbar-left" href="bio.html">About</a>
<a class="navbar-left" href="resume.html">Resume</a>
</nav>
<nav>
<a class="navbar-center" href="index.html">Sydnie Knowlton</a>
</nav>
<nav>
<a class="navbar-right" href="works.html">Portfolio</a>
<a class="navbar-right" href="contact.html">Contact</a>
</nav>

Display inline not working, styling with Sass

I am trying to build this drop down navigation bar, I am using Sass for the styling and jQuery for the drop down effect. I am trying to make the navigation bar inline however it is not working too well for me. Can anyone point me in the right direction as to what I am doing wrong? Thanks.
Here is my HTML:
<!--Navigation Bar -->
<div class="navigation_bar">
<nav>
<ul>
<li>Home</li> |
<li>About</li> |
<!-- <div class="sub_menu">
<li>sub_link</li>
<li>sub_link</li>
<li>sub_link</li>
</div> -->
<li>Schedule</li> |
<li>Contact</li> |
<li>Gallery</li>
</ul>
</nav>
</div>
And here is the Sass:
#mixin navigation_bar {
nav {
background: #fff;
height: 100px;
width: 100%;
margin-top: 10px;
ul, li {
list-style-type: none;
display: inline;
a {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-size: 14px;
text-decoration: none;
color: #a4a4a4;
padding: 30px;
&:hover {
color: #000;
}
}
}
}
}
.navigation_bar {
#include navigation_bar;
}

working example below
Codepen
#mixin navigation_bar {
nav {
background: #fff;
height: 100px;
width: 100%;
margin-top: 10px;
ul {
list-style-type: none;
font-size: 0;
li {
display: inline-block;
vertical-align: top;
&:first-child a {
background: #ddd;
}
}
a {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-size: 14px;
text-decoration: none;
color: #a4a4a4;
padding: 30px;
background:#ddd url('http://i.imgur.com/tY2FYyp.png') left 50% no-repeat;
display: block;
&:hover {
color: #000;
}
}
}
}
}
.navigation_bar {
#include navigation_bar;
}

My media queries not applying to mobile device. Is my code wrong in some way? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I am not sure why my media queries are not working on the mobile phone. When I slide the desktop version to be narrow like a mobile phone, the smaller tablet and mobile views seem to work. But they do not work on an actual device. Is something wrong my my code?
Site here: http://jenniferblatzdesign.com/.
#import url('http://fonts.googleapis.com/css?family=Gabriela');
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
bottom: 30px;
}
html { overflow-y: scroll; }
body {
background: #fcfcfc url('bg.png'); /* http://subtlepatterns.com/crossword/ */
font-size: 62.5%;
line-height: 1;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 45px 25px;
padding-bottom: 100px;
}
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* Basic Styles */
body {
background-color: #ece8e5;
}
nav {
height: 40px;
width: 94%;
background: #0068ac;
font-size: 1.5 em;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
position: relative;
border-bottom: 2px solid #283744;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 800px;
height: 40px;
}
nav li {
display: block;
float: left;
width: 20%;
text-align: center;
}
nav a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
nav li a {
border-right: none;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #89a8bc;
}
nav a#pull {
display: none;
}
#header {
text-align: center;
}
#header h1 {
display: none;
}
#header h2 {
width: 70%;
margin-top: 30px;
margin-bottom: 40px;
margin-left: auto;
margin-right: auto;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 2.3em;
line-height: 1.9em;
text-align: center;
font-weight: 200;
}
#header img {
width: 50%;
margin-bottom: 40px;
margin-top: 30px;
}
#footer p {
margin-top: 10px;
font-size: 1.1em;
font-weight: 200;
line-height: 1.5em;
text-align: center;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#content #footer p a {
color: #005496;
}
#footer ul li a {
color: #005496;
}
#footer ul li {
display: inline;
padding-top: 20px;
margin-top: 50px;
margin-left: 20px;
margin-right: 20px;
}
#about h3 {
color: #005496;
font-weight: 300;
font-size: 2.5em;
margin-bottom: 1px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 2.2em;
}
#praise h3 {
color: #005496;
font-weight: 300;
font-size: 2.5em;
margin-bottom: 10px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 2.7em;
}
#about p {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 200;
font-size: 1.6em;
line-height: 1.7em;
}
#about p a {
color: #005496;
}
#praise p {
width: 70%;
padding-left: 25px;
color: #474646;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: italic;
font-weight: 300;
font-size: 1.7em;
line-height: 1.4em;
margin-top: 10px;
margin-bottom: 20px;
}
#praise h5 {
padding-left: 40px;
color: #4C3B5F;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 1.8em;
}
#praise h6 {
padding-left: 56px;
color: #474646;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: italic;
font-weight: 300;
font-size: 1.2em;
line-height: 2em;
}
#praise hr {
height: 1px;
margin-top: 30px;
margin-bottom: 30x;
color: #7B7979;
}
#about {
width: 70%;
}
#contact h3 {
color: #005496;
font-weight: 300;
font-size: 2.5em;
margin-bottom: 1px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 2.2em;
margin-top: 40px;
}
#header p {
color: #4C3B5F;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 2.3em;
line-height: 1.5em;
margin-top: -30px;
font-weight: 500;
}
#contact p {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 200;
font-size: 1.6em;
line-height: 1.7em;
}
#contact p a {
color: #005496;
}
#social h3 {
color: #005496;
font-weight: 300;
font-size: 2.5em;
margin-bottom: 1px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 2.2em;
margin-top: 40px;
}
#social h2 img {
margin-top: 10px;
margin-right: 10px;
}
#social {
width: 90%;
}
#linkedin h2 a {
color: #005496;
font-weight: 400;
font-size: 1.9em;
margin-bottom: 0px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 2em;
margin-top: 0px;
display: block;
padding-bottom: 0px;
text-decoration: none;
}
#twitter h2 a {
color: #005496;
font-weight: 400;
font-size: 1.9em;
margin-bottom: 0px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 2em;
margin-top: 0px;
display: block;
padding-bottom: 0px;
text-decoration: none;
}
#behance h2 a {
color: #005496;
font-weight: 400;
font-size: 1.9em;
margin-bottom: 0px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 2em;
margin-top: 0px;
display: block;
padding-bottom: 0px;
text-decoration: none;
}
#facebook h2 a {
color: #005496;
font-weight: 400;
font-size: 1.9em;
margin-bottom: 0px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 2em;
margin-top: 0px;
display: block;
padding-bottom: 0px;
text-decoration: none;
}
#pinterest h2 a {
color: #005496;
font-weight: 400;
font-size: 1.9em;
margin-bottom: 0px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 2em;
margin-top: 0px;
display: block;
padding-bottom: 0px;
text-decoration: none;
}
/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
nav {
height: auto;
width: 94%;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 20%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: center;
width: 100%;
text-indent: 5px;
}
#header img {
width: 90%;
margin-bottom: 40px;
margin-top: 30px;
}
#header h2 {
width: 80%;
margin-top: 30px;
margin-bottom: 40px;
margin-left: auto;
margin-right: auto;
font-size: 1.7em;
line-height: 1.7em;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: center;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
text-align: center;
width: 94%;
}
nav li {
width: 100%;
float: left;
position: relative;
text-align: center;
}
nav a#pull {
display: block;
background-color: #ece8e5;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
#header img {
width: 100%;
margin-bottom: 30px;
margin-top: 30px;
}
#praise p {
width:95%;
}
#about {
width: 100%;
}
}
/*Smartphone*/
#media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
text-align: center;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
br { display: block; line-height: 1.6em; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1.2em;
line-height: 1.6em;
text-align: center;
text-decoration: none;
}
ol, ul { list-style: none; }
input, textarea {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;
}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong, b { font-weight: bold; }
strong, b { font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif}
em, i { font-style: italic; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
h1 {
font-family: 'Gabriela', Tahoma, sans-serif;
font-size: 3.7em;
font-weight: 700;
line-height: 1.55em;
margin-bottom: 18px;
text-align: center;
color: #514b53;
letter-spacing: -0.06em;
text-shadow: 1px 1px 0 rgba(255,255,255,0.8);
}
/** page structure **/
#wrapper {
display: block;
max-width: 1100px;
margin: 0 auto;
}
#portfolio {
display: block;
}
#portfolio li {
display: block;
float: left;
width: 30%;
max-width: 400px;
margin-right: 20px;
margin-bottom: 20px;
}
#portfolio li a {
display: block;
padding: 8px;
background: #fff;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.25);
-moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.25);
box-shadow: 1px 2px 2px rgba(0,0,0,0.25);
}
.mfp-title {
font-size: 1.2em;
color: #ddd !important;
font-weight: 700;
}
/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
/** media queries **/
#media screen and (max-width: 780px) {
#portfolio li {
width: 45%;
}
}
#media screen and (max-width: 550px) {
#portfolio {
text-align: center;
}
#portfolio li {
float: none;
display: inline-block;
width: 80%;
margin-bottom: 30px;
}
}

Most likely has to do with your Viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

HTML Width scaling unwanted horizontal scrollbar

I am using percentages on the divs in my webpage but I am having a problem where the divs are extending too far and creating an undesirable horizontal scroll bar, I want the divs to expand to 100% of the page and not exceed it. Any help would be greatly appreciated I have looked at the image sizes and messed around with them and now have tried 100% width on each but to no avail.
So to clarify I want to the page width horizontally to fit the page width but not so that it creates a horizontal scrollbar.
Below is my HTML and CSS:
HTML:
<html>
<head>
<meta content="en-gb" http-equiv="Content-Language">
<title>dfgfdgdfg</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
#picturecontainer2 {
border-style: none;
float: left;
}
</style>
</head>
<body>
<div id="bannerdiv" align="left" title="Banner">
<img alt="z" height="114" src="Untitled3.jpg" width="100%"></div>
<div id="container">
<h3 class="auto-style4" id="container">drgrgergergdg</h3>
</div>
<div id="menubar" style="width: 16%; height: 100px;" title="menu" align = "center">
<ul>
<li style ="align = center;""><img alt="logo" height="63" src="images/drgrg.gif" width="126"></li>
<li >Home</li>
<li>General</li>
<li>Site map</li>
<li>Rules & Procdures</li>
<li>Envirommental</li>
<li>Energy</li>
<li>IT</li>
<li>SAP</li>
<li>Purchasing</li>
<li>Quality</li>
<li>Safety</li>
<li>Human resources</li>
<li>Production</li>
<li>Engineering</li>
<li>Feedback</li>
<li>Teesdock</li>
<li>Company mobile phones</li>
<li>Climate Survery Updates</li>
<li>Training</li>
<li>Sports Dome</li>
</ul>
</div>
<div id="mainpage" class="auto-style1" style="height: 96px; width: 84%; float:right;height:80; color: #000000; font-size: 11pt; left: 0px; top: 176px;">
<font face="Garamond"><font face="Arial" size="4">
<p><b>SPORTS DOME</b></p>
<p><span lang="en-gb"><b><font color="#ff0000" face="Arial" size="4">
Contact Craig Bayliss Ext 3600 for all Dome bookings, events, circuit
training, weight training, table tennis etc.</font></b></span></p>
<p><span lang="en-gb"><font color="#000000" face="Arial"><b>
Click</b></font><font face="Arial"> on the links below for more information</font></span></p>
<p>
</font><font face="Arial">
<a href="file://cplfs01/dept/sports%20dome/Application%20Forms" style="TEXT-DECORATION: none">
Application Forms</a></font></p>
<p><font face="Arial">
<a href="file://cplfs01/dept/sports%20dome/Rules%20and%20Procedures" style="TEXT-DECORATION: none">
Rules and Procedures</a> </font></p>
<p><font face="Arial">
<a href="file://cplfs01/dept/sports%20dome/Sports%20Dome%20Booking%20Forms" style="TEXT-DECORATION: none">
Sports Dome Booking Forms</a></font></p>
</font>
</div>
<h3 class="auto-style4" id="container1"style = width:100%></h3>
</div>
<br>
<div id="picturecontainer2" style ="float: left;">
<img alt="z" height="114" src="da.png" width="100%"></div>
</div>
</body>
</html>
CSS:
#container {
margin: 0px;
background-color: #008852;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
color: #FFFFFF;
text-align: left;
max-width: 10%;
}
#main
{
height:100%;
weight:100&
}
html, body {
overflow: auto;
height: 100%;
}
#picturecontainer1{
float: left;
}
#mainpage {
border: thin solid #008852;
width: 84%;
float: left;
background-color: #EDEFEE;
height: auto;
border-radius: 20px;
height: 100%;
position: fixed;
color: #008852;
}
#menubar
ul
{
list-style-type: none;
margin: 0;
padding: 0;
float: left;
}
#menubar a:link, #menubar a:visited
{
border-top-width: 1px;
display: block;
font-weight: bold;
color: #000000;
background-color: #EFF1EB;
width: 180px;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
border-style: solid;
border-color: #638529;
font-family: Arial, Helvetica, sans-serif;
border: 1px;
position: fixed;
}
#menubar a:hover, #menubar a:active
{
background-color: #7A991A;
}
#menubar {
border-width: 1px;
border-style: none;
font-size: xx-small;
width: 50%;
margin-top: 11px;
float: left;
vertical-align: 0%;
}
#bannerdiv
{
margin-bottom:20px;
}
.newStyle1 {
text-align: left;
}
footer {
font-family: Arial, Helvetica, sans-serif;
text-align: left;
background-color: #008852;
}
.auto-style1 {
text-align: center;
margin-left: 0px;
margin-top: 11px;
font-family: Georgia;
margin-right: 0px;
}
s
#bannerdiv {
text-align: center;
}
.auto-style4 {
margin-left: 0px;
text-align: left;
}
.auto-style5 {
margin-top: 0px;
}
.auto-style8 {
text-align: left;
font-size: xx-small;
}
.auto-style6 {
text-align: left;
font-size: xx-small;
font-weight: bold;
}
.auto-style10 {
margin-left: 0px;
}
.auto-style12 {
text-align: left;
font-size: xx-small;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style11 {
font-family: Arial, Helvetica, sans-serif;
}
.auto-style9 {
font-family: "Franklin Gothic Medium";
position: fixed;
}
#container1 {
font-family: Arial, Helvetica, sans-serif;
margin-top: 20px;
background-color: #008852;
clear: right;
}
#table {
}
#mainpage a:link, #mainpage a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-weight: bold;
}
#picturecontainer2 {
border-style: none;
float: left;
}
#picturecontainer1 {
border-style: none;
width: 126px;
border-right-width: thick;
border-bottom-width: thick;
border-left-width: thick;
}
.auto-style20 {
text-align: center;
}
.auto-style21 {
border-collapse: collapse;
border-width: 0px;
background-color: #EDEFEE;
}
.auto-style19 {
text-align: left;
font-size: small;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style17 {
text-align: left;
font-size: x-small;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style15 {
text-align: left;
font-size: x-small;
font-weight: normal;
}
.auto-style18 {
text-align: left;
font-size: 12pt;
}
#mainpage a:link, #mainpage a:visited {
}
.auto-style23 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11pt;
a text-decoration: none;
}
.auto-style14 {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
}
.auto-style15 {
text-align: left;
font-size: 9pt;
font-weight: normal;
}
.auto-style17 {
text-align: left;
font-size: 9pt;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style18 {
text-align: left;
font-size: 12pt;
}
.auto-style19 {
text-align: left;
font-size: small;
font-family: Arial, Helvetica, sans-serif;
}
#picturecontainer2 {
border-style: none;
float: left;
}
.auto-style20 {
text-align: left;
font-size: 9pt;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style21 {
font-weight: normal;
}
#picturecontainer2 {
border-style: none;
float: left;
}
.auto-style14 {
text-align: center;
}
.auto-style15 {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
#mainpage a:hover a: active {
font-family: Arial, Helvetica, sans-serif;
}
.auto-style25 {
text-align: left;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style26 {
text-align: left;
font-size: x-small;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
.auto-style27 {
text-align: left;
font-size: small;
font-family: Arial, Helvetica, sans-serif;
}

You can use CSS Overflow;
overflow-x:hidden;
This will hide the horizontal scrollbar

yes, add overflow:hidden in your css
and please dont use inline css and external css, it makes us viewers more hard to read and understand. Always use either one - preferred external css

add:
overflow:hidden;
to your desired divs CSS

overflow-x: hidden;
you can fixed that error.

CSS issue with top margin in safari

I can't get a top margin to show in safari. CSS works fine and the #divcontainer has a top margin and is centered in firefox and other browsers but not in safari.
I would like a 10px space to show above the container which will hold all other content.
Here is the CSS:
/* CSS Document */
body {
color: #000000; /*This sets all text to Black*/
/*background-color: #FFFFFF; /*This sets the bacground to white*/
margin: 100px auto; /*This sets the margin to zero*/
padding:0;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000099;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000099;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000099;
}
.redtext {
color: #FF0000;
}
a {
color: #009900;
}
a:link {
color: #000099;
text-decoration: underline;
}
a:visited {
color: #666666;
text-decoration: none;
}
a:hover {
text-decoration: none;
background-color: #CCCCCC;
}
a:active {
text-decoration: none;
}
.menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
.menu a:link {
color: #336600;
text-decoration: none;
}
.menu a:visited {
color: #666666;
text-decoration: none;
}
.menu a:hover {
color: #990000;
text-decoration: none;
}
.menu a:active {
color: #666666;
text-decoration: none;
}
div#container {
width: 960px;
height:760;
overflow:auto;
/*margin-left:0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}
div#outer {
margin-left: auto;
margin-right: auto;
width: 960px;
}
div#header {
position:relative;
text-align: center;
width: auto;
}
div#nav {
width: auto;
padding: 10px;
margin-top: 1px;
position:relative;
}
div#main {
position:relative;
width: auto;
}
div#footer {
position:relative;
width:auto;
padding: 15px;
margin: 0px;
}#nav {
position: relative;
padding:20px;
width: auto;
}

You'll probably want to set the margin: 10px auto; on the #container. Usually, I do this:
body {
text-align: center;
padding: 0;
margin: 0;
}
#container {
width: 960px;
height: 760px;
text-align: left;
margin: 10px auto;
}
...assuming the #container div is the first element, that should work out.
You may also want to try out one of the css reset files out there.

Resources