Why do my center-aligned divs not scroll to the left?

Why do my center-aligned divs not scroll to the left?

Why do my center-aligned divs not scroll to the left?

(Note: There are no scrollbars on these divs, so there is literally no way to scroll to the left, whether it be in the body or within the divs themselves.)

The problem (pictured above in FF and Opera), which exists on both the "Baroque" and "Spotlights" theme selections (see below for links), is that when you shrink the browser small (e.g. under ~900 width), the horizontal scroll bar does not scroll to the left. It will scroll to the right just fine, but it doesn't care at all if the navigation menu gets shoved off the left side of the screen and is completely inaccessible.

What would make it do this?

Here is the pertinent HTML:

<div class="center1"> <div class="center2"> <div style="position:relative; top:180px; width:1226px;" id="containerBGimgLParent"> <div id="containerBGimgL"></div><img src="images/skin3/dark_interface_parts5b.png"> </div> </div> </div> <div class="center1"> <div class="center2"> <div id="containerBG"> <div id="NavMenu"> <ul class="kwicks"> <li id="kwick1"></li> <li id="kwick2"></li> <li id="kwick3"></li> <li id="kwick4"></li> <li id="kwick5"></li> <li id="kwick6"></li> <li id="kwick7"></li> </ul> </div> </div> </div> </div> <div id="contentdiv"></div>

... and CSS:

body { background-image: url("../images/skin3/DIBG.png"); background-repeat: repeat; font-family: "Times New Roman"; } #NavMenu { float:left; width:170px; background-color: #000; padding:5px; } .center1 { position:absolute; right:50%; } .center2 { position:relative; left:50%; } #containerBGimgL { background-image:url('../images/skin3/dark_interface_parts5a.png'); background-repeat: no-repeat; width:1040px; height:672px; display:inline-block; } #containerBG { width: 980px; position:relative; top:274px; } #contentdiv { position:absolute; top:320px; left:700px; width:600px; height:526px; text-align:left; padding: 0px 20px 0px 0px; background-color: #000; overflow-y: scroll; color:#fff; }

The javascript resize function changes the dimensions of a few divs, but does nothing that would result in this problem. It does not, for example, change any div's overflow to hidden.

To see the problem in action, click here: http://www.solarcoordinates.com/testing3/index.html. (I don't currently have it working when JS is disabled, so JS will have to be enabled if you want to look.)

--------------Solutions-------------

You should center the main section with another method:

  • On .center1 remove your position and right rules.
  • On .center2 remove your position and left rules.
  • On #containerBG, add margin: 0 auto to center it again.

Testing in Chrome with JS enabled, and resizing the window to a few different sizes, it looks the same as before, with the exception that your problem is fixed.

It also works in Firefox, just tested it.

It seems that you no longer need <div class="center1"> and <div class="center2">. You can can remove them.

Category:css Time:2011-02-19 Views:0
Tags: html css

