div includes img as content

Question

I would love your help with an issue I have with my html code. I have the following code:

<img id="logo" src="images/logo.png">
<div id="content">
    <h2>header</h2>
    <p>text</p>
</div>

and my css code is:

img#logo {
    width: 300px;
    position:absolute;
    right: 10px;
    z-index:-1;
}
div#content {
    text-align: center;
    border: 2px solid;
    border-radius: 25px;
    margin: 100px 25 0 25px;
}

My problem is that the div includes the image within its borders (so it pulls the image to the margin of 100px from top. When I include an <br> after the <img> it won't happen but that isn't the best way to solve it.

Does anybody know how to solve this?

What exactly are you trying to do? Setting the img position to absolute will have this exact effect, placing it regardless of other elements. — Nicolas Carteron, May 08 '14 at 12:51
Can explain a bit more what you would like to do, I created a jsfiddle for you: http://jsfiddle.net/FtqJ2/ — vaskort, May 08 '14 at 12:53

score 1 · Accepted Answer · answered May 08 '14 at 12:55

1

this is happening because you have positioned your image absolutely meaning it is taken out of the flow of the page. If you are just wanting to place the image on the right, try using

float:right;
margin-right:10px;

instead of absolute positioning. You can then ensure the content div appears below the image by adding clear:right to it's styles

answered May 08 '14 at 12:55

Pete

57,112
28
117
166

Really? It's only the top position and typo in margin. – Dipak May 08 '14 at 13:02
@Dipaks, both will work but I see no reason for absolute positioning if they want the content to be below image, will save you from the z-index nightmare that will come if everything starts to get positioned absolutely and if the image is changed to one with a different height, there is no need to then look at all the styles to change the margins and positioning so it will be more maintainable in future – Pete May 08 '14 at 13:09
Generally, there is no need of using absolute position for the logo, but I feel the OP has used it in purpose. If OP doesn't have any absolute purpose for it, then he can wrap the logo in a div with text align right. Simple as that :) – Dipak May 08 '14 at 13:12
Well, the point of SO is to come up with different solutions to a problem and let the OP decide which one to use – Pete May 08 '14 at 13:14
Check my edit :) Floats are not advisable http://stackoverflow.com/questions/9776840/are-floats-bad-what-should-be-used-in-its-place – Dipak May 08 '14 at 13:16
Well I guess you best tell the whole front end industy about that as I've been developnig for over 15 years and everyone I know uses floats as it's the only one that is browser compatible with all browsers back to ie6 (if you are good enough to use them properly) – Pete May 08 '14 at 13:22
IE6 died long time ago - http://www.ie6death.com/. The current version of IE is 11 and less than 3% of the users are using IE8 and 9 http://www.w3schools.com/browsers/browsers_explorer.asp. CSS flex-box is the perfect alternative to the floats http://caniuse.com/#search=flex – Dipak May 08 '14 at 13:30
IE6 only died in march with some government agencies still using it in the UK (and paying microsoft for extra support). If floats aren't meant for styling then why is there no mention of that in the [css spec](http://www.w3.org/TR/CSS2/visuren.html#float-position) as defined by the industry (if you look at other elements it will says specifically not to use it for layout purposes). Flex box still isn't fully supported and most web agencies will need to support at least back to IE8. And I feel for you if you are using w3schools as a reference point - http://www.w3fools.com/ – Pete May 08 '14 at 13:38

score 0 · Answer 2 · answered May 08 '14 at 12:59

top position is missing to the absolute logo image. And a typo in right margin (missing px) -

img#logo {
    width: 300px;
    position:absolute;
    right: 10px;
    top: 0;
    z-index:-1;
}
div#content {
    text-align: center;
    border: 2px solid;
    border-radius: 25px;
    margin: 150px 25px 0 25px;
}

Fiddle

div includes img as content

2 Answers2