Image same line as text |
Image same line as text |
Inspiration |
Mar 25 2013, 02:33 PM
Post
#1
|
Group: Members Posts: 5 Joined: 15-March 13 Member No.: 18,843 |
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. |
pandy |
Mar 25 2013, 02:44 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
I don't think I understand. Should the image box be 500 by 500 or 600 by 100? And what should be on the same line as what?
Anyway, don't float the text. Float the image left and place it before the |
Darin McGrew |
Mar 25 2013, 10:09 PM
Post
#3
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
QUOTE Float the image left and place it before the image in the HTML. Did you mean "Float the image left and place it before the text in the HTML"? |
amitwadhwa |
Mar 26 2013, 04:43 AM
Post
#4
|
Newbie Group: Members Posts: 14 Joined: 15-November 12 From: Dublin Member No.: 18,106 |
Try the following css:
#container { overflow:hidden; position:relative; width:90%; margin-bottom:20px; margin-top:20px; margin-left:auto; margin-right:auto; } .leftimage { width:70%; display: inline-block; float: left; } .righttext { height: auto; width: 30%; display: inline; } Change the html to <div id="container"> <div class="leftimage"><img src="../pictures/test.png"></div> <div class="righttext">The quick brown dog jumps over the little lazy dog. </div> </div> I would use percentages for widths to make it responsive (you had 600px for image width). If you change that to 75% (min-width of container is 800px). Also, as someone else said, use the float on the image. |
pandy |
Mar 26 2013, 07:19 AM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
|
Lo-Fi Version | Time is now: 26th April 2024 - 12:46 PM |