Advanced Search

Results 1 to 3 of 3

Thread: Image and text on same line

  1. #1
    Join Date
    Oct 2011
    Posts
    35
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default 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
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,882
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    Try setting both divs as inline-blocks and then floating the image left;
    Code:
    .leftimage {
    width:600px;
    height:100px;
    float:left;
    display:inline-block;
    }
    .righttext {    
    display:inline-block;
    }
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,297
    Thanks
    28
    Thanked 135 Times in 130 Posts
    Blog Entries
    28

    Default

    You mean this?
    Code:
    <div style="position: relative; width: 90%; min-width: 800px;  margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 20px; height: 500px; border: 1px solid black; overflow: hidden">
    <img src="http://images.replacements.com/images/images5/flatware/G/gorham_sea_wave_stainless_elegance_fork_P0000031414S0004T2.jpg" style="position: relative;float: left; width: 500px; height:100px; margin-right:20px">
    <div style="position: relative; height: 500px; padding:10px; overflow: auto">lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum lorem ipsum lorem ipsum<br>lorem ipsum lorem ipsum</div>
    </div>

Similar Threads

  1. Text maximum 1 line
    By Jeroen94 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 09-21-2012, 01:46 PM
  2. How to increase text line spacing with css
    By jcdesigns in forum CSS
    Replies: 5
    Last Post: 01-17-2011, 10:45 AM
  3. Replies: 2
    Last Post: 02-11-2009, 08:28 PM
  4. Jump to line of text
    By stillatlarge in forum HTML
    Replies: 5
    Last Post: 12-10-2006, 04:08 AM
  5. Text break to next line (overflow)
    By Spinethetic in forum CSS
    Replies: 4
    Last Post: 09-08-2005, 02:15 AM

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
  •