Children divs unexpectedly showing up outside of their parent divs

I have reviewed similar questions on this matter, but none of them seem to provide a solution for the issue I am facing. Currently, my goal is to display a stylized list, but I am encountering more difficulties than expected.

You can find a fiddle linked here. Essentially, I want the text snippet to be displayed next to the image.

Below is the template HTML being utilized (Mako):

% for datum in data.entries:
    <a href="#">
        <div class="result-container">
            <div class="result-header">
                <h1 class="result-title">${datum.data['display_name']}</h1>
            </div>
            <div class="result-body">
                <div class="thumbnail-wrapper">
                    <div class="result-thumbnail">
                        <img class="thumbnail" src="${datum.thumbnail}" alt="${datum.data['display_name']}"></img>
                    </div>
                </div>
                <div class="result-snippets">
                    <div class="snippet">
                    ${datum.snippets}
                        </div>
                </div>
            </div>
        </div>
    </a>
% endfor

EDIT:

I realize that my explanation may not have been clear enough, so please refer to the updated fiddle and comments. Each of these elements is within a LIST, meaning they will appear multiple times down the page. I am seeking a solution that works consistently for every list item.

How can I position the snippet to the right of the image? Alternatively, why does it currently appear as it does?

Answer №1

Modify it to

.image-box {
        /*    width: 285px;
    */
        float:left;
        overflow:hidden;
    }

Revision: Using your latest fiddle Transform it to

.gallery-wrapper {
    margin: 0 auto;
        clear:both;
}

Answer №2

It seems like I have grasped your requirements

http://jsfiddle.net/ZffFv/9/

 .output-snippets {
position: relative;
top: 50px;
left:200px;
}

Answer №3

Are you interested in achieving this layout with the snippet positioned next to the image?

http://jsfiddle.net/ZffFv/2/

HTML:

<a href="#">
     <div class="result-container">
          <div class="result-header">
               <h1 class="result-title">Test Title</h1>
          </div>
          <div class="result-body">
               <div class="thumbnail-wrapper">
                    <div class="result-thumbnail">
                     <img class="thumbnail" src="http://www.anirudh.net/courses/cse585/project1/results/orig/lenna.gif" alt="${datum.data['display_name']}"></img>
                </div>
                    <div class="result-snippets">
                     <div class="snippet">
                     This is a test snippet
                      </div>
                </div>
              </div>
           </div>
     </div>
</a>

CSS:

.result-header {
    text-align: center;
    word-wrap: normal;
    padding-top: 20px;
}
.result-container {
    margin: 0 auto;
}
.snippet {
    color: #666666;
    font-family:"Open Sans", "Arial";
    font-weight: 300;
    width: 200px;
    text-align: center;
    overflow-y: hidden;
}
.thumbnail-wrapper {
    /*    width: 285px;
*/
    overflow:hidden;
}
.result-thumbnail {
    width: 300px;
    overflow-x: hidden;
    float: left;
}
.result-snippets {
    float: right;
}
.result-title {
    text-align: center;
    font-size: 20px;
}
.page-number {
    width: 30px;
}
.search-icon {
    text-align: right;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can you quickly navigate to the top of the page before clicking on a link in the same window/tab?

Could someone assist me with a coding issue I am facing? I would like to be able to go to the top of the page when clicking on a link and have the link open in the same tab. I attempted to implement this functionality using the following code, however, I ...

Is there a way to invoke a function using $scope within HTML that has been inserted by a directive in AngularJS?

After moving the following HTML from a controller to a directive, I encountered an issue where the save button no longer functions as expected. I attempted to change the ng-click to a different function within the directive code, and while that worked, I u ...

Guide for creating a scroll-triggered rotation animation using only JavaScript

Looking to achieve a cool scroll effect with an image that rotates on the X-axis by a specific degree, such as 70deg. The goal is to have the image's rotateX value change to 0deg when it enters the viewport upon scrolling and revert back to 70deg whe ...

Can the Live Search fields be cleared?

In my current project, I am utilizing php and html files with Ajax to display the contents of a MySQL database on a webpage. The main file for displaying the contents is index.php, which retrieves data from fetch.php. I found helpful guidance on how to set ...

Retrieving text snippet from an HTML document using .NET

Users input HTML content using a richtext editor, allowing for a variety of elements. Here is an example of such content: <h1>Header 1</h1> <p>Some text here</p><p>Some more text here</p> <div align=right><a hr ...

Comparison of Chrome's compatibility with Bootstrap and Edge

Firefox Safari I am facing an issue that seems obvious, but I am unable to pinpoint the exact cause. It just doesn't seem right for no apparent reason. is the website in question. I have tried various troubleshooting methods such as inspecting th ...

Pentagon Silhouette as Header Background

I am looking to add a unique pentagon shape to my page header background without editing the HTML. I am using SASS for styling purposes. Is there a way to achieve a design similar to this wireframe image of a pentagon with the middle point at the bottom, ...

Struggling to navigate to a specific div element using a hash in an Angular application

I came across some information here and here stating that a page can be scrolled to a specific element using just a hash selector and an id attribute. However, I am facing difficulties implementing this in my Angular application. Could this be because of ...

What could be causing the mousewheel event in my code to remain active?

Whenever I try to scroll on Google Chrome, an error occurs on my website. jquery-3.3.1.min.js:2 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See To resolve this issue: $(document).ready(f ...

Exploring Vue's data binding with both familiar and mysterious input values

How can I model an object in Vue that contains both known and unknown values? The quantity is unknown, but the type is known. I need to present user inputs for each type, where the user enters the quantity. How should I approach this? data() { retur ...

What is the correct way to place an item within a grid layout?

My current layout is structured with a single row class and two columns using the bootstrap grid system. However, I am facing an issue where I need to add another item within that grid system, but I am struggling to position it correctly. It keeps appeari ...

A guide on applying color from an API response to the border-color property in an Angular application

When I fetch categoryColor from the API Response, I set border-left: 3px solid {{element.categoryColor}} in inline style. Everything is functioning correctly with no development issues; however, in Visual Studio, the file name appears red as shown in the i ...

Why should one incorporate semantic markup into their HTML documents?

During my studies, I learned that tags provide a definition to content in HTML. For example: <section>It's a section</section> <article>It's an article</article> By correctly using semantic markup in my HTML, the documen ...

Firefox fails to render SVG animation

Currently, I'm attempting to incorporate this unique animation into my website: http://codepen.io/dbj/full/epXEyd I've implemented the following JavaScript code in order to achieve the desired effect: var tl = new TimelineLite; tl.staggerFromTo ...

Issue with Bootstrap Nav Pills only functioning properly for the initial option

When using Bootstrap nav pills, only the first one seems to work properly in my case. Even though I have inserted forms for each nav pill, it only shows a blank page. https://i.sstatic.net/QsL1l.png https://i.sstatic.net/Swmtq.png I have PHP code inside t ...

Variation in element widths and CSS widths

While inspecting an element in FF, it displays a width of 225px. However, the applied CSS sets the width to 207px for this element. The discrepancy may be due to Bootstrap and varying resolutions. Is there a tool available to identify chang ...

Accessing Ionic rootScope within the config stateprovider - A step-by-step guide

Is it possible to access the value of $rootScope in the following line? .config(function($stateProvider, $urlRouterProvider) { $stateProvider // I am trying to retrieve the value of $rootScope here. } ...

Is the Packery image grid only functional when the background image is specified in CSS and not in JavaScript? Perhaps we need to look into using Await/Sem

I've successfully implemented a packery image grid that is responsive and functional when the background image in the .item-content section is defined in the CSS file: http://codepen.io/anon/pen/eJdapq .item-content { width: 100%; height: 100%; ...

Is the Paypal button causing issues with the navigation bar?

I recently encountered an issue while trying to integrate the Paypal smart button into my first project. Whenever the Debit or Credit card button is clicked, the text above it overlaps with the navbar. I attempted to add extra space to the background image ...

The CSS selector seems to be malfunctioning

I am facing an issue with calling HTML elements from CSS using CSS selectors. It's strange that the class selectors work fine, but I'm unable to select the elements directly from CSS. Therefore, I had to assign them classes. What I aim to achiev ...