CODEWITHSUNDEEP
htmlcss
sodiumnitrate
sodiumnitrate

Reputation: 3143

Cannot get the DIV width to dynamically change with respect to browser size and contents in CSS

I have a div, and I want it to have a certain margin from the left. It is going to contain a number of images that are 210x210 pixels. I want the div to resize so that its right side extends only a couple of pixels, that I will set as the margin of the img tags. For some reason, the div I have extends till the end of the page.

The div under question is the one with id="thumbnails, and it is contained in another div with id="main". Please check the jsfiddle for the whole code. But, here's the relevant part of the code:

HTML:

<div id="main">
<div id="thumbnails">
    <img class="thumb" id="1" src="images/portfolio/lorem/thumbs/1.jpg">
    <img class="thumb" id="2" src="images/portfolio/lorem/thumbs/2.jpg">
    <img class="thumb" id="3" src="images/portfolio/lorem/thumbs/3.jpg">
    <img class="thumb" id="4" src="images/portfolio/lorem/thumbs/4.jpg">
</div>

CSS:

#main {
background-color: rgba(50,50,50,0.6);
width: 100%;
height: 100%;
overflow: hidden;
}

#thumbnails {
margin-left: 300px;
margin-top: 50px;
background: rgba(50,50,50,0.6);
}

I should also note that when the browser size is small, I prefer the images to continue in the next row.

Upvotes: 0

Views: 251

Answers (2)

Eee
Eee

Reputation: 179

I may not be understanding you properly (so my answer may seem a little obvious), but by default <div> is a block-level element, which is 100% width.

So, you'll either need to adjust the display property of #thumbnails to accommodate dynamic widths (such as inline-block), or set it dynamically with a script. Please do the first option.

Upvotes: 1

TimPalmer
TimPalmer

Reputation: 119

Give the div #thumbnails a style of float: left;

This will give the div a place on the page and allow space either side. Don't forget, you can use clear to give it any space that it needs

Upvotes: 0

Related Questions