CODEWITHSUNDEEP
htmlcss
IE8IsBetterThenGoogleChrome
IE8IsBetterThenGoogleChrome

Reputation: 2325

Images showing up outside of border

I currently have a border like this: current
(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: broken
(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.

Upvotes: 0

Views: 231

Answers (8)

user4466193
user4466193

Reputation:

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.

Upvotes: 1

Ravi Bhalodiya
Ravi Bhalodiya

Reputation: 163

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.

}

Upvotes: 0

Ravi Sukhadia
Ravi Sukhadia

Reputation: 441

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>

Upvotes: 0

Emily
Emily

Reputation: 221

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:

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

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

Upvotes: 2

Sathish
Sathish

Reputation: 2460

try this.,

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

Upvotes: 0

Jesse Kernaghan
Jesse Kernaghan

Reputation: 4634

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;

Upvotes: 0

Aru
Aru

Reputation: 1870

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

Upvotes: 0

Alien
Alien

Reputation: 3668

add overflow: hidden; to class .wrapper

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

Upvotes: 1

Related Questions