basically, what I'm trying to achieve is the following layout;
http://farm9.staticflickr.com/8256/8746793625_d3fed90c54_b.jpg
I tried using tables, but could not get images up to 100% of the page height.
I tried to display an unordered list with the display: inline, and the images were changed correctly, but I could not "center" on the "main" or second element in my list.
I am limited by the fact that I cannot specify the dimension of the images. I would like to stick with the CSS possible, if maybe there is a way to check the window size using jQuery and feed it somehow? (im pretty new to this)
I have all the ideas, can anyone help?!?!
Hooray!
It's as close as possible
<body> <div class="wrapper" style="position:absolute; width:100%; height:100%; margin:0; padding:0; top:0; left:0;"> <table style="position:absolute; width:100%; height:100%; margin:0; padding:0; top:0; left:0; text-align:center; white-space: nowrap; overflow:hidden;"> <td style="width:20%" ><img style="position:relative;width:auto;max-height:100%" src="http://shellsuitzombie.co.uk/wp-content/uploads/2013/04/Brad-Rose-I-never-finish-anything.jpg"></td> <td style="width:60%" ><img style="position:relative;width:auto;max-height:100%" src="http://shellsuitzombie.co.uk/wp-content/uploads/2013/04/Brad-Rose-I-never-finish-anything.jpg"></td> <td style="width:20%" ><img style="position:relative;width:auto;max-height:100%" src="http://shellsuitzombie.co.uk/wp-content/uploads/2013/04/Brad-Rose-I-never-finish-anything.jpg"></td> </tr></table></div></body>
source share