Timeline overflow screw up next elements - html

I am using a library that create timeline. This is javascript based.
I have the following html
<div class="container">
<div class="row">
//Stuff here
</div>
<div class="row>
<div id="timeline">
</div>
</div>
<div class="row>
//Other stuff here
</div>
</div>
And the timeline library is replacing my $('#timeline') element by the timeline
If I do not have many elements on my timeline, everything is fine
But if I have more elements, the timeline is expending through the third <div class="row">.
How to fix it to have the third row always placed after the timeline ?
I do not want to hide the overflow.
What CSS trick should I try ?

Try adding class clearfix if you are using something like that or any thing similar I would be better if you post your css too

just for kicks, try....
if it doesnt work i will delete... but my understanding is that its worth a try.
<div class="container">
<div class="row">
//Stuff here
</div>
<div class="row>
<div id="timeline">
</div>
<div style="clear:both"></div> <!--this is the added line-->
</div>
<div class="row>
//Other stuff here
</div>
</div>

Related

How to Nest Divs

So, what I am trying to do, is put a div inside a div. The text editor reads the second div's end as the first one's.
This kind of stumped me, so I haven't really tried anything else
<div id="navbar">
</div>
<div id="else">
<div>
</div>
<div id="project1">
</div>
</div>
The last div should go with the first one.
<div id="navbar">
<div id="outer">
<div id="innerOne">
</div>
<div id="innerTwo">
</div>
</div>
</div>
Be sure to make good use of indenting and spacing if you want to make things easier on yourself!
If you notice in your code when you declare the first div you immediately close it again and start a new one, every other div wants to be nested inside it.
<div id="navbar">
A Div on it's own
</div>
<div id="else">
A new div on the same 'level' as the last
<div>
a Child of the else div
</div>
<div id="project1">
second Child of the else div
</div>
end of else
</div>
Figuring the nesting is easier when you:
Indent the code, and
Add comments to track the (matching) closing tags
<div id='navbar'> // open navbar
<div id='else'>
</div> //end else
<div id='project1'>
</div> //end project1
</div> //end navbar
(my code block thing is being buggy, but I hope you understand what I was saying...)
In HTML after most opening tag should come the content and then the closing tag
in your case ...
There are self-closing tags also, which don't need a closing one for example: <img src="">
Your code is wrong, because after the <div id="else"> you have another div opening tag, but there should be a closing tag before it, like this:
<div id="navbar">
</div>
<div id="else">
</div>
<div id="project1">
</div>
Nesting divs should look like this:
<div id="navbar></div>
<div id="else">
<div id="project1"></div>
</div>

Multi columns breaks when I put img

I have 5 multi-columns that have scroll eventlistener. The problem is when I put pictures inside a column the others columns goes under that one. I tried some clearfix solution but does not work.
Can you help me please?
Here is a jsfiddle without pictures - I put the CSS beside (I want it to works like that but with pictures, not with text) - https://jsfiddle.net/u849yzn3/15/
And here is what happens when I put picture - https://jsfiddle.net/georgeSohan/7puf3z9m/4/
Here is the html
<div id="main" class="clearfix">
<div class="scroll-class columnScroll clearfix" id="scroll">
<div class="imgWrap clearfix"><img src="images/0-i6"> </div>
<div class="imgWrap clearfix"><img src="images/0-i6.jpg"</div>
<div class="imgWrap clearfix"><img src="images/0portrait.jpg"</div>
</div>
<div class="columnScroll clearfix"><p> Some Text</p></div>
<div class="columnScroll clearfix"><p> Some text</p></div>
<div class="columnScroll clearfix"><p> Some text</p></div>
<div class="columnScroll clearfix"><p> Some text</p></div>
</div>
Thank you!

Is having multiple rows and columns inside one another an okay practice in bootstrap

Currently I am structuring the HTMl on my page as follows:
<div class="row">
<div class="col-xs-12">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="container-2">
<div class="content"></div>
</div>
</div>
</div>
</div>
</div>
</div>
There are 6 divs outside of the actual content on each section. The outer column is to be a container of a certain colour, and the inner container is only fill up 8/12 of the outer container. This produces margins with the background colour of the outer container of width 2 on either side of the inner column.
This looks great and is responsive. However, I'm wondering if having this many divs is good practice or not?
Well, I guess it's up to you. If you feel like you can manage this many div's then it's fine. But what you have to think about is, if you for instance would pass on your project to another developer, then he would need to understand your work without cleaning up before he even starts, so it's always important to have that in mind when you develop.
I would maybe construct it this way:
<div class="container">
<div class="row">
<div class="col-xs-12">
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="content"></div>
</div>
</div>
</div>
This is just what I wan't to do, maybe someone else would do it another way.

How to create left and right side inside container?

What i have is sidebar and on right side i have content. What i want is that both sides are in container but that are both full width . This is my demo: https://jsfiddle.net/DTcHh/19067/
So i want that left background color start from beging of page but text inside is in container and also i want that background color of right content go to the end of page but text is in container. Any suggestion?
<div class="container">
<div class="col-md-3">
<div class="left_sidebar">
menu
</div>
</div>
<div class="col-md-9">
<div class="right-content">
content
</div>
</div>
</div>
Its simple, wrap the colored containers above the container class and use two different containers:
<div class="left_sidebar">
<div class="container">
<div class="col-md-3">
menu
</div>
</div>
</div>
<div class="right-content">
<div class="container">
<div class="col-md-9">
content
</div>
</div>
</div>
Here is a working Fiddle
REMOVED other edits because EDIT 3 should do the trick best
EDIT 3
Here it is, that must be it for sure now. The trick is done with a linear gradientand a custom container above your bootstrap container.
See Fiddle
What you're asking, is by default impossible, since the .container class has a set width on different viewports and it is also horizontally "centerised" by margin:auto.
To achieve what you are trying you will have to follow a different "logic".
I would propose something like this:
<div class="left-sidebar col-md-3">
<div class="sidebar-menu col-xs-6 pull-right">
menu
</div>
</div>
<div class="right-content col-md-9>
<div class="content-text col-xs-10>
content
</div>
</div>
I propse this solution in order to stay in the same "flow" as your code. You could also, just play with paddings, which makes more sense.
use class row before col div
<div class="row">
<div class="col-md6"></div>
<div class="col-md-6"><div>
</div>

html creating a dashboard for mobile

I have to create the following html, tried to use a div for the "last 24 hours" and "last month" and other divs with float left for other stuff, but it turned out all messed up.
please help me, what structure should use? table? divs? thks
This begs to be a grid. I'd use divs with some ready made grid, like the one from Bootstrap.
So for example it could look like this:
<div class="container">
<div class="row">
<div class="span6">LAST 24 HOURS</div>
<div class="span6">LAST MONTH</div>
</div>
<div class="row">
<div class="span6">283</div>
<div class="span6">put a nested grid here</div>
</div>
<div class="row">
<div class="span3">Facebook<div class="value">10%</div></div>
<div class="span3">Twitter<div class="value">9%</div></div>
<div class="span3">Foursquare<div class="value">7%</div></div>
<div class="span3">Others<div class="value">5%</div></div>
</div>
</div>
Then add some css classes and use that to float, change font sizes, colors, etc.