CODEWITHSUNDEEP
csshtml
GodMan
GodMan

Reputation: 2641

float: left on class not working on figure tag

I'm a beginner with HTML5 and CSS. I've a problem in the float: left. I want to show the figures to the right of the previous one, but it isnt working. I've tried looking into some SO questions, but haven't found the precise answer yet. It would be great if you could help

The code is located at: http://jsfiddle.net/ECs4g/

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link
    rel="stylesheet"
    href="drop.css"
>

</head>
<body>

    <section id="pics">
        <figure
            id="pic1"
            class="pictures"
        >
            <img
                alt="figure1"
                src="http://b-i.forbesimg.com/kellyclay/files/2013/12/glass.jpg"
                title="pic1"
            >
        </figure>


        <figure
            id="pic2"
            class="pictures"
        >
            <img
                alt="figure2"
                src="http://glass-apps.org/wp-content/uploads/2013/06/google-glass1.jpg"
                title="pic2"
            >
        </figure>
    </section>
</body>

</html>

CSS:

#pics{
    width:200px;
    height:200px;
} 

.pictures{
    float: left;
} 

.pictures img{
    width:100%;
    height:auto;
}

Upvotes: 1

Views: 1416

Answers (4)

Michael
Michael

Reputation: 7092

Your problem lies in your width values. You tell the container #pics to be 200px width. You then tell the images to be 100% of their container. Because the #pic1 and #pic2 elements don't have a defined width, they are by default set to auto. That means your <img> elements are taking 100% width of the container element (200px).

I would suggest leaving your img tags to be 100% width, they will then take the full width of their containing element. What you must do to fix the floats, is to then also give the .pictures class a width.

Additionally, the <figure> element, as well as most elements have some default styling applied, such as margin space. You need to make sure there are no margins, padding or border space in addition to the width or your floats will break again.

For example...

http://jsfiddle.net/ECs4g/2/

.pictures{
    float: left;
    width: 50%;
    padding: 0;
    margin: 0;
}

Here is a link to everything you need to know about floats: http://css-tricks.com/all-about-floats/

Upvotes: 1

Palpatim
Palpatim

Reputation: 9262

You're setting the img widths to 100%. Try setting it to a value under 50%, and see how that works.

In addition, be aware that many browsers have a default style for the HTML5 figure element. You'll have to deal with that extra padding/margin to make your layout work as expected.

Upvotes: 1

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

That is because you're setting the width and height property to only 200px value.

Increase that value and your images would float to the left. You need to set the image size of a fraction of the container's size here too.

Here would be the example:

.pictures img {
  width: 40%;
}

Then the image would have the 40% width of the containers width. So the trick would be to increase the container's size and decreasing the image's size and then the image would float to the left size of the container.

Upvotes: 0

Boldewyn
Boldewyn

Reputation: 82734

You assign 200px width to #pics, but that is your container. The images have no chance to be displayed next to each other. When in doubt, the browser breaks and moves the figures underneath, which is what you see right now.

To fix, set the width to the figure elements instead:

.pictures {
  float: left;
  width: 200px;
  height: 200px;
}

Upvotes: 3

Related Questions