www.webdeveloper.com
Results 1 to 2 of 2

Thread: Image and text on same line

  1. #1
    Join Date
    Mar 2013
    Posts
    1

    Image and text on same line

    I'm trying to have an image of fixed height/width on the left, and text on the right, in the same line of course. The overall container has a dynamic width of 90% of viewport, meaning that the text on the right will also have a dynamic width (90% - image width) since the image on the left is fixed. The text needs to be aligned left, so "float:right" won't work. I've tried countless combinations of floats, aligns, table cells, etc, nothing works... closest I've got to was they were in the same line, but the text was forced aligned to the right.

    Image of what I mean: http://i.imgur.com/QRDhLro.png

    Code:
    #container {
    overflow:hidden;
    position:relative;
    width:90%;
    min-width:800px;
    margin-bottom:20px;
    margin-top:20px;
    margin-left:auto;
    margin-right:auto;
    }
    .leftimage {
    width:600px;
    height:100px;
    }
    .righttext {    
    float:right;
    }
    Code:
    <div id="container">
    
        <div class="righttext">lorem ipsum lorem ipsum <br> lorem ipsum lorem ipsum </div>
    
        <div class="leftimage"><img src="../pictures/test.png"></div>
    
    </div>
    Thanks.

  2. #2
    Join Date
    Mar 2012
    Posts
    1,118
    Why is the image in a separate div? Try putting it in the same div. On the other hand, if you do not want the text to wrap round the picture, use position:absolute:

    .leftimage {
    position:absolute;
    top:0;
    left:0;
    width:600px;
    height:100px;
    }
    .righttext {
    position:absolute;
    top:0;
    left:600px;
    right:10%;
    bottom:0;
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles