I want to keep the text to move to next line in order to keep it in its own column but my text is overflowing. I want all 1's to stay in 1st col. Any hints on what i might need to change/add?
Heres the code:
<div class="container-fluid ">
<div class="row">
<div class="col-sm-4"> Col1 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
<div class="col-sm-4">Col2</div>
<div class="col-sm-4">Col3</div>
</div>
</div>
Heres the link to how it looks:JSFiddle
.col-sm-4 {
-moz-hyphens:auto;
-ms-hyphens:auto;
-webkit-hyphens:auto;
hyphens:auto;
word-wrap:break-word;
}
This should do the job.
Your problem was, that the browser can't decide where to put a break since you don't have a single space. With hyphens you force him to just break to the next line when there's not enough space. Check here for Browser Support: https://developer.mozilla.org/de/docs/Web/CSS/hyphens#Browser_compatibility
I'm not sure if you want to use CSS "overflow", perhaps checkout this link which will tell you what it is:
http://www.w3schools.com/cssref/pr_pos_overflow.asp
PS: Checkout the Property Values section for the desired end result.
It is css bootstrap default overflow might be not hidden so the text flows use the class col-md-1
Related
I want to have two columns on my web page. For me the simples way to do that is to use a table:
<table>
<tr>
<td>
Content of the first column.
</td>
<td>
Content of the second column.
</td>
</tr>
</table>
I like this solution because, first of all, it works (it gives exactly what I want), it is also really simple and stable (I will always have two columns, no matter how big is my window). It is easy to control the size and position of the table.
However, I know that people do not like the table-layout and, as far as I know, they use div and css instead. So, I would like also to try this approach. Can anybody help me with that?
I would like to have a simple solution (without tricks) that is easy to remember. It also needs to be stable (so that it will not accidentally happen that one column is under another one or they overlap or something like that).
i recommend to look this article
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
see 4. Place the columns side by side special
To make the two columns (#main and #sidebar) display side by side we float them, one to the left and the other to the right. We also specify the widths of the columns.
#main {
float:left;
width:500px;
background:#9c9;
}
#sidebar {
float:right;
width:250px;
background:#c9c;
}
Note that the sum of the widths should be equal to the width given to #wrap in Step 3.
I agree with #haha on this one, for the most part. But there are several cross-browser related issues with using the "float:right" and could ultimately give you more of a headache than you want. If you know what the widths are going to be for each column use a float:left on both and save yourself the trouble. Another thing you can incorporate into your methodology is build column classes into your CSS.
So try something like this:
CSS
.col-wrapper{width:960px; margin:0 auto;}
.col{margin:0 10px; float:left; display:inline;}
.col-670{width:670px;}
.col-250{width:250px;}
HTML
<div class="col-wrapper">
<div class="col col-670">[Page Content]</div>
<div class="col col-250">[Page Sidebar]</div>
</div>
Basically you need 3 divs. First as wrapper, second as left and third as right.
.wrapper {
width:500px;
overflow:hidden;
}
.left {
width:250px;
float:left;
}
.right {
width:250px;
float:right;
}
Example how to make 2 columns http://jsfiddle.net/huhu/HDGvN/
CSS Cheat Sheet for reference
I found a real cool Grid which I also use for columns. Check it out Simple Grid. Wich this CSS you can simply use:
<div class="grid">
<div class="col-1-2">
<div class="content">
<p>...insert content left side...</p>
</div>
</div>
<div class="col-1-2">
<div class="content">
<p>...insert content right side...</p>
</div>
</div>
</div>
I use it for all my projects.
The simple and best solution is to use tables for layouts. You're doing it right. There are a number of reasons tables are better.
They perform better than CSS
They work on all browsers without any fuss
You can debug them easily with the border=1 attribute
The code is linked below with JSFiddle.
The problem was when I decrease the screen size the div blocks should be in the same line with decreased width instead they are going one below the other. (once check it by increasing the screen width).
The other one I want to highlight is that the code for showing
read more option for text/paragraph when we decrease the block size. That is when we click on read more the block size should increase and show the remaining text. It would be very helpful if someone suggests code for this.
The code is
.center{
float: none;
padding:0px;
margin-left: auto;
margin-right: auto;
}
div.allign{
height:170px;
margin:15px;
text-align:center;
}
div.content{
height:200px;
background-color:#fff;
background-color:#F4F1EE;
}
<div class="container-fluid">
<div class="row-fluid content">
<div class="col-md-1 "></div>
<div class="col-md-3 allign">
<h3>Get Started</h3>
<p>How it works?</p>
<p>It's very easy and simple,just sign up for free and get started with your account.
It's easy to reserve or cancel a book from anywhere.</p>
</div>
<div class="col-md-3 allign">
<h3>About library</h3>
<p>location,Directions,Books info...</p>
<p>Total books:1124<br />journals:130<br />.</p>
</div>
<div class="col-md-3 allign">
<h3>No text books?</h3>
<p>Dont worry here we go...</p>
<p>Reserve your books from online by just one click.
Read online/offline by downloading pdf files.</p>
</div>
</div>
</div>
Click here for a JSFiddle example
https://jsfiddle.net/nvpqfxbj/6/
Thanks in advance.
You are using the "md" grid size on those elements so they will become full width below 991px. If you want to maintain the columns on all devices, then use the "xs" columns.
Instead of 'col-md-3' and 'col-md-1' use 'col-xs-3' and 'col-xs-1'. However, you don't need the empty first column because BS address it with offsetting columns.
Also, the margins set from .allign will override the margins BS uses on the columns and you'll have problems unless you remove it. If you need the margins, use another container div nested inside the col-* containers.
BOOTPLY EXAMPLE: http://www.bootply.com/EfOZtUQqcs
This is the basic principle all responsive grid systems are built upon and you're going to struggle unless you understand this basic concept. It's all covered in the BS3 documentation.
http://getbootstrap.com/css/#grid
As for your "read more" problem. The code you provided is not the culprit. There is something going on server-side or JS that is causing this and you've provided no server-side or JS code.
This works for me.
Bootstrap 5
<div class=".container-fluid">
The HTML scheme is following:
<div class="items">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
...
</div>
.item CSS style:
float: left;
And the result:
But the white boxes are not aligned right one after another one -- where could be the issue? I;ve tried also using display: inline-block; instead of float: left;, but the result was basically the same.
Thank you
You can use CSS 3 column-width and column-gap like this..
http://www.bootply.com/118335
I run into the exact same problem and I found this one that worked for me.
https://github.com/kudago/waterfall
It depends only on js no css, though I'm still using bootstrap for other styling. I also use jquery.infinitescroll.js to dynamically load items and after the items are appended, waterfall will do its magic and put everything in place.
The only glitch I found is sometimes items could overlap a bit vertically, as soon as you keep scrolling down they are put correctly. I'm not sure why this is happening, a bit annoying but till I find something better.
Hope this helps.
I want to show a decimal number with currency sign.
The currency and the floating point number should be smaller that the integer part.
For example: $ 4,080,048.00
In the jsFiddle you can see the first line is how I want it to be, but it is written in old HTML style.
I done that with modern HTML (The div with 3 spans) but I have a space between the decimal point: $ 4,080,048. 00.
How can I make the second line to looks like the first one?
Write the markup in a way that there is no space between the spans will fix the problem
<div class="container">
<span class="currency">$</span>
<span class="integer">4,080.</span><span class="decimal">53</span>
</div>
Or, if you don't want to change the markup, you could add font-size:0; to your container class
FIDDLE
.container
{
font-size:0;
}
Yet another option would be to add comments between elements within your markup to make it as if the elements were written one after the other:
FIDDLE
<div class="container">
<span class="currency">$</span><!--
--><span class="integer">4,080.</span><!--
--><span class="decimal">53</span>
</div>
It's the white space which is causing this issue
<div class="container">
<span class="currency">$</span>
<span class="integer">4,080.</span><span class="decimal">53</span>
</div>
http://jsfiddle.net/yrFeB/2/
I cannot add the comment in the answer above but you shouldn't use float: left; for this purpose
I want to have two columns on my web page. For me the simples way to do that is to use a table:
<table>
<tr>
<td>
Content of the first column.
</td>
<td>
Content of the second column.
</td>
</tr>
</table>
I like this solution because, first of all, it works (it gives exactly what I want), it is also really simple and stable (I will always have two columns, no matter how big is my window). It is easy to control the size and position of the table.
However, I know that people do not like the table-layout and, as far as I know, they use div and css instead. So, I would like also to try this approach. Can anybody help me with that?
I would like to have a simple solution (without tricks) that is easy to remember. It also needs to be stable (so that it will not accidentally happen that one column is under another one or they overlap or something like that).
i recommend to look this article
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
see 4. Place the columns side by side special
To make the two columns (#main and #sidebar) display side by side we float them, one to the left and the other to the right. We also specify the widths of the columns.
#main {
float:left;
width:500px;
background:#9c9;
}
#sidebar {
float:right;
width:250px;
background:#c9c;
}
Note that the sum of the widths should be equal to the width given to #wrap in Step 3.
I agree with #haha on this one, for the most part. But there are several cross-browser related issues with using the "float:right" and could ultimately give you more of a headache than you want. If you know what the widths are going to be for each column use a float:left on both and save yourself the trouble. Another thing you can incorporate into your methodology is build column classes into your CSS.
So try something like this:
CSS
.col-wrapper{width:960px; margin:0 auto;}
.col{margin:0 10px; float:left; display:inline;}
.col-670{width:670px;}
.col-250{width:250px;}
HTML
<div class="col-wrapper">
<div class="col col-670">[Page Content]</div>
<div class="col col-250">[Page Sidebar]</div>
</div>
Basically you need 3 divs. First as wrapper, second as left and third as right.
.wrapper {
width:500px;
overflow:hidden;
}
.left {
width:250px;
float:left;
}
.right {
width:250px;
float:right;
}
Example how to make 2 columns http://jsfiddle.net/huhu/HDGvN/
CSS Cheat Sheet for reference
I found a real cool Grid which I also use for columns. Check it out Simple Grid. Wich this CSS you can simply use:
<div class="grid">
<div class="col-1-2">
<div class="content">
<p>...insert content left side...</p>
</div>
</div>
<div class="col-1-2">
<div class="content">
<p>...insert content right side...</p>
</div>
</div>
</div>
I use it for all my projects.
The simple and best solution is to use tables for layouts. You're doing it right. There are a number of reasons tables are better.
They perform better than CSS
They work on all browsers without any fuss
You can debug them easily with the border=1 attribute