0

I wrote some simple html document. I have two element inside: div with FIXED width, and image after it. As far I know, image is inline element, so it suppose to be positioned next to div, on the right side, since div has fixed width and there is a plenty room for image. Instead, image goes below div element. So it seems, that div element takes 100% of width no matter of what size it is. Why this happens? Code: 

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <title></title>
            <meta charset="UTF-8" />

        </head>
    <body>
        <div style="width:500px;"><p>Some text</p></div>
        <img src="someImage.jpeg " />
    </body>
    </html>
Improve this question
2
  • div is a block element change it to inline-block Commented Apr 1, 2017 at 13:43
  • I know div is block element. My problem is not how to set image right to div. I am only interested why inline element (image) does not goes next div on right side, since there is a room and div do not take 100% of width anymore? That sounds logical to me. Commented Apr 1, 2017 at 13:47

6 Answers 6

Reset to default
3

A block element tolerates no HTML elements next to it, except when ordered otherwise (by adding a float declaration to another element, for instance).

That is the reason image goes to the next line. Try using the same with a span,image will not go to the next line. Simple reason being span is an inline element and can entertain another HTML element next to it provided the element is an inline element.

Hope this helps!

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Div is a block element. Therefore, other elements won't be placed next to it by default You can add the following line to your CSS to achieve the behavior you expect:

img {float: right;}

Improve this answer

Comments

0

It's because even if you set a fixed width to a div it's default display CSS property value is always going to be block - which occupies the entire width. This happens because the <div> tag defines a horizontal division or a section in HTML.

FOR EXAMPLE:
In the code given below, there is not display property defined and therefore it takes the default value as block which is why the image goes below the div. 

<html lang="en">

<head>
  <title></title>
  <meta charset="UTF-8" />

</head>

<body>
  <div style="width:500px; background: #cccccc;">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
  <img src="https://www.w3schools.com/css/img_fjords.jpg" />
</body>

</html>

And in this example, the display property is set to inline-block due to which the image stays in the same line as the paragraph (view the code snippet in full page).

<html lang="en">

<head>
  <title></title>
  <meta charset="UTF-8" />

</head>

<body>
  <div style="width:500px; background: #cccccc; display: inline-block;">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
  <img src="https://www.w3schools.com/css/img_fjords.jpg" />
</body>

</html>

Hope this helps :)

Improve this answer

Comments

0

So, You want to know the reason behind divs chooosing next line instead setting in-line automatically.

Some elements in CSS are block level elements, which means they automatically start a new line. For instance, if you create two single word paragraph elements, they won’t flow into each other but will appear on separate lines. Other elements are inline elements. This means that they appear “in line” with the previous content. One example is an anchor tag, which can appear within another element such as a paragraph without causing any extra whitespace or new lines to occur.

One way to cheat this model of layout is to use floats, which allow a given element to shift to one side of its line and have other content flow down its side. A right-floated element will be pushed all the way to the right of its container and have content flow down its left side and a left-floated element will be pushed all the way to the left side with content flowing down its right side.

The classic example is when you toss an image in with a paragraph and want the two to appear side by side rather than stacked. First we create both elements with some HTML:

  <img src="http://domain/200/200/" />
  <p>Hello World...</p>

Alone, this code does not produce the effect that we want. The paragraph element is a block level element that appears on its own line and so the paragraph and the image are shown stacked in the normal document flow.

We can change this behavior by floating our image to the right. The CSS for this is very basic:

 img {
      float: right;
      margin: 20px;
      }

How Exactly the Box Thing Works

The question you should be asking yourself is, “why?” Why wouldn’t increasing the paragraph margin increase the space between the image and the paragraph? The reason is that we’re failing to grasp the box model as it pertains to that paragraph.

If you’re ever doubtful about how your layout is working on a basic level, try applying a border or two to see what’s going on. If we use this technique on the paragraph, the result may surprise you.

   p {
       border: solid 1px black;
     }

As you can see, the image is actually inside of the paragraph’s box! This solves our margin riddle. Any margin that we add to the paragraph is being applied way off to the right of the image, this is why it doesn’t increase the space between the image and the paragraph.

If we wanted the change this behavior so that the paragraph doesn’t wrap around the image, we could float the paragraph to the left and give it a specified width (without expressing the width, the paragraph is 100% wide and won’t fit next to the image).

   img {
     float: right;
     margin: 20px;
     }

  p {
     float: left;
     width: 220px;
     margin: 20px;
     }

Hope You got it...

That's the crazy box thing. :)

Improve this answer

Comments

0

Div is a non-replaced element and, by default, a block-level element.

The width of non-replaced, block level elements in normal flow always meets this equality:

'margin-left' + 'border-left-width' + 'padding-left' + 
'width' + 
'padding-right' + 'border-right-width' + 'margin-right' 
= width of containing block

So when you reduce the "width" to 500px, one or more of the other properties (either or both margins) are automatically adjusted so that the equality still holds. That is, the full width of the containing block is always fully used, and there is no space available for your inline element.

Improve this answer

Comments

0 
min-width: 100%;                  
width: max-content;

you can use min-width or max-width depending on your needs, hope this helps ^_^

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.