Related post

  • Center align div inside div? 2011-12-21

    How do I center align 3 floating divs inside each other centered on page ? <div style="width:100%"> <div style="width:90%"> <div style="width:80%"> //Content </div> </div> </div> --------------Solutions------------

  • How to center align div even the width is 100% 2013-08-22

    I am using a <div> container and set that container to 100%. Inside that container i have mentioned several <div> with 50% and it align to left side. Now my question is, whether can i center align the main container to align center. So th

  • center aligned div isnt actually center 2011-07-14

    okay i have a div nested inside another div and the inner div is centered with 80% width. but its not fully centered. how would i make it fully centered? http://jsfiddle.net/xx8hx/ http://postimage.org/image/15linq5yc/ html <div class="wrap">

  • center align three divs side by side with CSS 2011-02-18

    I've got three divs side by side in a container that sets itself to the width of the user's window. I want them to stay nested next to each other, and centered as a unit in the dynamic container. I'd like to do this without putting them into another

  • How can I center align a div without knowing the width? 2009-07-14

    I've looked this up and the outlook seems bleak. I'm not interested in using a table. I have 6 or so 'a element' inline-blocks that make up a menu. It's slick, except all the 'a elements' are set to width: auto; to accommodate their text. Without an

  • Is it possible to have a div bottom center aligned with the width? 2009-08-03

    Is it possible to have a div center aligned (ie) always i need to have the div in bottom center with fixed position in a specified width. I know to have it left or right? is there is any way? --------------Solutions------------- I think this may help

  • CSS : How do I vertically-center align text in a div ? (or any other elements which is not a table) 2009-08-25

    To vertically-center align text in a table-cell, I use vertical-align: middle in the td. But the above doesn't work with divs, spans, header and other non-table elements. So how can I vertically-center align text in such elements ? --------------Solu

  • center aligning a fixed position div 2010-05-18

    I'm trying to get a div that has position:fixed center aligned on my page. I've always been able to do it with absolutely positioned divs using this "hack" left: 50%; width: 400px; margin-left:-200px ...where the value for margin-left is half the wid

  • Cross browser div center alignment using CSS 2010-05-29

    What is the easiest way to align a div whose position is relative horizontally and vertically using CSS ? The width and the height of the div is unknown, i.e. it should work for every div dimension and in all major browsers. I mean center alignment.

  • Center a div in a horizontal scrolling site 2011-02-23

    Wonder if anyone could advise on the best way to center a div in the middle of the screen of a horizontal scrolling site. I want the header to stay positioned in the center of the screen but the rest of the site scrolls. usually I'd just set left and

  • align div center in front of other divs with jquery 2011-03-27

    I need to align div with loader in front of other divs at center of the page. Could someone please show me working example how to accomplish it with jquery? --------------Solutions------------- Something similar to this should work: $('.element').css

  • how to center align a sub div 2011-05-02

    I need to center align a sub div within the parent div without using text-align:center / align:center; Basically I tried the following example. I realise that in order for margin:auto to work, I need to specify a width (cannot use auto) into the sub

  • Center-align a div next to a float 2011-07-04

    I am trying to center-align an image inside of a div contained in a 940px width page. <div class="header"> <img class="logo" href="x"/> <ul class="topLinks"> <li>blah</li> </ul> </div> I have the "topLinks" u

  • How do you Horizontally center align a DIV that is absolutely positioned in another DIV? 2011-07-05

    How do you Horizontally center align a DIV that is absolutely positioned in another DIV ? HTML <div style="width:250px;height:250px;background:red;position:relative;"> <div style="width:100px;height:100px;background:blue;position:absolute;"

  • center one div inside of another div - align the centers 2011-07-08

    I am creating a tab with rotated text - I'm trying to center one div inside another, however I want the centers of the divs to be aligned but I'm getting alignment issues: <div class="tileStrip" style="position:relative;width:100%;height:185px;bac

  • Two Divs on the same row and center align both of them 2011-08-02

    I have two divs like this <div style="border:1px solid #000; float:left">Div 1</div> <div style="border:1px solid red; float:left">Div 2</div> I want them to display on the same row, so I used float:left. I want both of them t

  • Set a div width, align div center and text align left 2011-08-05

    I have a small problem but I can't get it solved. I have a content header of 864px width, a background image repeated-y and footer image. Now I have this <div> over the background image and I want it to be like 855px width and the text align le

  • verticaly center align the text in a div 2011-09-15

    I have a div named "product-name" with 30px height & 11px font-size, It suppose to contain the product name. If a product name is dual line it seems fine but if the product name is single line it starts from the top of the layer, I actually want

  • how to center align IMG in div? 2011-09-21

    How to center align IMG in div? <div id="head"> <div id="panel"> <img/> <a href="#"><img/></a> <a href="#"><img/></a> <a href="#"><img/></a> </div> </div> Img have di

Copyright (C) pcaskme.com, All Rights Reserved.

processed in 0.839 (s). 13 q(s)