0

My Website: http://designobvio.us/portfolio/index.html

Aspiring Website Layout: http://www.googlezeitgeist.com/en/top-searches/rebecca_black

I've just finished my navigation bar which is fixed positioned. Now it's time to move on to the center content. Unfortunately, I'm baffled on how to mark this up.

Problem 1: everything seems to be 100% height (which I never can get to work >_<;;)

Problem 2: I'm using grid960 and the image would float over 960 grid.

Problem 3: when you shrink window image shrinks.

Problem 4: when one shrinks the window text panel overlays image.

I'm done a PDF of the layout. here's example with grid overlay: http://www.designobvio.us/portfolio/homepage%20copy.pdf

Is there anyone that could demo this layout in jsfiddle or at least guide me into answer this myself? I'm really pretty stumped.

Thanks

Armeen Moon
  • 18,061
  • 35
  • 120
  • 233

1 Answers1

2
  • 100% height means that the element will use the height of the parent element. If you want a div, say #wrapper, to be 100% height of the windows, its parent has to be set to 100% height as well and so on. So basically: html, body, #wrapper {height: 100%;} example: http://jsfiddle.net/Vy6hP/
  • Why is the floating a problem? And if you want to make a dynamic lay-out, you shouldn't use a 960 system, but rather a flexible one (ie. one based on % rather than px)
  • Give the image a max-width: 100%; and it should work just fine (example: http://jsfiddle.net/Vy6hP/1/ )
  • I don't understand your last question
Bram Vanroy
  • 27,032
  • 24
  • 137
  • 239