Images showing up outside of border

Question

I currently have a border like this:
_{(source: gyazo.com)}

But I want the flow of the body to go from left to right instead of top to bottom.

When using float: left; on a div that controls these, I get this:
_{(source: gyazo.com)}

The images are now completely out of the border. This is what the current code looks like for the body:

<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>

And of course a jsfiddle Also, if someone could give me a hint on how to still have the text stay on the right side of the image even when the page is resized too small. If you notice in the fiddle the text will move to the bottom once page becomes too small.

Relevant question - [What is the best way to clear the CSS style “float”?](http://stackoverflow.com/q/490184/2930477) — misterManSam, Jan 06 '15 at 04:37

score 2 · Accepted Answer · answered Jan 06 '15 at 04:45

This issue is arising because you haven't properly cleared your float: left - floating an element takes it outside the document flow. You need to clear the containing element (so if you floated .courses, you would need to set the clear on its parent element).

There are three ways to do this:

The "hacky" way - set overflow: hidden; on the parent .wrapper
Set the parent .wrapper to display: inline-block;
Properly clear the float by adding a pseudo-element to the parent .wrapper:

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

Would those all be good to use, or is one of those ways better then the others? — IE8IsBetterThenGoogleChrome, Jan 06 '15 at 23:12

score 1 · Answer 2 · answered Jan 06 '15 at 04:32

1

add overflow: hidden; to class .wrapper

working demo http://jsfiddle.net/Ljmyfkbc/2/

answered Jan 06 '15 at 04:32

Alien

3,658
1
16
33

score 1 · Answer 3 · answered Jan 18 '15 at 03:58

Try using below CSS. I think might work for you, as someelse has mentioned it erlier, but I have brief knowledge about php, javascript, I'm only new to stackoverflow.

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

No matter there are so many other ways to do that, but it is not better to write complete codes as it doesn't meets the stack overflow policy.

score 0 · Answer 4 · answered Jan 06 '15 at 04:35

0

you can use overflow:hidden to the class .wrapper, else you can use display:inline-block to the class.courses instead using float:left

answered Jan 06 '15 at 04:35

Aru

1,840
1
12
15

score 0 · Answer 5 · answered Jan 06 '15 at 04:38

When you float all elements inside an element, that element will collapse.

Try adding overflow:hidden; to your wrapper. It is a common solution to this problem.

Another solution is the following:

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

This allows the wrapper's :after pseudo element to clear the wrapper, without having to worry about the potential issues that might arise from using overflow:hidden;

score 0 · Answer 6 · edited Jan 06 '15 at 10:20

I think this will help you, You need to make reside all your images inside one division instead of giving each images new division also you can do this by changing css for your class. Like:

<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>

css:

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

}

score 0 · Answer 7 · answered Jan 06 '15 at 04:39

0

try this.,

.wrapper{
    background-color: white;
    width: 85%;
    display:inline-block;/*added*/
    border: 2px solid black;
    text-align: center;
}
.courses{
    float:left;
}

answered Jan 06 '15 at 04:39

Sathish

2,440
1
11
27

score 0 · Answer 8 · answered Jan 06 '15 at 06:19

add css

.wrapper{
    background-color: white;
    width: 85%;
    border: 2px solid black;
    text-align: center;
    overflow: hidden;
    margin: 0 auto;
}

html

<div class="wrapper">
        <header>
            <h1>Yoko's kitchen</h1>
            <nav>
                <ul>
                    <li>classes</li>
                    <li>catering</li>
                    <li>about</li>
                    <li>contact</li>
                </ul>
            </nav>
        </header>

        <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>

    </div>

Images showing up outside of border

8 Answers8