Designing such a layout using html & css

Question

I want to create a layout like this with html & css for thumbnail listing. enter image description here

I want to fill a DIV with thumbnails & exclude a portion of that DIV from content & fill it with some other content;
Is it possible? How?

If you build it carefully, and all your thumbnails have the same dimensions, and your upper-right-other-content can be a sibling of the thumbnails, I think you can do it with floats and a few extra elements to create the borders as show. Of course, CSS tables may do the trick also. — Marc Audet
– Marc Audet, Commented Sep 14, 2013 at 22:34
@Vucko: I tried absolute positioning of smaller div in the upper right; but the thumbnails go behind it! — Ariyan
– Ariyan, Commented Sep 14, 2013 at 22:37
@4r1y4n yes, you have to give to all elements an aboslute value. In your case, float or display:inline-block is the answer, without using position:absolute. — Vucko
– Vucko, Commented Sep 14, 2013 at 22:44

StackSlave · Accepted Answer · 2013-09-14 22:34:56Z

2

Yes, use a floating layout. You could float:left; on everything in CSS, clear:left; on the 7th small div. Note that you may need to hold open the div that you're putting this HTML inside. For backward compatibility I use an empty div at the bottom and clear:left; on it. You may consider a background image on the larger div to the right to create that border effect.

answered Sep 14, 2013 at 22:34

StackSlave

10.6k2 gold badges20 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Designing such a layout using html & css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related