Reputation: 653
I am currently developing a site and have encountered a strange problem with getting two of my divs to stay on the same line. The page in question is here: http://bit.ly/13QE7Zi and the divs I'm trying to fix are the text div in the middle and the small image beside it. In the CSS, I have these divs set to take up 1000px (20+640+20+300+20) which is the width of the container element, but if I do this, the second div gets pushed onto the next line. It only works if I decrease the width of the text div by 3 px, which is undesirable because then the edge of the image is not aligned with the right side of the page properly. This occurs in Chrome and Firefox. I'd prefer not to use floats because that breaks other aspects of the page. How do I get these two divs to stay on the same line and still fill the full 1000px of width?
Upvotes: 0
Views: 985
Reputation: 2172
I would use float: left
for the text div, and float: right
for the image div and remove the display: inline-block
property. This creates a clearing issue for the footer, but this is easily fixed using one of the many 'clearfix' hacks. My preferred method is using a .group
class on the parent container div, as per this article on CSS Tricks. In your case this would be <div id="looktrai-content" class="group">
Upvotes: 0
Reputation: 10772
You can simplify your code, and even implement text wrapping around the image by doing the following.
Disclaimer: This is a suggestion based on the results you are trying to achieve.
Remove the .looktrai-text
and .looktrai-sidediv
divs
Format the HTML inside of #looktrai-content
like this:
<div id="looktrai-content" class="clear"> <img src="content/looktrai_side.jpg" alt="" class="align-right" /> <p>My paragraph text</p> <p>My second paragraph</p> </div>
img.align-right { float: right; margin: 0 20px 20px; }
The result will look something like this: http://codepen.io/anon/pen/yjdxh
This is a cleaner, simpler approach that allows you to reduce code, and maximize flexibility.
Upvotes: 0
Reputation: 7254
The reason this is happening is because you have a 'space' character between your two inline blocks.
HTML doesn't really ignore all white space. You can have 1000 spaces and new lines between two elements and HTML would condense all those down into 1 single space when displaying.
Your inline blocks are setup in such a way that they there widths add up to be exactly 1000px, however you have a new line in between your two containing elements which condenses down to 1 space. Your precise measurement doesn't account for this extra space and so your inline blocks wrap to the next line.
Upvotes: 2
Reputation: 2101
You can use border-box box-sizing. That way the width of the elements will include the padding and the borders.
Upvotes: 0
Reputation: 11293
Instead of decreasing your text's width
by 3 px, decrease the padding-right
on .looktrai-text
it won't change the way it looks but will give enough room for both to fit.
Upvotes: 2