CODEWITHSUNDEEP
css
tabdon
tabdon

Reputation: 157

Page layout using CSS - Is this the best way to accomplish this layout?

I have created a web page layout using CSS. The CSS and HTML can be found here: http://pastebin.com/Gn25nM8G

I had to use what seems like some funky tricks to get the layout proper. Specifically, to get two of my content blocks in the right place I had to use this CSS:

position: relative;
top: -351px;

I'm wondering if there's a better way to accomplish this layout?

I'm also not sure why there's a big gap at the end of my page? If you create a page from my code you'll see what I'm talking about. Any help would be greatly appreciated.

Upvotes: 2

Views: 228

Answers (3)

Jaspero
Jaspero

Reputation: 2972

Here's my approach. jsFiddle

I have tried to maintain your code and layout as far as possible.

Upvotes: 1

Zac
Zac

Reputation: 12836

What if you just try rearranging your elements? Putting everything into two columns and floating each of those?

Here is a quick fiddle to illustrate what I mean:

http://jsfiddle.net/qh75H/3/

Upvotes: 4

Caleb Irie
Caleb Irie

Reputation: 358

That may or may not be the best approach.

position: relative means you are moving the div, but the the space taken up by the div originally is still occupied.

If you want to move the div's, but make room for other content, position: absolute may work better.

the position: relative could also be causing the whitespace because the boxes you "moved" may still be taking up space, causing the page to run long.

Upvotes: 0

Related Questions