The positioning of divs shifts when adjusting the width of the screen

I'm having trouble creating a design similar to the one in this image. When I adjust the browser width, two divs don't remain aligned properly. If I use float: left for both divs, they stack vertically, but the layout breaks when I resize the screen.

How can I ensure that the divs stay together and within a border, like in the image?

ol {
    list-style-type: none;
    padding: 0;
}

ol .search-result {
    position: relative;
    display: block;
    min-height: 220px;
    color: #000;
    padding: 10px 5px;
}

.media-box {
    float: left;
}

.search-result-item {
    overflow: auto;
    max-width: 600px;
    padding-top: 7px;
    padding-bottom: 7px;
}

.search-item-box {
    border: 1px solid #DDD;
    min-height: 226px;
    transition: box-shadow .2s ease-in-out;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.search-item-box:hover {
    -webkit-box-shadow: 14px 13px 20px -9px rgba(0, 0, 0, 0.36);
    -moz-box-shadow: 14px 13px 20px -9px rgba(0, 0, 0, 0.36);
    box-shadow: 14px 13px 20px -9px rgba(0, 0, 0, 0.36);
}

.item-price-promo-container {
    padding: 5px;
    width: 180px;
    background-color: #fff;
    height: 100%;
    margin-left: 350px;
    float: left;
}
<ol id="searchListContainer" class="search-list-container">
<li class="search-result">
    <a id="hotel-id" class="search-result-item" href="#" target="_blank">
        <section class="search-item-box">
            <div class="media-box">
                <figure class="media">
                    <img src="https://s15.postimg.org/7w2xbeufv/image.jpg" height="225"
                         width="225"
                         alt="1.jpg"/>
                </figure>
            </div>
            <div class="item-price-promo-container">
                <div class="item-review-container">
                    <ul class="item-star-rate">
                        <li class="item-star-rate-container review-item">
                            <strong class="item-star-rate-symbol">&#9733;</strong>
                            <strong class="item-star-rate-number">3.5</strong>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
    </a>
</li>

Thank you!

htmlcss

Answer №1

If you're looking to streamline the layout, consider implementing CSS Flexbox.

For instance, if you aim to divide each li horizontally into three parts:

  • The first section should be 225px wide without expanding or shrinking beyond that: flex: 0 0 225px;

  • The last section should be 325px wide without exceeding or decreasing from that: flex: 0 0 325px;

  • The middle section should occupy the space between the first and last sections, able to expand as the page widens and contract as the page narrows: flex: 1 1 calc(100% - 550px);

Here's a Functional Example:

ol {
margin: 0;
padding: 0;
}

li {
display: flex;
height: 100px;
margin-bottom: 6px;
border: 1px solid rgb(227,227,227);
list-style-type: none;
}

li div:nth-of-type(1) {
flex: 0 0 225px;
background-color: rgb(255,0,0);
}

li div:nth-of-type(2) {
flex: 1 1 calc(100% - 550px);
background-color: rgb(255,255,0);
}

li div:nth-of-type(3) {
flex: 0 0 325px;
background-color: rgb(0,127,0);
}
<ol>
<li>
<div></div>
<div></div>
<div></div>
</li>

<li>
<div></div>
<div></div>
<div></div>
</li>

<li>
<div></div>
<div></div>
<div></div>
</li>
</ol>

Answer №2

Don't forget to include the closing </ol> tag.

To keep the divs floating, you can utilize percent widths or apply display: table and display: table-cell. Check out the Fiddle here: https://jsfiddle.net/edtyv9tr/1

Here is the updated CSS:

ol {
    list-style-type: none;
    padding: 0;
}

ol .search-result {
    position: relative;
    display: block;
    color: #000;
    padding: 10px 5px;
}

.media-box {
    display: table-cell;
    width: 225px;
}

.media-box img {
    vertical-align: middle; /* Eliminate spacing below image */
}

.media {
    margin: 0; /* Eliminate default padding around the figure tag */
}

.search-result-item {
    max-width: 600px;
    padding-top: 7px;
    padding-bottom: 7px;
}

.search-item-box {
    display: table;
    width: 100%;
    border: 1px solid #DDD;
    transition: box-shadow .2s ease-in-out;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.search-item-box:hover {
    -webkit-box-shadow: 14px 13px 20px -9px rgba(0, 0, 0, 0.36);
    -moz-box-shadow: 14px 13px 20px -9px rgba(0, 0, 0, 0.36);
    box-shadow: 14px 13px 20px -9px rgba(0, 0, 0, 0.36);
}

.item-price-promo-container {
  padding: 5px;
  background-color: #fff;
  display: table-cell;
  vertical-align: top;
}

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

The Github page is continuously loading without displaying any content

Recently, I created a web-map application using the OpenLayers library and published it on Github Pages. You can access it through this link: . However, when I try to load the page, the content doesn't show up and it just keeps loading indefinitely. ...

htmlgithubopenlayersweb-hosting

Variations in CSS behavior for select and option elements

I have implemented the following HTML code snippet: <select ...> <option value=""></option> <option data-ng-repeat="type in xy" value="{{type.name}}" ng-style="{'border-left': '4px solid '+ type.color, &apos ...

htmlcssangularjs

A useful Javascript function to wrap a string in <mark> tags within an HTML document

I have a paragraph that I can edit. I need to highlight certain words in this paragraph based on the JSON response I get from another page. Here's an example of the response: HTML: <p id="area" contenteditable> </p> <button class="bt ...

javascriptjqueryhtmljson

Exploring Jinja: Navigating through nested JSON structures

I am currently delving into Jinja in order to construct a basic website. How can I retrieve values from nested JSON using Jinja syntax? For instance: How do I isolate the "Education" key from the JSON snippet below to fill in the HTML snippet? ...

htmljsonjinja2

Creating line breaks in Bootstrap input group formatting

My issue involves rows with checkboxes and labels, some of which are longer than others. When the browser is resized or viewed on a mobile device, the columns containing longer labels collapse to a second row while shorter labels stay beside their checkbox ...

htmlcsstwitter-bootstrap

I am unable to click on items due to an obscure element blocking my

My selling webpage, created with Asp.net and CSS, is experiencing an issue where text boxes and hyperlinks are being overlaid, making it impossible to click on them when accessed via a mobile device. I've tried troubleshooting on my own without succes ...

cssasp.net

Tips for relocating a popup window''s position

A situation has arisen in my application where a popup window is opened with the following code: function newPopup(url, windowName) { window.open(url,windowName,'height=768,width=1366,left=10,top=10,titlebar=no,toolbar=no,menubar=no,location=no,d ...

javascripthtml

Property float does not account for margin values

Currently delving into the world of the semantic-ui framework, I have been working with segments. Here is a snippet of my code: <!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery ...

htmlcsssemantic-ui

Creating an element that remains fixed once it reaches a distance of 50px from the top of the screen

Hey there! I'm working with an html div element that currently scrolls along with the page, but I was wondering how I can make it become fixed once it reaches a distance of 50px from the top of the screen. Any ideas on how to achieve this? Just to pro ...

javascriptjqueryhtmlcss

Display extensive text content in HTML for mobile devices

As I work on developing a web app, specific requirements must be met: Pages that can dynamically load large amounts of text (around 30-100 printed pages) in HTML using $.ajax based on complex functions The complete text must be loaded upfront and cannot ...

htmljquerydomweb-applicationsrendering

Spots on my Links in Navigation Menu

Today I dabbled in some basic HTML/CSS work. I was in the process of creating a simple navbar with floated links. Once I got it up and running, I encountered an issue that has me stumped, and I haven't been able to find a solution yet. The problem li ...

htmlcss

Is it possible to use an Ajax callback function to add a select dropdown HTML to a table

I am currently in the process of using jQuery to append some HTML with the code provided below. My main objective is to select an option based on AJAX response data and create a select dropdown menu. However, the variable scope of sOut doesn't seem to ...

javascriptjqueryhtmlajax

showcasing a set of div elements by using forward and backward buttons

I am dealing with 5 divs that have text content inside. To navigate through each div, I have implemented a back and next button system. <a href="" class="back-btn off">Back</a> | <a href="" class="next-btn">Next</a> <div class ...

javascriptjqueryhtmlcss

Can you explain the variance between a DIV using display: inline-block versus a SPAN element?

Can you explain the distinction between a DIV using display: inline-block and a SPAN? Furthermore, what sets apart a SPAN with display: block from a DIV? ...

htmlcss

The Bootstrap navigation bar drop-down feature is not displaying the menu

After skimming through various threads on stackoverflow regarding the dropdown box in the navigation bar, none of the solutions seem to address my issue. Utilizing bootstrap version 3, I've implemented the provided navbar example from the official si ...

javascriptjqueryhtmlcsstwitter-bootstrap

Use the inline IF statement to adjust the icon class depending on the Flask variable

Is it feasible to achieve this using the inline if function? Alternatively, I could use JavaScript. While I've come across some similar posts here, the solutions provided were not exactly what I expected or were implemented in PHP. <i class="f ...

javascriptpythonhtmlflaskjinja2

Switching between classes using jQuery

I'm working on implementing a play and pause button for a video, and I'm facing an issue with switching the class when the button is pressed. What I want is that when the pause button is clicked, the class changes to something else, and vice vers ...

javascriptjqueryhtml

Enhancing the mobile menu with a feature that allows users to easily close the

I am currently designing a mobile menu for a website that I created using Wordpress with the Divi Theme. When the user clicks on a "hamburger icon", it triggers a fullscreen menu to open: mobile menu If you tap on "Termine", it will reveal a submenu: mo ...

javascriptcsswordpressmobilemenu

How can the parent div's height be determined by the child div when using position: absolute?

I am struggling with setting the height of a parent div that contains a nested child div with absolute positioning. The child div has a fixed height of 652px, but I cannot seem to get the parent div to match this height. I have tried adjusting the clear an ...

htmlcsspositionheightabsolute

How to link a CSS file from a JavaScript file

I have a form for users with fields for first name, last name, password, and confirm password. I've implemented validation to check if the password and confirm password fields match using JavaScript: $(document).ready(function() { $("#addUser").cl ...

javascriptjavacssjspstyles