SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple image next to div

    Hey I have a div followed by an image. Howcome the image won't line-up next to div despite having enough space and explicitly again setting the element to display:inline?

    HTML Code:
    <div id="gelijkvloers">
    	<h1>Gelijkvloers</h1>
    	<ul>
    		<li>500m2</li>
    	</ul>
    </div>
    <img src="afbeeldingen/plattegrond_gelijkvloers.jpg" alt="plattegrond van de gelijkvloers" />
    Code:
    /* GELIJKVLOERS */
    
    div#gelijkvloers{
    	margin: 10px 0 0 0;
    	padding: 0 0 0 8px;
    	background-color:#000;
    	color:#fff;
    	width:200px;
    }
    
    img{
    	display:inline;
    	border: 1px solid #000;
    }

  2. #2
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your div is not inline so it is a block which should mean the image appears beneath it. Is that what happens?

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hm even when I set the div to display inline the div just collapses on itself(e.g. all text within it dissapears and the block resize to about 2x4 pixels) and the image stays in the same spot....weird.


    EDIT: wait the text just dissapeard out of the box but it's still there. The image doesn't move however

  4. #4
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Make both elements floating:
    Code CSS:
    div#gelijkvloers{
    	margin: 10px 10px 0 0;
    	padding: 0 0 0 8px;
    	background-color:#000;
    	color:#fff;
    	width:200px;
    	float: left;
    }
     
    img{
    	margin: 10px 0 0 0;
    	border: 1px solid #000;
    	float: left;
    }

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is it really necessary to float them ? Css doesn't make sense from time to time. I intentionally didn't want to go the easy float way and look

    thanks though, it worked

  6. #6
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ajajajak View Post
    Is it really necessary to float them ?
    Yes you do. If you don't float element's you take them out of the flow! Or you should position elements absolute instead.
    Quote Originally Posted by Ajajajak View Post
    Css doesn't make sense from time to time.
    thanks though, it worked
    Does gelijkvloers make sense to you?

    It does because you need gelijkvloers to build a first floor (eerste verdieping)

    It worked didn't it So It makes sense

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by donboe View Post
    If you don't float element's you take them out of the flow
    ?????

    floating means taking them out of the flow. Naturally the flow is determined by wether an element is inline or block? I figured setting it to inline would rearrange the flow so that they would be positioned inline from left to right. Maybe what you are sayins is that for this to work you need to specify an absolute position?

    Hm whatever it is, it worked

  8. #8
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by donboe View Post
    Yes you do. If you don't float element's you take them out of the flow! Or you should position elements absolute instead.
    That isn't correct. Like Ajajajak said, floated elements are taken out of the normal document flow.

    Your img element doesn't sit next to your div because div elements are block-level elements and as such these are laid out vertically by default rather than horizontally (inline-level elements).

    Thus when you place your div element before your img element, which is an inline element, the latter will still be placed below your div, as a block-level element fills its parent's content area and can't have other block or inline elements at its sides, unless you float them.

    So, if you didn't want to float your div, you could set display:inline on your div rather than on the img (as it's inline anyway), thus generating an inline box in CSS and making your img sit next to your div.

    Code CSS:
    /* GELIJKVLOERS */
     
    div#gelijkvloers{
    	margin: 10px 0 0 0;
    	padding: 0 0 0 8px;
    	background-color:#000;
    	color:#fff;
    	width:200px;
        display:inline;
    }
     
    img{
    	border: 1px solid #000;
    }
    Maleika E. A. | Rockatee | Twitter | Dribbble



  9. #9
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    But won't declaring display:inline on the div nullify the width property? The OP has already tried this.

    Sounds like a case for an introduction to the mysteries of display:inline-block (this Mozilla webdev article deals specifically with lists but includes some useful cross-browser tips).

  10. #10
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Yes, it does, however, I tried to explain why a block-level element with its default values cannot have other elements next to them unless you alter its display, position or float property values.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  11. #11
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hm very useful information thank you all. I shall give display:inline another try since that was what seemed the most logical solution to me. I didn't know about the document flow and how block elements take up the space of their parent container so thank you for that kohoutek!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •