1

I'm trying to align 3 divs next to each other, with 2 flexible width and 1 fixed width. Please see the following jsfiddle: http://jsfiddle.net/qyGC5/82/

I've seen this post: Three DIVs next to each other with fluid horizontal width but it doesn't work with 2 flexible divs or even with just 1 flexible width (the one with the long text). http://jsfiddle.net/qyGC5/89/

I also though of percentages, but since using 100% is out of the question, the gap would get bigger or smaller on resize.

Any help, much appreciated. Thanks.

EDITED Adding some screen shots to show what happens after I ajax load new comments (this is to display comments)

BEFORE THE AJAX LOAD MORE COMMENTS This is before the AJAX load, looks perfect

AFTER THE AJAX LOAD enter image description here

Community
  • 1
  • 1
denislexic
  • 10,786
  • 23
  • 84
  • 128

1 Answers1

4

Forget about using display: inline-block for this.

Use float: left on .sides and overflow: hidden on #main.

See: http://jsfiddle.net/qyGC5/93/

<div class="sides">side 1</div>
<div class="sides">side 2</div>
<div id="main">Lorem ipsum..</div>

.sides {
    width: 30px;
    border: 2px dotted green;

    float: left;
}
#main {
    border: 2px dotted blue;

    overflow: hidden;
}
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • What's the `overflow: hidden` for though? – Supr Feb 01 '12 at 19:20
  • @Supr: Did you try removing `overflow: hidden`? – thirtydot Feb 01 '12 at 19:20
  • I would recommend http://nicolasgallagher.com/micro-clearfix-hack/ for clearing floats. :-) – janhartmann Feb 01 '12 at 19:24
  • I did, and didn't notice any difference, but turns out it was because jsfiddle was stuck loading :/ When I tried again I could see why. Sorry :) Still don't understand _why_ it works though... – Supr Feb 01 '12 at 19:24
  • 1
    @Supr: No problem, I just complained about the same thing myself in a comment on the question. I've since edited a link into my answer explaining why this works. – thirtydot Feb 01 '12 at 19:25
  • 1
    @meep: I tend to switch between [that](http://nicolasgallagher.com/micro-clearfix-hack/) and `overflow: hidden` as I deem appropriate. In this instance though, there's no float clearing happening. `overflow: hidden` is being used [for something else](http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats). – thirtydot Feb 01 '12 at 19:26
  • @thirtydot: Thanks for the anser, works like a charm until I AJAX load some content. When that happens seems like the text doesn't go to the line anymore. Do you have an idea why? – denislexic Feb 01 '12 at 20:16
  • @denislexic: There's no reason that adding content to any of those `div`s should cause it to break. Can you show me a demo of the broken behaviour? – thirtydot Feb 02 '12 at 20:01
  • @thirtydot: Unfortunately it's only on my local server for the moment. but I added some printscreens to illustrate. Thanks. – denislexic Feb 03 '12 at 05:57
  • @thirtydot: I found out that the issue comes from when a text has no spaces, it doesn't wrap the text. ie: if someone types "AAAAA...(x50)...A) the text doesn't go to the line so it just pushes...Any idea on how to solve that? Thanks. – denislexic Feb 04 '12 at 04:42