Skip navigation
chartoonz
chartoonz Calculating status...
Currently Being Moderated

CSS columns sooooo close

Jun 26, 2012 11:57 AM

I have been noodling around with a new web design, and have come up to three problems:

 

1.  Currently I have laid out the main body (seen here: http://www.chartoonz.com/test/index.html) but the CSS isn't perfect.  I want the two columns underneath the main div=BodyWrapper to line up on the left precisely with the left-side border of the BodyWrapper div and I want to push the columns all the way to match up with the right side.  But I am getting weird padding and am not sure what's causing it.  I have played with the marigins of all peritenent styles but I'm getting nowhere...

 

2. Additionally when I load the icons at the bottom of the page they work fine but once I've pressed them the purple link border shows.  Blech!  I tried getting rid of it on every psuedo selector: a:hover, a link etc... but it's still there.  Any way I can kill this off?

 

3.  When I view the page at full monitor height and width I still get a horizonatl scroll despite the fact that the page is epanded as much as possible.  I assume this is due to the css input image at the top right which slides a little off screen. How can I kill this?

 

Any help woudl be appreciated

 

Thanks,


Aharon

253 Views   2 Replies   Latest reply: chartoonz, Jun 26, 2012 6:45 PM
 
Replies
  • Chad - BCGurus.com
    Currently Being Moderated
    1. Chad - BCGurus.com,
    Jun 26, 2012 2:38 PM   in reply to chartoonz
    Report

    Hello Aharon,

     

    Playing with firebug here is what I did to make this work.

     

    #columnContainer - make width 76.8%

    #HalfBodyWrapper should be a class, shouldn't use an ID more than once on a page

    on the second HalfBodyWrapper give a second class like hbw-right and float right with 0 margin

    Make the width of the HalfBodyWrapper 46%

     

    The purple border is an outline. give these a property - outline:none; Though I didn't see a border. I'm was using Chrome/FireFox. 

     

    The horizontal scroll is from your navigation. You can remove the width on #navWrapper.   

     

     

    Hope this helps.

    Chad Smith | http://bcgurus.com/Business-Catalyst-Templates for only $7

     
    |
    Mark as:
  • chartoonz
    Currently Being Moderated
    2. chartoonz,
    Jun 26, 2012 6:45 PM   in reply to Chad - BCGurus.com
    Report

    THANK YOU!

     

    Its looking so much better now!  All your suggestions worked perefectly.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points