I have bunch of floated divs that I want to distribute in a 2-column system.
The problem is that too much vertical space is generated in the left hand column between the boxes.
The divs are all in one big container, so it's not actually 2 columns, markup-wise.
Can someone advise me on how to maintain the tightness between the boxes and still honour the alphabetical zig-zag order?
<div class="tag-box">
<div class="heading">
<input type="checkbox" data-field="county">
<span class="heading">Blekinge</span>
</div>
<div class="tag-group ui-helper-clearfix">
<div>
<input type="checkbox" value="23" data-field="br">
<div class="tag">
<div>23</div>Karlshamn</div>
</div>
<div>
<input type="checkbox" value="22" data-field="br">
<div class="tag">
<div>22</div>Karlskrona</div>
</div>
</div>
</div>
The only way you can get rid of the spacing is use 2 wrappers. An left and a right wrapper which each contain the tag-box's you need.
The tag-box's will be floating against each other within there parents and not create extra space.
Here what happened is according to right column content your left column also expands. So split it into 2 different columns and place your content over there.
HTML:
<div class="container">
<div class="left-col"> .. your content goes here.. </div>
<div class="right-col"> .. your content goes here.. </div>
</div>
Related
I am trying to learn Bootstrap grid more. I am trying to get two columns in two rows in the middle of my page.
So it should look like this:
Here is what I got so far:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6">
<div id="text1">
<label>Text 1</label>
</div>
<div id="text2">
<label>Text 2</label>
</div>
</div>
<div class="col-xs-6 col-sm-6">
<div id="text3">
<label>Text 3</label>
</div>
<div id="text4">
<label>Text 4</label>
</div>
</div>
</div>
</div>
But my elements are not in place where I want them.
Here is the solution in a fiddle: Solution 1
Now for the explanation of the problem:
First you need to set specific columns. Keep in mind that Bootstrap has a grid of 12. So your maximum can be 12 at all time. However, you don't need to have the columns fill the entire grid.
You can use something called offset which allows you to put empty space in your elements. Having the class class="col-md-5 col-lg-5 col-sm-5 offset-1" gives you a column with a value of 5 so you can actually position 2 columns and have space on the side.
I would suggest to go through the Bootstrap grid and play around in order to get a familiar feeling on how to manipulate it.
The style sheet margin-left:25px; margin-top:25px; gives you the space on the top and on the side of the columns themselves.
I am using Zurb Foundation 5 and I am trying to achieve the following:
I have a row which contains a search box located somewhere in middle of the page. I want to stick the <div> which contains the search box on top once user scrolls down to it. Is there a built in class in foundation 5 to do it, and if not, what is an alternative way to do it? Note that I need it to be responsive such that I don't have to specify the distance from top to the div (scroll distance).
I recommend using Magellan to do this in Foundation 5.
You can insert the following code within your page:
<div data-magellan-expedition="fixed">
<div class="row" data-magellan-arrival="search">
<div class="large-12 columns">
<a name="search"></a>
<div class="row collapse" data-magellan-destination="search">
<div class="small-10 columns">
<input type="text" placeholder="Search the database">
</div>
<div class="small-2 columns">
<button class="button postfix expand">Go</button>
</div>
</div>
</div>
</div>
</div>
I've created this example in CodePen
I'm trying to create a row of divs (one per day of the week) that each contain a set of buttons for a user's availability for that time slot. However, no matter what I try I can't get the Bootstrap grid to space it evenly. Since there's seven days, I can't evenly divide the 12-space span, so each div is span1. However, in the Bootstrap docs they show this evenly filling the available space. In my example, it always crowds the divs to the left, so everything is cramped instead of taking up the available space.
I have a fiddle here: http://jsfiddle.net/usrwvreL/
Can someone point out the right way to use the grid / fluid row to space these items appropriately?
I find that an easy way to defeat the grid system when faced with this type of challenge is to take advantage of nested rows. Create three columns of size 4,
inside of which you could create three columns of four.
In the first parent column, you could have two child columns. The first child column would be offset using the .col-size-offset-4, which would then be proceeded by a .col-size-4.
The center parent column would have three child columns of size four, and the final parent column would have two child columns of size 4.
<!--This is the parent row-->
<div class="row">
<!--This is a parent column-->
<div class="col-md-4">
<!--Here is the gold. Create nested rows-->
<div class="row">
<!--Here we are offseting this column to produce a centered effect-->
<div class="col-md-offset-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
<!--The middle parent column-->
<div class="col-md-4">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
<!--The last parent column, farthest to the right
<div class="col-md-4">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
</div>
Bootstrap uses a 12 box grid system so if you need to divide by seven you could add a custom grid division,
so you can make a selector like .col-seventh{width: calc (100% / 7)}
to extend that you can make a new grid type:
.col-seventh-1{width: 14.285714%;}
.col-seventh-2{width: 28.571428%;}
.col-seventh-3{width: 42.857142%;}
.col-seventh-4{width: 57.142857%;}
.col-seventh-5{width: 71.428571%;}
.col-seventh-6{width: 85.714285%;}
.col-seventh-7{width: 100%;}
Instead you could also use flexboxes css3 property layout (non-bootstrap) to do all this for you!!
I am just wondering it might be a good solution to put the date on an individual line. So that you would just have to align a btn-group with 6 btns.
Why don't you try changing the layout. For say you can show three time buttons per row. The date will be on the top most row but it could be aligned center and the other buttons with time could be in the center as well.
Why can't you put like this?
<div class="container-fluid">
<div class="span1 avail-buttons"><span class="avail-date text-center">2015-02-11</span>
<div class="button-row row-fluid">
<button data-slot="0" type="button" class="avail-button btn btn-danger">08:45 AM</button>
<button data-slot="1" type="button" class="avail-button btn btn-danger">09:15 AM</button>
<button data-slot="2" type="button" class="avail-button btn btn-danger">09:45 AM</button>
<button data-slot="3" type="button" class="avail-button btn btn-danger">10:15 AM</button>
<button data-slot="4" type="button" class="avail-button btn btn-danger">10:45 AM</button>
<button data-slot="5" type="button" class="avail-button btn btn-danger">11:15 AM</button>
</div> </div></div>
Related to my earlier question
I would like to be able to align the pull-right div to the bottom of a div.
I have the following markup:
<div class="container">
<div class="container">
<div class="footer-images">
<img src="img1">
<div class="pull-right">
<img src="img2">
<img src="img3">
</div>
</div>
</div>
<div class="container">
<div class="copyright">
<p>© Some Company YYYY</p>
</div>
</div>
</div>
I can't figure out how to get the pull-right (or other div classes) to align to the bottom of the footer-images div class.
If I understand the question right. You just have to make sure you float the elements inside it (the tags). But it will only be aligned from the top if you have different image sizes.
Would be much more easier to give you advice if you can show us an image of what you want to do and what does it look like as of now. (Would be better if you also show the css)
I have a div-table that is working fine with about 4 columns but now I want to make the items expandable so that another div appears below the entry. The problem is that if I use another div below the table-row its width is getting stucked to the first columns-width.
What I need is a division that ignores the table-layout .. any GOOD solutions for this?
It looks like your final spanning div at the bottom is taking some strange inheritance from your divTable class. In your code, your final div is within the wrapper of divTable. I've amended your code slightly to have the div outside of the divTable div and it spans all columns.
<div class="navContent">
<div id="lastRequests" class="divTable">
<div class="divRow bold">
<div class="divCell c1"> SiteID </div>
<div class="divCell c2"> Ort </div>
<div class="divCell c3"> Anfrage </div>
<div class="divCell c4"> Ergebnis </div>
<div class="divCell c5"> Datum </div>
</div>
<div class="divRow">
<div class="divCell c1"> 56831-12481 </div>
<div class="divCell c2"> gütersloh </div>
<div class="divCell c3"> 332312, Bielefeld, <span class="tooltip" data-tooltip="Open. Web. Business.">Deutscheland</span>, 80.32, 43.23</div>
<div class="divCell c4"> Proxy </div>
<div class="divCell c5"> 05.09.2012 20:20:21 </div>
</div>
</div>
<!-- move this div here -->
<div style="background-color: #0F9;">
This div should use the whole width
</div>
</div>
Edit: While this will work, I agree with everyone else above when they say you should really just use a table for this data instead of trying to replicate table functionality with divs.
As far as I'm aware CSS doesn't have an option to display a div using a colspan attribute.
I'd recommend either using a real table element if it's to display acrtual tabular data or alternatively simply recreate the layout using divs with the table attributes and your own custom styles.