Creating a specific, responsive layout with floated images - html

Question

I have been trying to create a specific layout for some images. Layout I would like to create.
I have tried floating the smaller images so that they stand alongside the large image, this works if I add a clearfix but then for some reason the width I apply to the images is no longer effective. So it's either large images in the right positioning or small images all over the place.
I tried putting all images into separate div tags and then a parent div, then floating but that has it's own issues.
Can this be done in HTML & CSS or do I need to be going down the jQuery route?
I will be tidying the code up, I'm just trying to get it right in my head atm.
HTML:
<section id="galleryposition">
<ul id="gallery">
<div id="mainimage">
<li>
<a href="img/8.jpg">
<img src="img/8.jpg" alt=""></a>
</li>
</div>
<div id="smallphotos">
<div id="smalllefttop">
<li>
<a href="img/2.jpg">
<img src="img/2.jpg" alt="">
</a>
</li>
</div>
<div id="smallrighttop">
<li>
<a href="img/3.jpg">
<img src="img/3.jpg" alt="">
</a>
</li>
</div>
<div id="smallleftbottom">
<li>
<a href="img/4.jpg">
<img src="img/4.jpg" alt="">
</a>
</li>
</div>
<div id="smallrightbottom">
<li>
<a href="img/5.jpg">
<img src="img/5.jpg" alt="">
</a>
</li>
</div>
</div>
</ul>
</section>
CSS:
#gallery {
margin: 50px 0 0 0;
padding: 0;
list-style: none;
}
#galleryposition {
text-align: center;
}
#gallery img {
border-radius: 2.5%;
}
#gallery li {
float: left;
margin: .5%;
color: #bdc3c7;
}
#gallery li a p {
margin: 0;
padding: 5%;
font-size: 0.75em;
color: #bdc3c7;
}
#smalllefttop group {
max-width:50%;
float:left;
}
#smallrighttop group{
max-width: 50%;
float:right;
}
#smallleftbottom group{
min-width:50%;
float:left;
}
#smallrightbottom group{
min-width:50%;
float:right;
}
https://jsfiddle.net/apdeng/wyvzmm9q/1/
Thanks in advance.

Answer 1

Ok, so I started to play around with your code, but I was basically just re-starting it for you, which isn't what SO is for, so here are some things you need to consider:
<ul> tags are intended for lists. This definition is often stretched by developers who use them to create a "list" of links used for navigation, but in this case your image layout is complicated by the use of the <ul> and <li> structure. You'd be better served by simple <div> tags, which a) don't require both the <ul> and <li> tags and b) make more sense semantically since this is not, in fact, a list.
It's bad practice to put a <div> inside a <ul> like your #mainimage div.
The selector group in your css isn't actually doing anything. I googled this because I've never seen it before and couldn't come up with what purpose that keyword would serve. The elements followed by "group" aren't getting the styles you're trying to apply to them. I would remove that from your css.
You'll have more success with just plain old width in your css (not max-width)
Never use <br> tags to create space in a layout. Use margins and padding instead.
Make sure all your tags are closed and opened. When JSfiddle highlights the text red, that means you're missing part of a tag. (In your case, you have one too many </a> tags in each group.)
What you basically need to do is clean up your markup as much as you can and make that big image roughly 50% width and each of the other images roughly 25%. I say roughly because when you go to add margin between all of them, your total width will still need to add up to 100% (any more than that and some of your elements will bump down to the next line). That's probably what went wrong when you tried adding width to your images. Look at selectors for nth-child or last-child to help you remove the margin on the blocks on the side.
Let me know if you have more questions!