[Solved] Bootstrap issue with sidebar

[Hidden308]

Screenshot: http://i.imgur.com/6KHgolk.png

Well I started working on a random design and went with the flow. I am a bit new to bootstrap and started using it only about a week ago making random things here and there. Now I feel like actually making something and this is what I came up with. But now I am sorta stuck with a sidebar issue. Every time I add more tables the sidebar just goes down with the recent table I put on there. How do I fix this?

[Paulie_D]

We can’t diagnose an image so you would have to make us a working demo.

Codepen,io or Bootply.com are good demo playgrounds.

[Hidden308]

http://betabb.com/test123

I put it here then.

[Hidden308]

Still having the sidebar issue regardless of fixing most of those issues.

[Hidden308]

Still can’t fix the issue and I been trying to fix it for a few hours now.. I don’t know where I went wrong. :/

[Paulie_D]

I think you need to re-think your structure.

As I recall bootstrap uses a 12 col width thingy for each row..so your sidebar (col-3) should be right after the previous col-9 (9+3=12).

But this will force the next col-9 down too.

You need to make some actual wrapping column divs (one 9 wide, the other 3 wide) and then put the respective divs inside those columns.

[Hidden308]

I tried that. The 9 col’s and 3 were already there. Just had to put the sidebar code between the 2 as you said. Then put a new row but that just creates a new issue of a huge long space between the first table and the 2nd one.

It’s on http://betabb.com/test123 now.

[Paulie_D]

That’s what I said.

But this will force the next col-9 down too.

That’s the way floats work.

You need wrapping columns of width 9 (left side) and width 3 (sidebar) that you can put divs in.

Those ‘sub’divs’ will be 100% wide of the column widths if you see what I mean.

See if you can find something by searching for “bootstrap 2 column layout”

[Hidden308]

Still banging my head agasint the wall. Still no luck in fixing it. I guess every time you mention 9 and 3 I assume you mean by these kind of codes:

<div class="col-md-3">
<div class="col-md-9">

Those are already in there. So I still don’t know what to do. :/

[Soren]

Are you still having trouble with this? I ask only because it looks fine to me in chrome.

At the moment your demo link layout is:

.col-lg-9 // table 1
.col-sm-3 // sidebar
.col-lg-9 // table 2

but like Paulie_D mentioned, I think you should wrap your tables inside one div (col-lg-9) and your sidebar inside another (col-sm-3). You don’t need a div.col-lg-9 for every table you add.

.col-lg-9 // all tables
.col-sm-3 // sidebar

Put these two containing divs inside an element that has css styles for clearing.

[Hidden308]

Uhmm could you guys post a screenshot of what you are seeing? I am seeing this: http://i.imgur.com/VGPys7i.png

I also put in the screenshot of the issue now. They already have .col-lg-9 for the tables and .col-sm-3 for the sidebar.

[Hidden308]

Just figured out the issue. It was due to .col-sm-3 being float:left instead of float:right in the bootstrap css. This has fixed the issue.

[Author]

Posts