How to allign divs properly

salto
salto used Ask the Experts™
on

I have a difficult task and I do not know how to proceed.
I have to create a website exactly like the graphic mock up, really truly exact to the last pixel.
By doing that I know I loose accessibility amongst others...... I have never ever created such a user unfriendly website, it is against my standards and when it is ready I will hide under a big stone, probably forever.
The pages are laid out on a grid (from blueprintcss.org), all fixed size, fixed font-size etc.
For one reason or another I cannot align the divs on the following page in a proper way.
I think there might be a problem with a clear or a break, but I do not seem to find it.
There is a Google blueprint support group, I know, but that one has low traffic and there came no answers so far.
Therefore I put my question in this forum.
The page (still under construction) can be seen at http://www.pdcentrum.nl/ex-home3.htm
A screenshot of the required layout at: http://www.pdcentrum.nl/screenshot_homepage.jpg

Your help is much appreciated!
Thank you for your time on this matter.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
My immediate advice would be to create three divs (floated left as columns), get these empty DIVs layed out as you want them, and then add the content divs inside these.

Commented:
Removed some divs, hope this can help. You need to adjust some paddings/margins.

ps: sorry, had to change extension.
tests.zip

Author

Commented:
Hi TheFoot,
Thank you for your quick reply. I will try your option, as it does seem to make sense, given the fact that all the divs float, they need an extra container. I will play around with it and will report back after a couple of hours.

Hi flob9:,
Thank you for your effort.
It was a bit difficult to distinguish the modifications you made in the source code of the page and the css, so maybe I am not doing you justice. For that I apologize.
The divs did not line up according to the graphic layout and adjusting margins and paddings was not enough to get it all working. In fact it grew worse, too much Picasso ;-)
But thank you anyway for your kind attention!

Commented:
I removed the divs like this : "<div class="prepend-1 span-8 " >"

And changed the "<div class="prepend-1 span-7">" to wrap all the column block.

Removed also the clearb class in the first column.

I attached the result i had.
ex-home.png

Author

Commented:
Hi flob9, thank you for your effort. However, the divs do not align properly with your solution.
I proceeded on the suggestion of TheFoot, which worked fine. Thank you both!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial