Photos appearing outside the border

Question

Photos appearing outside the border

My current border has a vertical flow like this: https://i.sstatic.net/CdUm6.png
_{(source: gyazo.com)}

However, I want the content to flow horizontally from left to right instead of top to bottom.

When I apply float: left; to the controlling div, it results in the following layout: https://i.sstatic.net/ikBsJ.png
_{(source: gyazo.com)}

The images are now positioned outside of the border. Here is a snippet of the current code for the content:

<div class="courses">
                <figure>
                    <img src="http://atlanta.eat24hours.com/files/cuisines/v4/chinese.jpg" alt="Asian" height="300px" width="300px" />
                    <figcaption>Bok choi</figcaption>
                </figure>
        </div>
        <div class="courses">
        <figure>
                    <img src="http://atlanta.eat24hours.com/files/cuisines/v4/chinese.jpg" alt="Asian" height="300px" width="300px" />
                    <figcaption>Bok choi</figcaption>
                </figure>
            </div>

If possible, please check the jsfiddle that demonstrates the issue. Additionally, any tips on how to ensure that the text remains on the right side of the image even when the page is resized too small would be greatly appreciated. In the jsfiddle, you can observe that the text shifts below the image when the page size decreases.

html css

Answer 1

Answer №1

The root of this problem lies in the failure to properly clear the float property when styling elements with `float: left`. Floating an element removes it from the normal document flow, causing layout issues. To resolve this, you must clear the float for the containing element (for instance, adding a clear property to the parent element of the floated element).

There are several methods to achieve this:

One workaround is to apply `overflow: hidden;` to the parent container with the class `.wrapper`.
You can also change the display property of the parent container to `inline-block` by setting `display: inline-block;` on the `.wrapper`.
To properly clear the float, you can add a pseudo-element to the `.wrapper`, like so:

.wrapper:after {
    content: "";
    display: table;
    clear: both;
}

Answer 2

The root of this problem lies in the failure to properly clear the float property when styling elements with `float: left`. Floating an element removes it from the normal document flow, causing layout issues. To resolve this, you must clear the float for the containing element (for instance, adding a clear property to the parent element of the floated element).

There are several methods to achieve this:

One workaround is to apply `overflow: hidden;` to the parent container with the class `.wrapper`.
You can also change the display property of the parent container to `inline-block` by setting `display: inline-block;` on the `.wrapper`.
To properly clear the float, you can add a pseudo-element to the `.wrapper`, like so:

.wrapper:after {
    content: "";
    display: table;
    clear: both;
}

Answer 3

Answer №2

Include overflow: hidden; in the styling of the .container class.

See a live demonstration here: http://jsfiddle.net/Ljmyfkbc/2/

Answer 4

Include overflow: hidden; in the styling of the .container class.

See a live demonstration here: http://jsfiddle.net/Ljmyfkbc/2/

Answer 5

Answer №3

Here is some CSS code that might help solve your issue. I am fairly new to stackoverflow and still learning about php and javascript.

.wrapper:after {
    content: "";
    display: table;
    clear: both;
}

There are many different approaches to solving this problem, but it's best to avoid posting complete code blocks due to stack overflow policy.

Answer 6

Here is some CSS code that might help solve your issue. I am fairly new to stackoverflow and still learning about php and javascript.

.wrapper:after {
    content: "";
    display: table;
    clear: both;
}

There are many different approaches to solving this problem, but it's best to avoid posting complete code blocks due to stack overflow policy.

Answer 7

Answer №4

One way to handle overflowing content is by applying the overflow:hidden property to the .container class. Another approach could be to utilize the display:inline-block property for the .lessons class instead of opting for float:left.

Answer 8

One way to handle overflowing content is by applying the overflow:hidden property to the .container class. Another approach could be to utilize the display:inline-block property for the .lessons class instead of opting for float:left.

Answer 9

Answer №5

Whenever you set all elements to float inside a specific element, that same element will collapse.

To resolve this issue, consider adding overflow:hidden; to the wrapper. This is a commonly used fix for such situations.

Alternatively, you can implement the following solution:

.wrapper:after {
    content:"";
    display:table;
    clear:both;
}

By doing this, the :after pseudo element of the wrapper can effectively clear the container without encountering any potential problems typically associated with using overflow:hidden;

Answer 10

Whenever you set all elements to float inside a specific element, that same element will collapse.

To resolve this issue, consider adding overflow:hidden; to the wrapper. This is a commonly used fix for such situations.

Alternatively, you can implement the following solution:

.wrapper:after {
    content:"";
    display:table;
    clear:both;
}

By doing this, the :after pseudo element of the wrapper can effectively clear the container without encountering any potential problems typically associated with using overflow:hidden;

Answer 11

Answer №6

give this a shot!

.container{
    background-color: #ffffff;
    width: 80%;
    display: flex;/*modified*/
    border: 1px solid #000000;
    justify-content: center;
}
.classes{
    float:none;
}

Answer 12

give this a shot!

.container{
    background-color: #ffffff;
    width: 80%;
    display: flex;/*modified*/
    border: 1px solid #000000;
    justify-content: center;
}
.classes{
    float:none;
}

Answer 13

Answer №7

use custom styles

.container{
    background-color: #f2f2f2;
    width: 90%;
    border: 1px solid gray;
    text-align: center;
    overflow: hidden;
    margin: 0 auto;
}

create a webpage layout

<div class="container">
        <header>
            <h1>Sophie's bakery</h1>
            <nav>
                <ul>
                    <li>breakfast</li>
                    <li>lunch</li>
                    <li>dinner</li>
                    <li>desserts</li>
                </ul>
            </nav>
        </header>

        <div class="items">
                <figure>
                    <img src="http://example.com/bakery.jpg" alt="Bakery Items" height="250px" width="250px" />
                    <figcaption>Croissants</figcaption>
                </figure>
        </div>
        <div class="items">
        <figure>
                    <img src="http://example.com/bakery.jpg" alt="Bakery Items" height="250px" width="250px" />
                    <figcaption>Cupcakes</figcaption>
                </figure>
            </div>

    </div>

Answer 14

use custom styles

.container{
    background-color: #f2f2f2;
    width: 90%;
    border: 1px solid gray;
    text-align: center;
    overflow: hidden;
    margin: 0 auto;
}

create a webpage layout

<div class="container">
        <header>
            <h1>Sophie's bakery</h1>
            <nav>
                <ul>
                    <li>breakfast</li>
                    <li>lunch</li>
                    <li>dinner</li>
                    <li>desserts</li>
                </ul>
            </nav>
        </header>

        <div class="items">
                <figure>
                    <img src="http://example.com/bakery.jpg" alt="Bakery Items" height="250px" width="250px" />
                    <figcaption>Croissants</figcaption>
                </figure>
        </div>
        <div class="items">
        <figure>
                    <img src="http://example.com/bakery.jpg" alt="Bakery Items" height="250px" width="250px" />
                    <figcaption>Cupcakes</figcaption>
                </figure>
            </div>

    </div>

Answer 15

Answer №8

In order to streamline your images, consider consolidating them within a single division and adjusting the CSS for your class. This way, all images will be contained within one division rather than each having its own separate division.

<div class="courses">
                <figure>
                    <img src="http://atlanta.eat24hours.com/files/cuisines/v4/chinese.jpg" alt="Asian" height="300px" width="300px" />
                    <figcaption>Bok choi</figcaption>
                </figure>
        <figure>
                    <img src="http://atlanta.eat24hours.com/files/cuisines/v4/chinese.jpg" alt="Asian" height="300px" width="300px" />
                    <figcaption>Bok choi</figcaption>
                </figure>
            </div>

Here is an example of what the CSS could look like:

.courses{
any style you want for figcaption and figure.

}

Answer 16

In order to streamline your images, consider consolidating them within a single division and adjusting the CSS for your class. This way, all images will be contained within one division rather than each having its own separate division.

<div class="courses">
                <figure>
                    <img src="http://atlanta.eat24hours.com/files/cuisines/v4/chinese.jpg" alt="Asian" height="300px" width="300px" />
                    <figcaption>Bok choi</figcaption>
                </figure>
        <figure>
                    <img src="http://atlanta.eat24hours.com/files/cuisines/v4/chinese.jpg" alt="Asian" height="300px" width="300px" />
                    <figcaption>Bok choi</figcaption>
                </figure>
            </div>

Here is an example of what the CSS could look like:

.courses{
any style you want for figcaption and figure.

}

Photos appearing outside the border

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

Winning opportunities created by using credits in the slot machine

The input field will be in a read-only state if it contains a value from the database. However, it will be editable if the value

Instructions on displaying the main page even with just inputting the default directory in the URL

What could be causing the issue with my linear gradient not displaying correctly on top of my background image in Rails and Sass?

The 'refresh' function in jQM listview is causing issues with inset lists

When the user clicks, show a designated search result in a separate container

Breakpoint for mobile menu in FoundationCSS

Stylish Pop-up Box appears hidden behind a different element

Creating a video game HUD effect using JavaScript and HTML5

How to set the value of an `<input type="date"` in jQuery

Tips for transferring information from Angular 6 to Node.js

Using jquery to dynamically set the value of a drop down menu

Generating pop-up upon loading with CSS3

Bootstrap 5's h-100 feature functions flawlessly in Chrome, however, it encounters issues when used with a group

Adjust the size of the child div to fit the remaining space within the parent div

Positioning of buttons in Bootstrap 5 tables

generating the <tr> element within a loop

Implement input validation in React by enhancing the functionality of HTML input tags

Incorporating custom CSS and HTML into the link is essential for enhancing the appearance of KnpMenu

Learn how to display two rows of div elements within a single div container