I'm trying to put my 2 paginations at the same vertical distance of my table.
This works for the bottom part but the top part appears to be in my table-container for some reason.
CSS:
.table {
width: 100%;
max-width: none;
clear: both;
}
.table-container {
margin-top: 20px;
margin-bottom: 20px;
}
section {
margin-top: 20px;
margin-bottom: 20px;
}
.pagination {
display: inline;
}
To fix the spacing issue, change
.pagination {
display:inline-block;
}
to
.pagination {
display:inline; //or block
}
You should also wrap your .pagination in a .col-xs-12 .col-md-12 div like this. Always include the xs classes as Bootstrap is mobile first.
<div class="row>
<div class="col-xs-12 col-md-12">
<ul class="pagination">
//code
</ul>
//rest of code
</div>
</div>
Also, this
<section>
<div class="col-xs-2 col-md-2"></div>
<div class="col-xs-8 col-md-8">
//code
</div>
</section>
should be
<section>
<div class="row>
<div class="col-xs-2 col-md-2"></div>
<div class="col-xs-8 col-md-8">
//code
</div>
</div>
</section>
As the docs state
Content should be placed within columns, and only columns may be
immediate children of rows.
You have no margins on your rows. Other things are affecting it that are inside the rows. For example, you have a <div class="pagination"> is display:inline-block. If you remove that, the bottom 5px margin goes away.
Related
I have two tabs and they have bottom-borders. This is the jsfiddle example.
<div class="component-content">
<div class="tabs-inner">
<ul class="tabs-heading">
<li tabindex="0" class="active">
<div>
<div class="row">
<div class="component content col-12">
<div class="component-content">
<div class="field-heading">TAB 1: STANDARD SMALL</div>
</div>
</div>
</div>
</div>
</li>
<li tabindex="-1">
<div>
<div class="row">
<div class="component content col-12">
<div class="component-content">
<div class="field-heading">TAB 2: STANDARD SMALL</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
.tabs-heading {
display: table;
table-layout: fixed;
width:100%;
}
.tabs-heading li {
display: table-cell;
border-bottom: 2px solid red;
}
I want to add padding in the border bottom so that it should look like this
I tried to add padding-bottom but it didn't work.
Any suggestion or help would be appreciated
I am not quite sure if I got your question right ... but maybe you are looking for something like this ...?
If you don't use table and table-cell ... but flexbox instead ... all tabs will get automatically the same height and you are able to work with padding-bottom. If you like you can add margins between tabs as well.
#wrapper {
display: flex;
align-items: stretch;
background-color: Gray;
}
#wrapper div {
padding-bottom: 10px;
border-bottom: 2px solid orange;
}
#one {
background-color: green
}
#two {
background-color: blue
}
#three {
background-color: red
<div id="wrapper">
<div id="one">one one one one one one one one one one one one one one one one one one one one one</div>
<div id="two">two two two two two two</div>
<div id="three">three</div>
</div>
So, I am creating a grid system based on flexbox and everything is going quite swimmingly. The basics of my grid are:
<div class="row">
<div class="column"><p>Column</p></div>
<div class="column"><p>Column</p></div>
<div class="column"><p>Column</p></div>
</div>
And in my css:
.row {
margin: 10px 0;
display: flex;
flex-wrap: wrap;
}
.column {
padding: 10px;
flex: 1 1 0%;
}
Essentially, this makes the columns quite fluid, and they shrink/grow to fill all available space. This is great for me as I need to use this throughout various projects where I can't quite customize the grid for every single one. However, I have run into a small "issue". I was going to create a class called ".collapse" so I could collapse the left/right padding to have some columns fit right next together (for example: If I wanted a div with a background color (by adding a color class to the column=> .column .green) flush to an image in the next column). However, the spacing is all out of wack compared to row/columns above it.
<div class="row">
<div class="column purple collapse"><p>Column</p></div>
<div class="column red collapse"><p>Column</p></div>
<div class="column purple collapse"><p>Column</p></div>
<div class="column red collapse"><p>Column</p></div>
</div>
example screenshot here
As you can see in my little example mockup, they do kinda line up, but the right and left margins have "decreased". Is there any smart way around this? I tried adding "left/right margins" to the first-of-type and last-of-type, but this just gets a bit hacky as then anything added in between start having odd alignment issues.
For this kind of grid system, you usually would discourage using structural styling on the grid cells directly, and it lets you do something like this:
.row {
display: flex;
flex-flow: row wrap;
list-style: none;
padding: 0;
margin-left: -10px;
}
.column {
flex: 1 0 0;
padding-left: 10px;
}
.collapse { margin-left: 0; }
.collapse > .column { padding-left: 0; }
.red,
.purple {
padding: 10px;
margin-bottom: 10px;
}
.red { background-color: red; }
.purple { background-color: purple; }
<div class="row">
<div class="column">
<div class="purple">
<p>Column</p>
</div>
</div>
<div class="column">
<div class="red">
<p>Column</p>
</div>
</div>
<div class="column">
<div class="purple">
<p>Column</p>
</div>
</div>
<div class="column">
<div class="red">
<p>Column</p>
</div>
</div>
</div>
<div class="row collapse">
<div class="column">
<div class="purple">
<p>Column</p>
</div>
</div>
<div class="column">
<div class="red">
<p>Column</p>
</div>
</div>
<div class="column">
<div class="purple">
<p>Column</p>
</div>
</div>
<div class="column">
<div class="red">
<p>Column</p>
</div>
</div>
</div>
This approach uses no margins on the outer ends, which I find way more convenient.
It's worth noting that this kind os system is not all that useful anymore, with the advent of CSS Grid Layout, but there you have it.
On a side note, 0 is always 0, and it never needs a unit.
I've got the following HTML structure which I'm trying to style using CSS selectors only:
<footer>
<div class="row">
<div class="col-md-3"></div>
<nav class="col-md-9"></nav>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9"></div>
</div>
</footer>
Imagine all the columns are stacked in a small viewport.
I want all columns except for the very last one to apply a margin-bottom to space the columns.
I've tried some different approaches, but to no avail:
footer [class^="col-"]:not(:last-child) {
margin-bottom: 3rem;
}
footer [class^="col-"]:not(:last-of-type) {
margin-bottom: 3rem;
}
First, why do these fail? Second, what's the right approach here?
First use footer > div.row > * to apply the margin-bottom 3rem, then use footer > div:last-child > div:last-child ( or footer > div.row:last-child > div:last-child, won't make a difference) to reset the last margin to 0:
(note: I only used the .wrap div to apply a backgroun in order to make the margins (and the "no-margin" on the last element) visible)
.wrap {
background: #ccc;
}
footer > div.row > * {
margin-bottom: 3rem;
background: #dff;
}
footer > div:last-child > div:last-child {
margin-bottom: 0rem;
}
<div class="wrap">
<footer>
<div class="row">
<div class="col-md-3">Content 1</div>
<nav class="col-md-9">Content 2</nav>
</div>
<div class="row">
<div class="col-md-3">Content 3</div>
<div class="col-md-9">Content 4</div>
</div>
</footer>
</div>
I would suggest styling them all, then removing the margin on the last one, like so:
footer [class^="col-"] {
margin-bottom: 3rem;
}
footer .row:last-child [class^="col-"]:last-child {
margin-bottom: 0; // or however much
}
If using last-of-typeis beneficial in any way, then by all means use that, but it should be equivalent if you're implementing Bootstrap (which your class names suggest).
I would like to be able to align an unknown number of columns with an unknown height. Since I do not know how many columns there will be it is not ideal for me to use multiple rows to split up the columns. I can almost achieve the outcome I want by using list items.
The one thing I don't like about using list items is that once the page hits the resize point I am left with the extra space on the right hand side. The top set is using list items and the bottom set is using bootstrap's col's. The problem with the bottom set is when the col's break they don't align to the furthest left position.
Is there a way to achieve this using bootstrap?
<div class="container-fluid">
<div class="row">
<ul>
<li class="list-item" style="height:200px;"></li>
<li class="list-item" style="height:120px;"></li>
<li class="list-item" style="height:100px;"></li>
</ul>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="box" style="height:200px"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="box" style="height:120px"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="box" style="height:100px"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="box"></div>
</div>
</div>
</div>
jsFiddle
Try this :
.row {
display: flex;
flex-wrap: wrap;
}
Another way to handle it, and still maintain Bootstrap's responsive columns is to use CSS to force a clear:left every x columns. For example, when you have 4 columns in a row:
.row > .col-md-3:nth-child(4n+1) {
clear: left;
}
http://codeply.com/go/OHg5vB0Xg3
You really don't need bootstrap to handle this. Here's one potential solution using inline-block. I imagine it's compatible with bootstrap.
.box {
margin: 15px;
width: 80px;
background-color: grey;
display: inline-block;
vertical-align: top;
}
<div>
<div class="box" style="height: 120px;"></div>
<div class="box" style="height: 20px;"></div>
<div class="box" style="height: 40px;"></div>
<div class="box" style="height: 60px;"></div>
<div class="box" style="height: 80px;"></div>
</div>
<div>
<div class="box" style="height: 20px;"></div>
<div class="box" style="height: 60px;"></div>
<div class="box" style="height: 80px;"></div>
</div>
Yes! There is a way. And it's a css-only solution. Try this:
.col-xs-6:nth-of-type(2n+3),
.col-xs-4:nth-of-type(3n+4),
.col-xs-3:nth-of-type(4n+5),
.col-xs-2:nth-of-type(6n+7),
.col-xs-1:nth-of-type(12n+13)
{
clear: both;
}
#media (min-width: 768) {
[class*="col-xs"][class*="col-sm"],
[class*="col-xs"][class*="col-md"],
[class*="col-xs"][class*="col-lg"]
{
clear: none;
}
.col-sm-6:nth-of-type(2n+3),
.col-sm-4:nth-of-type(3n+4),
.col-sm-3:nth-of-type(4n+5),
.col-sm-2:nth-of-type(6n+7),
.col-sm-1:nth-of-type(12n+13)
{
clear: both;
}
}
#media (min-width: 992) {
[class*="col-sm"][class*="col-md"],
[class*="col-sm"][class*="col-lg"]
{
clear: none;
}
.col-md-6:nth-of-type(2n+3),
.col-md-4:nth-of-type(3n+4),
.col-md-3:nth-of-type(4n+5),
.col-md-2:nth-of-type(6n+7),
.col-md-1:nth-of-type(12n+13)
{
clear: both;
}
}
#media (min-width: 1200) {
[class*="col-md"][class*="col-lg"]
{
clear: none;
}
.col-lg-6:nth-of-type(2n+3),
.col-lg-4:nth-of-type(3n+4),
.col-lg-3:nth-of-type(4n+5),
.col-lg-2:nth-of-type(6n+7),
.col-lg-1:nth-of-type(12n+13) {
clear: both;
}
}
// use .col-nobreak class to deactivate this fix
.col-nobreak {
clear: none !important;
}
First of all we begin with the column type for the smallest resolution (< 768) (col-xs-*). If the row breaks for the several column widths, we set the css property clear to clear: both.
In the next step we reset for the first breakpoint the css property clear with clear: both for all columns, which has a column width for higher resolutions (all columns width additional col-sm-x,col-md-x,col-lg-x) and set the break of one column-row for the col-sm-* type.
And so on...
With the .col-nobreak class you can deactivate the css hack.
You have to fulfill these requirements:
The cols for the parent row container must have the same size
The cols for the parent row must have the same html tag type (div, secion)
Can someone please help me with this problem as i have been dealing with it for a long time now....
I am trying to get 3 divs on the same line next to each other one of the divs looks like this:
<div>
<h2 align="center">San Andreas: Multiplayer</h2>
<div align="center">
<font size="+1">
<em class="heading_description">15 pence per slot</em>
</font>
<img src="http://fhers.com/images/game_servers/sa-mp.jpg" class="alignleft noTopMargin" style="width: 188px; ">
<a href="gfh" class="order-small">
<span>order</span></a>
</div>
and the other two are the same divs please help me get all three divs on the same line one on the right one on the mid and one on the left
I'm surprised that nobody gave CSS table layout as a solution:
.Row {
display: table;
width: 100%; /*Optional*/
table-layout: fixed; /*Optional*/
border-spacing: 10px; /*Optional*/
}
.Column {
display: table-cell;
background-color: red; /*Optional*/
}
<div class="Row">
<div class="Column">C1</div>
<div class="Column">C2</div>
<div class="Column">C3</div>
</div>
Works in IE8+
Check out a JSFiddle Demo
See my code
.float-left {
float:left;
width:300px; // or 33% for equal width independent of parent width
}
<div>
<h2 align="center">San Andreas: Multiplayer</h2>
<div align="center" class="float-left">CONTENT OF COLUMN ONE GOES HERE</div>
<div align="center" class="float-left">CONTENT OF COLUMN TWO GOES HERE</div>
<div align="center" class="float-left">CONTENT OF COLUMN THREE GOES HERE</div>
</div>
I'm not sure how I ended up on this post but since most of the answers are using floats, absolute positioning, and other options which aren't optimal now a days, I figured I'd give a new answer that's more up to date on it's standards (float isn't really kosher anymore).
.parent {
display: flex;
flex-direction:row;
}
.column {
flex: 1 1 0px;
border: 1px solid black;
}
<div class="parent">
<div class="column">Column 1</div>
<div class="column">Column 2<br>Column 2<br>Column 2<br>Column 2<br></div>
<div class="column">Column 3</div>
</div>
here are two samples: http://jsfiddle.net/H5q5h/1/
one uses float:left and a wrapper with overflow:hidden. the wrapper ensures the sibling of the wrapper starts below the wrapper.
the 2nd one uses the more recent display:inline-block and wrapper can be disregarded. but this is not generally supported by older browsers so tread lightly on this one. also, any white space between the items will cause an unnecessary "margin-like" white space on the left and right of the item divs.
Old topic but maybe someone will like it.
fiddle link http://jsfiddle.net/74ShU/
<div class="mainDIV">
<div class="leftDIV"></div>
<div class="middleDIV"></div>
<div class="rightDIV"></div>
</div>
and css
.mainDIV{
position:relative;
background:yellow;
width:100%;
min-width:315px;
}
.leftDIV{
position:absolute;
top:0px;
left:0px;
height:50px;
width:100px;
background:red;
}
.middleDIV{
height:50px;
width:100px;
background:blue;
margin:0px auto;
}
.rightDIV{
position:absolute;
top:0px;
right:0px;
height:50px;
width:100px;
background:green;
}
2019 answer:
Using CSS grid:
.parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
}
Just add float left property on all the divs you want to make appear in a row other than last one. here is example
<div>
<div style="float: left;">A</div>
<div style="float: left;">B</div>
<div>C</div>
</div>
This is easier and gives purpose to the never used unordered/ordered list tags.
In your CSS add:
li{float: left;} //Sets float left property globally for all li tags.
Then add in your HTML:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
Now watch it all line up perfectly! No more arguing over tables vs divs!
Check out the foundation rapid prototyping framework they handled this quite nicely, basically they allow you to use HTML like this:
<div class="row">
<div class="four columns">
</div>
<div class="four columns">
</div>
<div class="four columns">
</div>
</div>
This is the simplest HTML/CSS grid system that I've come across, it's based on 12 column grid.
Basically the columns are given a % width and left margin relative to the parent row. They columns have float set to left, position set to relative, and display set to block.
The row has several properties set on it that care core of an issue that normally causes the containing div to collapse to height of 0 preventing the following divs from getting 'pushed' down as they should.
You can find examples of using the foundation grid system here: http://foundation.zurb.com/docs/grid.php
If you don't want to use the entire framework the following CSS should do the trick with the example code I provided:
.row:after {
content: "";
clear: both;
display: table;
}
.four.column {
float: left;
width: 33%;
}
If you really specifically want a left center and right columns then use code like this:
CSS:
.row:after {
content: "";
clear: both;
display: table;
}
.left {
float: left;
width: 100px;
}
.center {
margin: 0 auto;
width: 100px;
}
.right {
float: right;
width: 100px;
}
HTML:
<div class="row">
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</div>
Put the divisions in 'td' tag. That's it done.
Another possible solution:
<div>
<h2 align="center">
San Andreas: Multiplayer
</h2>
<div align="center">
<font size="+1"><em class="heading_description">15 pence per
slot</em></font> <img src=
"http://fhers.com/images/game_servers/sa-mp.jpg" class=
"alignleft noTopMargin" style="width: 188px;" /> <a href="gfh"
class="order-small"><span>order</span></a>
</div>
</div>
Also helpful as well.
Why don't try to use bootstrap's solutions. They are perfect if you don't want to meddle with tables and floats.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <!--- This line is just linking the bootstrap thingie in the file. The real thing starts below -->
<div class="container">
<div class="row">
<div class="col-sm-4">
One of three columns
</div>
<div class="col-sm-4">
One of three columns
</div>
<div class="col-sm-4">
One of three columns
</div>
</div>
</div>
No meddling with complex CSS, and the best thing is that you can edit the width of the columns by changing the number. You can find more examples at https://getbootstrap.com/docs/4.0/layout/grid/