NeuroXc
NeuroXc

Reputation: 653

Two divs won't fill entire width of container

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

Answers (5)

Astrotim
Astrotim

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

Axel
Axel

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.

  1. Remove the .looktrai-text and .looktrai-sidediv divs

  2. 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>
  1. Add the following CSS:
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

jeremysawesome
jeremysawesome

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

undefined
undefined

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

Patsy Issa
Patsy Issa

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

Related Questions