Search code examples
csshtmlresizepositionstylesheet

Cannot control size/positon of Div within a Div

I'm working on this project for an instagram search. I get the results I want, and I want the main images to display with the small thumbnail of the user profile underneath the main photo, along with user name,etc. Right now im working on just getting the main image with a small thumbnail of the user under the photo. Right now all i get is the main photo and profile picture taking up the entire width of the div. I can't get it to move and the chrome developer tool shows thats completely ignoring my css for these sub-divs.

Here is the CSS snippet:

html {}
body { font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; }

small { display: block; color: #555; padding: 10px 0px; }

#searchresults {  width: 960px; }

#sform { width: 710px; margin: 0 auto; margin-top: 25px; margin-bottom: 35px; }
#sform #s { 
    padding: 10px 11px; 
    padding-left: 60px;
    color: #999; 
    width: 200px; 
    border: 1px solid #ddd; 
    font-size: 22px; 
.
.
.
.
#photos { margin-left: 100px; text-align: center; }

#box { width:180px;
    height:260px;
    display:inline-block;
    margin-left:20px;
    margin-bottom:30px; }

#box .mainimg { width: 160px;
       height 230px; }

#box .footer { width: 180px;
      height: 30 px; }

and the HTML:

<body>
<div id="searchresults">
<section id="sform"><input autocomplete="off" class="sfield" id="s" name="s"    placeholder="Enter a search tag..." type="text" /></section>

<section id="photos"></section>
</div>
</body>

and the code that #each passes

    <div class="box"><div class="box.mainimg"><a href="'+data[i].url+'" target="_blank"><img src="'+data[i].thumb+'"></a></div><div class="box.footer"><img src="'+data[i].avatar+'"></div></div>'

Thanks in advance. I can't seem to find this anywhere.

Solution

  • In your html you've assigned your box div a class, not an id - in the css your selectors point to a box id.

    So

    .box { width:180px;
    height:260px;
    display:inline-block;
    margin-left:20px;
    margin-bottom:30px; }

.box .mainimg { width: 160px;
       height 230px; }

.box .footer { width: 180px;
      height: 30 px; }

    Should fix it - or change the div to id="box"