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
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