HTML/CSS - How do I fix width:100% cutting off when the content creates a horizontal scroll bar? -

-

i've looked solution , have never found one. maybe didn't hard enough, i've tried doesn't work. problem has bothered me forever , i've never been able fix it.

my problem occurs when trying make div or other element take 100% of width of page. container of content on page 960px. when in fullscreen browser there no problem, when adjust browser window size smaller width of content create horizontal scroll bad , 100% elements not retain 100% width, creating cutoff.

here example page: http://www.yenrac.net/

does know how fix this? element in case red header banner @ top of website.

html (actually little php wordpress):

  <body> <div class="header">   <div class="clearfix" id="header">     <h1><?php bloginfo('name'); ?></h1>     <h3>a spooky site</h3>    </div> </div>

css:

body {   margin: 0px; }  .header {   height: 100px;   width: 100%;   background: #8f2525;   color: #fff; }  .clearfix {   width: 960px;   height: 100px;   margin: 0 auto; }  .clearfix h1 {   margin: 0px;   padding: 15px 0px 0px 10px;   color: #fff; }  .clearfix h3 {   margin: 0px;   padding: 0px 10px; }

this effect happens when zooming in far enough make content exceed border of browser window/viewport.

first, don't use clearfix class that. has specific common use , you'll confuse , others later.

your clearfix width 960px. parent, header, set 100% width. header size page. clearfix 960px regardless of page or parent width how set it.

depending on want, there several solutions:

  1. set width:100% on clearfix, rather width:960px
  2. set max-width:100% on clearfix
  3. remove width:960px clearfix

based on other comments, want option 2.


Comments

Post a Comment

Popular posts from this blog

php - Autoloader issue not returning Class -

-
problem? bootloader (autoloader) not seem working properly, or i'm missing something. here simplified code. the code below returns class "skeleton" not exist. on index.php file. index.php <?php include 'bootloader.php'; use skeleton\html\loginheader; $tool = new skeleton/html/loginheader(); bootloader.php <?php function boot($classname) { $filename = ''; $namespace = ''; // sets include path "src" directory $includepath = dirname(__file__).directory_separator.'src'; if (false !== ($lastnspos = strripos($classname, '\\'))) { $namespace = substr($classname, 0, $lastnspos); $classname = substr($classname, $lastnspos + 1); $filename = str_replace('\\', directory_separator, $namespace) . directory_separator; } $filename .= str_replace('_', directory_separator, $classname) . '.php'...
Read more

jsf - "PropertyNotWritableException: Illegal Syntax for Set Operation" error when setting value in bean -

-
this question has answer here: how send form input values , invoke method in jsf bean 1 answer i error when trying send values jsf page bean. i want set values fields in bean, create airplane instance , add database. error telling me use illegal syntax setter part of bean. why error? didnt find on site helped me problem. here jsf part: <h4>add plane</h4> <c:if test="#{not empty listairplanebb.error}"> <div class="alert alert-danger"> <span class="glyphicon glyphicon-remove"></span> <h:outputtext value="#{listairplanebb.error}" /> </div> </c:if> <h:form> <table class="table"> <thead> ...
Read more

java - How to put two numbers separated by a space into two different arrays -

-
i have 2 number inputs 1010 212 i want put these 2 different arrays ([1 0 1 0] , [2 1 2]) this code import java.io.*; import java.util.*; public class solution { public static void main(string[] args) { int array[] = new int[8]; int array2[] = new int[8]; int = 0; scanner getnumber = new scanner(system.in); { array[i] = getnumber.nextint(); i++; } while(getnumber.hasnextint()); system.out.println(arrays.tostring(array)); } } but output [1010, 212, 0, 0, 0, 0, 0, 0] (i put 8 generic array length because java compiler forced initialize each array) you need store numbers first initialize arrays based on length of number. can length turning string. once left number , empty array, can split integer array of digits number of ways. int[] array, array2; scanner in = new scanner(system.in); int a, b; = in.nextint(); b = in.nextint(); array = new int[integer.tostring(a...
Read more