New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

In fluid second row is always lower than sidebar #295

Closed
ZombieHarvester opened this Issue Sep 23, 2011 · 21 comments

Comments

Projects
None yet
8 participants
@ZombieHarvester
Copy link

ZombieHarvester commented Sep 23, 2011

Seems to be a bug. In fluid second row of Content is always lower than the Sidebar. If the first row is short, then there is a gap after the first row.
Screen shot: http://pix.am/qadE/

@ZombieHarvester

This comment has been minimized.

Copy link
Author

ZombieHarvester commented Sep 24, 2011

Solution - Content div has to be float: left.

@ghost

This comment has been minimized.

Copy link

ghost commented Sep 28, 2011

same thing for me.
see image : http://image.freecy.tk/images/978_sc_s.jpg

@mdo

This comment has been minimized.

Copy link
Member

mdo commented Sep 29, 2011

This was fixed in 1.3. Can you let me know what version you're using?

@ghost

This comment has been minimized.

Copy link

ghost commented Sep 29, 2011

Hi,

I'm also using version 1.3.

@ZombieHarvester : What line do I need to remove exactly ?

@ZombieHarvester

This comment has been minimized.

Copy link
Author

ZombieHarvester commented Sep 29, 2011

@markdotto version 1.3. Open fluid.html and remove "hero-unit" section then you will see the gap between the rows

@ZombieHarvester

This comment has been minimized.

Copy link
Author

ZombieHarvester commented Sep 29, 2011

@sdp2011 my solution is to add the following to the css file

.container-fluid > .content {
    float: left;
    margin-left: 40px;
}
@ghost

This comment has been minimized.

Copy link

ghost commented Sep 29, 2011

@ZombieHarvester: nice, it's working now.

@markdotto: it would be nice to have this result automatically with a new version of bootstrap.

thank you guys,

@PhilJ

This comment has been minimized.

Copy link

PhilJ commented Oct 3, 2011

I have the same problem, that grid containers cannot be used with sidebars. In my eyes floating the content container doesn't solve the problem completely.

Check what happens in the example, if you float the content-container and resize the browser window to something below 1200px: The content-container is placed below the sidebar.

The same happens for me when I use a floating list inside the content-container which is longer then the content and should break automatically, the content container is again placed below the sidebar.

Is there a possiblity to use the required clearings within the content-container without making the element after the first clearing drop below the sidebar?

@PhilJ

This comment has been minimized.

Copy link

PhilJ commented Oct 3, 2011

I found that clearing is always global in static containers. A solution could be to position the content container absolutely. This allows you clearings within the content container.

.container-fluid > .content {
    position: absolute;
}

However this solution has a negative side effect: You are not longer able to place a correctly positioned footer below the container which contains sidebar and content, because the content container is not longer cleared globally.

The bootstrap grid system requires clearings (since .spanX are floating, there is a clearing after each T.row), therefore it cannot be used in context of floats.

If you don't need a global footer (or some other element below the sidebar+content container), you can position the content container absolutely.

If you need a global footer and you know that your sidebar is always shorter then your content (or you know know its max-length), you could position the sidebar absolutely, which would allow the usage of a global footer.

But grid + multicolumn layout + global footer doen't seem to be possible with bootstrap.

@mdo

This comment has been minimized.

Copy link
Member

mdo commented Oct 4, 2011

This one is definitely tripping me up and I seem to be tracing it back to our clearfix. @necolas, do you have any ideas why this is the case? Removing display: table; solved my problem.

@necolas

This comment has been minimized.

Copy link
Contributor

necolas commented Oct 4, 2011

Since .content isn't floated, any element within it that has clear:both will be forced below the sidebar. Adding float:left to .content and moving the margin onto .sidebar should do the trick. I'm not familiar with what @PhilJ is talking about, so a test case for that would be handy.

Also in the :before, :after part of the clearfix you've got *display: inline; which you can do without because IE6/7 ignores the whole ruleset. And removing display: table is just going to kill the clearfix behaviour.

@leifcr

This comment has been minimized.

Copy link

leifcr commented Oct 7, 2011

Changing the clearfix to this also solves the problem, (at least in Chrome), although it does have some other nasty side-effects

// Clearfix for clearing floats like a boss h5bp.com/q
.clearfix() {
  zoom: 1;
        &:before,
  &:after {
    //display: table; // Removed to fix sidebar issue
    content: "";
    zoom: 1;
    *display: inline;
        }
        &:after {
    clear: both;
        }
}
@swt83

This comment has been minimized.

Copy link

swt83 commented Oct 14, 2011

I'm hotlinking the file and this problem still exists.

@bigfolio

This comment has been minimized.

Copy link

bigfolio commented Oct 14, 2011

Having the same problem.

I have a fairly simple grid (4 cols, no nesting), so my temporary solution is to just put all my .span4 divs inside a single row. They just wrap down as they need.

@swt83

This comment has been minimized.

Copy link

swt83 commented Oct 17, 2011

My fix is this:

.container-fluid > .sidebar { float: left; }

@bbenezech

This comment has been minimized.

Copy link

bbenezech commented Oct 19, 2011

Had the same problem, I set sidebar height to 0 to fix it.

@mdo

This comment has been minimized.

Copy link
Member

mdo commented Oct 20, 2011

Fixing this in the dev branch the only way I know how: position: absolute; the sidebar. Will revisit in 2.0 if necessary.

@mdo mdo closed this Oct 20, 2011

@necolas

This comment has been minimized.

Copy link
Contributor

necolas commented Oct 20, 2011

@markdotto How come you didn't float the .content element?

@leifcr

This comment has been minimized.

Copy link

leifcr commented Oct 21, 2011

@necolas Try adding in a table with width 100%, and you will experience the same issue. sidebare absolute works like it should.

@necolas

This comment has been minimized.

Copy link
Contributor

necolas commented Oct 21, 2011

Oh I see, the sidebar is fixed width.

This is one way to do it: http://jsbin.com/ocaven/

Another way is to add an extra wrapper around the content (to avoid the slightly more complicated fiddling with widths and padding on the container): http://blog.html.it/layoutgala/LayoutGala32.html

@mdo

This comment has been minimized.

Copy link
Member

mdo commented Oct 27, 2011

Gotcha. Maybe I'll revisit this with 2.0. Thanks, guys!

DocX pushed a commit to DocX/bootstrap that referenced this issue Sep 16, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment