I use div to replace table for 2 column. I have problem to display them in good view if 1st column text too long. For example: 'Spoken' should be inline with 'English' but not 'Loans, Dental' from previous 2nd column.
#wrap {
width:280px;
margin:0 auto;
}
.left_col {
float:left;
width:30%;
}
.right_col {
float:right;
width:70%;
}
http://jsfiddle.net/HtyXP/
the only way i see to fix this is either a table, or if you want to stick to divs desparately this:
<div id="wrap">
<div class="row">
<div class="left_col">Industry:</div>
<div class="right_col">Insurance</div>
</div><div class="row">
<div class="left_col">Co. Size:</div>
<div class="right_col">201 - 500 Employees</div>
</div><div class="row">
<div class="left_col">Working Hours:</div>
<div class="right_col">Regular hours, Mondays-Fridays</div>
</div><div class="row">
<div class="left_col">Benefits:</div>
<div class="right_col">Medical, Education support, Loans, Dental</div>
</div><div class="row">
<div class="left_col">Spoken Language:</div>
<div class="right_col">English</div>
</div>
</div>
That is caused because you set the width to 280px (#wrap). Medical, Education support, Loans, Dental is a very long sentence and it is overflowing the 70% of the right_col. The same thing with the Language spoken.
To make everything look good, you have to increase this value. A width of 400px should work.
Related
I have two divs being one above the other.
When the window width goes below 992 pixels, I want b to be above a, so I want to rearrange them vertically.
I am trying to do that with bootstrap. The result becomes like this:
Why?
html:
<div class="parent">
<div class="row">
<div class="a col-xs-12 col-xs-offset-12 col-sm-offset-12 col-md-offset-0">
a
</div>
<div class="b col-xs-12">
b
</div>
</div>
</div>
css:
.parent
{
width: 100px;
}
.a
{
background: #faa;
}
.b
{
background: #afa;
}
https://jsfiddle.net/24tt6xgL/5/
Other things I have tried:
pushing the a-div 12 and pulling the b-div 12 columns with col-md-push-12 and col-md-pull-12.
Only pushing the a-div, not pulling the b-div.
pushing the a-div 6 columns, pulling the b-div 6 columns
One solution for this would be to use the classes like hidden-*. In this way, you would have duplicate code, but it would quickly achieve what you would like to do and stay within Bootstrap.
<div class="parent">
<div class="row">
<div class="b col-xs-12 visible-xs visible-sm">
b
</div>
<div class="a col-xs-12">
a
</div>
<div class="b col-xs-12 hidden-xs hidden-sm">
b
</div>
</div>
</div>
As you can see here, the .b div has been duplicated, but never appears twice: For md and lg screens, the top .b div would be hidden and the bottom one would be shown. For xs and sm screens the opposite is true.
Of course, this solution is not perfect, the maintenance of the code is more of an effort, so if these divs are much longer than in the example code, it is probably worth trying to play with the CSS, but if the code is short, it would be a good solution.
It's also worth noting that duplicating the .a div above and below the .b div instead is an equivalent solution.
I want to make a page with posts that have a non equal height, but same width like two posts on a row without the use of rows I did give every div a col-md-6 class which gave me two divs in a row but there's a gap between the elements since they are with different height.
like this:
and the gap becomes bigger if the show comments button is clicked:
here's a working plunker with this example.
I tried to pull the odd element to a side and the even element to the other, I thought maybe when elements are floated left they will stay left, but that was not correct.
first it looked like it worked:
but again once the show comments button is clicked the gap reappear and if I play a little with the padding the elements will be unaligned:
here's a working example in this plunker.
And in all this examples if an element is long enough it will push the element under it to the other side, which is the other behaviour that I don't want.
So the question is how could I display non equal height elements in a way that there's no gaps and that when one element is too long (or the show comments button is clicked) it won't push the one under it to the other side?
Note: I'm looking for a CSS solution.
update:
As #gorostas and #dsuess answered the use of two containers to separate the elements is the original design and it work as a visual organisation but when it come to ordering the posts that will be a problem since the loop wont run in two separate container and throwing one element in each every loop so for such a solution to work I need to write a function that splits the posts and organize them in a way that the post number 1 will be in the left, 2 on the right and 3 on the left and so on, even though that's doable it's rather unnecessary so going back to my original question I'm looking for a CSS solution I already have 2 other JavaScript solutions I don't like to use I rather found a simple and easy to implement one, that reduces the amount of HTML and JavaScript code written.
How about using 2 columns with each containing boxes:
$('div').on('click', function () {
$(this).toggleClass('expanded')
});
.column{
width: 48%;
float: left;
margin: 0 1%;
}
.box {
margin: 5px 1%;
width: 100%;
height: 40px;
border: 1px solid black;
background: #c3c3c3;
}
.expanded {
height: 120px;
background: #999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>click the boxes</h2>
<div class="column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
<div class="column">
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
</div>
What you think abaout using Masonry?
Here is working fiddle
http://jsfiddle.net/52VtD/9313/
$(document).ready(function () {
var $container = $('.masonry');
$container.function () {
$container.masonry({
itemSelector: '.post-box',
columnWidth: '.post-box',
transitionDuration: 0
});
});
});
UPDATE FINAL
<div class="row">
<div class="col-xs-6 col-md-6 col-sm-6">
1
</div>
<div class="col-xs-6 col-md-6 col-sm-6">
2
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-6 col-sm-6">
3
</div>
<div class="col-xs-6 col-md-6 col-sm-6">
4
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-6 col-sm-6">
5
</div>
<div class="col-xs-6 col-md-6 col-sm-6">
6
</div>
</div>
Working fiddle
http://jsfiddle.net/52VtD/9325/
I'm trying to set some divs to width: 100% on Twitter Bootstrap 3 (including no paddings or margins).
JSfiddle: http://jsfiddle.net/rq9ycjcx/
HTML:
<div class="container">
<header>
<div class="row">
<div class="col-md-2">
<img src="http://placehold.it/150x50">
</div>
<div class="col-md-10">Menu</div>
</div>
<div class="row gray">
<div class="col-md-6">
<h1>Page Title</h1>
</div>
<div class="col-md-6">
<div class="breadcrumbs">Main page > page </div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/350x150" />
</div>
</div>
</header>
<footer>
<div class="row">
<div class="col-md-12">Content</div>
</div>
<div class="row dark">
<div class="col-md-3">Footer 1</div>
<div class="col-md-3">Footer 2</div>
<div class="col-md-3">Footer 3</div>
<div class="col-md-3">Footer 4</div>
</div>
</footer>
</div>
What is the right way to get image http://placehold.it/350x150 width: 100%, including no paddings or margins?
Page title and breadcrumbs height is 80px.
If I resize window to smaller screen (e.g. mobile), text Main page > page disappears (it's somewhere but not on own row).
How to fix it?
Use <div class="container-fluid">. As per Bootstrap Docs: Use .container-fluid for a full width container, spanning the entire width of your viewport.
There is 0 padding on container-fluid.
In your code you have what appears to be body content in your header and you also have a div class="container" outside of your header and footer. This is not correct, you should have your container/container-fluid inside of your body. Also for your header you should use <nav="nav navbar-nav">.
Updated Fiddle
As suggested above, you can create a helper class
.padding-0 {
padding: 0;
}
and apply it to any HTML elements for which you need a padding reset. So in your case, it would look like this:
<div class="row">
<div class="col-md-12 padding-0">
<img src="http://placehold.it/350x150" />
</div>
</div>
For the second problem, set height of .gray class to auto :
#media () {
.gray {
height: auto;
}
}
Note: You could also remove line-height: 80px, it's optional :)
http://jsfiddle.net/rq9ycjcx/8/
There is no "right" way to do that in Bootstrap 3. It means you have to reset padding for the exact column.
You can create a class such as this one:
.col-md-12.resetPadding { padding:0px }
About Main page > page disappearing, I don't see this problem on my browsers (tested on Chrome and FF), but you have line-height: 80px there and as you said your breadcrumbs div has height: 80px;, so try to reduce line-height property and see how it works.
A simple way would be to remove the <div class="col-md-12">...</div> and add your content directly inside the row tag. The row tag removes the left & right gutters, whereas the cold-md-12 essentially adds the gutters back in.
The Bootstrap 3 documentation says that for single full width items you don't need any markup, eg just wrap it in <p> tags. However this will show the 15px gutters due to the page markup. So by simply adding in the row tag and placing your content directly inside this you will get 100% width content and be compliant with the BS3 documentation.
I may sound stupid, but this is all new to me.
I'm guessing I have overlooked something.I have no ideea how to fill the white spaces between my columns(end-to-end)
This is my code:
<div class="container" id="cfoot">
<div class="col-lg-3">
<h3>despre noi</h3>
<p>Pensiunea Delia</p>
<p>Echipa Noastra</p>
</div>
<div class="col-lg-3">
<h3>link-uri utile</h3>
<p>Intrebari frecvente</p>
<p>Serviciile noastre</p>
<p>Contact</p>
</div>
<div class="col-lg-3">
<h3>ultimele postari</h3>
<p>Titlul postare blog vine aici</p>
<p>Titlul postare blog vine aici</p>
<p>Titlul postare blog vine aici</p>
</div>
<div class="col-lg-3">
<img src="imgs/logodelia.png" alt="logobottom">
<p># 2014 Pensiunea Delia. Designed by Kinkara Web</p>
</div>
CSS:
#cfoot.container{
background-color:#f4f4f4;
color:#6c6c6c;
background-image:none;
}
Can anyone help please?
When I use developer tools to look at the markup, I'm seeing this applied by the browser:
body {
display: block;
margin: 8px;
}
If you simply add
body {
margin: 0;
}
.container {
margin: 10px; // adjust as needed
}
I think you'll be on your way.
note: you're also missing the Bootstrap row
<div class="row">
fiddle: http://jsfiddle.net/XEF8v/1/
I'm not quite clear on your question. I think you are asking us how you can use bootstrap to achieve the layout of four columns, like in the second image that you have posted.
You can get most of the way there by using Bootstraps built-in grid system.
Overview of Bootstrap's grid system: http://getbootstrap.com/css/#grid
<div class="container-fluid">
<div class="row">
<div class="col-md-1" id="col-1"><!-- empty space on left --></div>
<div class="col-md-2" id="col-2"><!-- despre noi column --></div>
<div class="col-md-2" id="col-3"><!-- link-uri-title column --></div>
<div class="col-md-2" id="col-4"><!-- ultimele column --></div>
<div class="col-md-4" id="col-5"><!-- delea logo column --></div>
<div class="col-md-1" id="col-6"><!-- empty space on right --></div>
</div>
</div>
The col-md-<#> class determines the horizontal width of a column. Per Bootstrap's documentation, these numbers should add up to 12.
I need to add space between grids, without changing .col-md-4 and .col-md-8 style
<div class="row" >
<div class="col-md-4" style="height:250px;">grid1</div>
<div class="col-md-8" style="height:250px;">grid2</div>
</div>
I'd suggest you add a new div element inside any of the .col-md-* and give it a padding (or a margin) (Because you can't edit the default Bootstrap files).
<div class="row" >
<div class="col-md-4" style="height:250px;">grid1</div>
<div class="col-md-8" style="height:250px;">
<div style="padding-left: 20px;">grid2</div> <!-- The added div -->
</div>
</div>
Another option is to create a special CSS class and apply it to the rows where you want the wider spacing..
.row.wide-gutter [class*='col-']:not(:first-child):not(:last-child) {
padding-right:20px;
padding-left:20px;
}
Demo: http://bootply.com/110509