1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

White Space to Right of Website

Discussion in 'CSS' started by Borduhh, Oct 3, 2013.

  1. #1
    Hey Guys,

    My website (chipcave) has a large whitespace to the right of the entire website creating a scrollbar. I have tried a couple things to get rid of it, but cannot find the source of the problem. I have googled several queries and all of them point to the CSS of my website.

    Anyone have any ideas on how to get rid of it?
    Solved! View solution.
    Borduhh, Oct 3, 2013 IP
  2. akuji36

    akuji36 Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #2

    Hello

    Css will clear up your problem. We see a scrollbar because...

    your content exceeds webpage standard height:which is 600px.

    px is pixels --dimension in size. If you made your images smaller

    and confine your page size to roughly 900 pixels in width and 600 pixels

    in height the scrolling could be cancelled out.

    Here's a note on Css :
    http://html.net/tutorials/css/lesson1.php

    thanks

    Rod
    akuji36, Oct 3, 2013 IP
  3. Borduhh

    Borduhh Active Member

    Messages:
    676
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    65
    #3
    Yes, but if you scroll to the right there is an extra 100-200px of white space that should not be there.
    Borduhh, Oct 3, 2013 IP
  4. deathshadow

    deathshadow Prominent Member

    Messages:
    5,980
    Likes Received:
    825
    Best Answers:
    144
    Trophy Points:
    395
    #4
    I'm assuming you mean chipcave.com -- if so, then in general the site layout and design reeks of "WCAG, what's that?!?" and just plain broken site building methodologies if you care ANYTHING about accessibility -- fixed width layout, several points of illegible color contrasts, and inaccessible fixed metric (px) fonts... the trifecta of /FAIL/ at web design. Elements like the massive space wasting fixed size image banner preventing the use of responsive layout in any sort of meaningful manner certainly doesn't help matters.

    Under the hood it's even worse, endless pointless javascript for nothing thanks to fat bloated garbage libraries like jQuery and "gee ain't it neat" BS that has no business on websites in the first place, invalid/incomplete forms, endless pointless DIV and classes for nothing, with little if anything remotely resembling semantic markup or logical heading orders, etc, etc...

    It's then hardly a shock it wastes an ungodly 723k in 44 files to deliver 1.67k of plaintext and 12 content images -- four times the total file size and easily two or three times as many files as should be used on such a simple page... even worse since that trifecta of /FAIL/ at design should help keep that type of nonsense under control.

    You are probably looking for a 'silver bullet fix' for the broken layout -- providing that would be a duct-tape and bailing wire fix for something that to be brutally frank needs to be thrown out and started over from scratch with semantic markup, separation of presentation from content, with semi-fluid elastic responsive accessible layout and design.

    It's just another laundry list of how not to build a website.
    deathshadow, Oct 3, 2013 IP
  5. kk5st

    kk5st Well-Known Member

    Messages:
    2,906
    Likes Received:
    191
    Best Answers:
    9
    Trophy Points:
    190
    #5
    The white space is from this:
    Code (Text):
    1.  
    2. .header {
    3.   color: #888888;
    4.   margin: 0 auto;
    5.   width: 960px;
    6. }
    That's in a div that's float left, which is next to another float of width 690px (I think that's what I found) so it overflows by that 690px. Delete the width property, and the overflow goes away. What effect that has elsewhere is unknown. The usage of class attributes is is beyond silly, maintenance will be a bitch. You'd best scrap the existing work and start over using sane structure and classes.
    kk5st, Oct 3, 2013 IP
  6. deathshadow

    deathshadow Prominent Member

    Messages:
    5,980
    Likes Received:
    825
    Best Answers:
    144
    Trophy Points:
    395
    #6
    Which is basically that "fixed width layout" I was talking about biting OP in the backside. Good rule of thumb, if you create a fixed width (or even elastic width) on anything other than a non-content smaller side-column, you are probably doing something wrong.
    deathshadow, Oct 4, 2013 IP
  7. Borduhh

    Borduhh Active Member

    Messages:
    676
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    65
    #7
    The only time I see that happening is in the footer with the following:

    Code (Text):
    1. .footer { width:960px; margin:0 auto; }
    2.  
    3. .footer_body { float:left; width:960px; }
    4.  
    5. footer_body .site_links { float:left; background-color: rgba(255, 255, 255, 0.05); min-height: 130px; width:690px; padding: 20px; margin-right: 10px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; }
    6.  
    7. .footer_body .company_info { float:left; background-color: rgba(255, 255, 255, 0.05); min-height:130px; width:180px; padding:20px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; }
    That is the only time in my design that a div is float and 690px. So by removing that 690px the whitespace should disappear?
    Borduhh, Oct 4, 2013 IP
  8. Borduhh

    Borduhh Active Member

    Messages:
    676
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    65
    #8
    I am not sure if I should say thanks for the constructive criticism here...
    Borduhh, Oct 4, 2013 IP
  9. kk5st

    kk5st Well-Known Member

    Messages:
    2,906
    Likes Received:
    191
    Best Answers:
    9
    Trophy Points:
    190
    #9
    No, that sets the width of the float element. It's the .header's width that causes the problem. Delete its width, and it will conform to its container.
    kk5st, Oct 4, 2013 IP
  10. Borduhh

    Borduhh Active Member

    Messages:
    676
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    65
    #10
    Okay, but I am not looking for it to conform to the parent container. As well what container next to it has 690px?
    Borduhh, Oct 4, 2013 IP
  11. #11
    The code section under discussion. Formatting cleaned a bit to make it legible.
    Code (Text):
    1.  
    2. <div class="footer_body">
    3.   <div class="site_links">
    4.     <div class="link_container">
    5.       <h3 class="link_header">About Us</h3>
    6.  
    7.       <ul>
    8.         <li><a href="/about-the-chip-cave/">Our Company</a></li>
    9.         <li><a href="/privacy-policy/">Privacy Policy</a></li>
    10.       </ul>
    11.     </div>
    12.  
    13.     <div class="link_container">
    14.       <h3 class="link_header">In Our Store</h3>
    15.  
    16.       <ul>
    17.         <li><a href="/poker-chips.html">Poker Chips</a></li>
    18.         <li><a href="/poker-chip-cases.html">Poker Chip Cases</a></li>
    19.         <li><a href="/poker-playing-cards.html">Poker Playing Cards</a></li>
    20.         <li><a href="/poker-tables.html">Poker Tables</a></li>
    21.         <li><a href="/poker-accessories.html">Poker Accessories</a></li>
    22.       </ul>
    23.     </div>
    24.  
    25.     <div class="link_container">
    26.       <h3 class="link_header">Customer Service</h3>
    27.  
    28.       <ul>
    29.         <li><a href="/customer-policies#payment-shipping">Payment and Delivery</a></li>
    30.         <li><a href="/customer-policies#returns-refunds">Returns and Refunds</a></li>
    31.         <li><a href="/customer-policies#low-price">Low Price Guarantee</a></li>
    32.         <li><a href="/contacts/">Contact The Cave</a></li>
    33.       </ul>
    34.     </div>
    35.   </div>
    36.  
    37.   <div class="company_info">
    38.     <h3 class="header">The Chip Cave Info</h3>
    39.  
    40.     <p class="phone">1-321-POKER50</p>
    41.  
    42.     <address>The Chip Cave <br>
    43.       NRB Enterprises LLC <br>
    44.       900 Rock City Rd. Lot 34<br>
    45.       Ballston Spa, NY 12020 <br>
    46.     </address>
    47.   </div>
    48. </div>
    The whole thing is, as you say, div.footer_body (why that's a class rather than an id, I can't fathom, and why it's nested four deep is another mystery). There is a container, div.site_links, which is float left and has a width of 690px. That's the left column; it's OK, don't mess with it.

    In the column next to it, div.company_info, lies the trouble maker, h3.header. The container .company_info's available width is constrained to the area left after the left column's width is subtracted from the page's with, i.e. 960-690=270px. BUT, you made the h3 960px wide, which means it overflows its parent (div.company_info) by 690px. It's that overflow that is forcing the white space to the right.

    The culprit is
    Code (Text):
    1. h3.header {width: 960px;}
    and nothing else.

    cheers,

    gary
    kk5st, Oct 4, 2013 IP
  12. Borduhh

    Borduhh Active Member

    Messages:
    676
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    65
    #12
    Thank you so much Gary! You are a life saver. Sorry for my design flaws, I work with an e-commerce platform so my codes are split among multiple files. As deathshadow pointed out, our current design has a few flaws and we are starting to work into a more responsive design.
    Borduhh, Oct 4, 2013 IP