I have this html code where by I have a table inside a div inside a container.
<div class="col-sm-12">
<table class="table table-responsive table-bordered" id="calctable">
....
</table>
<button class="btn btn-suceess"></button>
</div>
I would like to move the button directly on the bottom right of the table similar to this.
I tried multiple ways to get what I wanted, but they dont work properly. I tried to use float-right class to float the button to the right. I tried to use col-sm-offset-11. Didn't work either. Is there a way I can fix this?
There are several ways to achieve what you want, the two examples below use a wrapper around your table and button elements :
.col-sm-12 {
background-color: red;
width: 300px;
padding: 10px;
margin-bottom: 10px;
}
.wrapper { width: 80%; }
table {
background-color: yellow;
height: 20px;
margin-bottom: 10px;
width: 100%;
}
/* With flexbox (don't forget to add vendor prefixes) */
#test-flex .wrapper {
display: flex;
flex-direction: column;
}
#test-flex button { align-self: flex-end; }
/* With float */
#test-float button { float: right; }
.clear { clear: both; }
<!-- With flexbox -->
<div id="test-flex" class="col-sm-12">
<div class="wrapper">
<table></table>
<button>Button</button>
</div>
</div>
<!-- With float -->
<div id="test-float" class="col-sm-12">
<div class="wrapper">
<table></table>
<button>Button</button>
</div>
<div class="clear"></div>
</div>
one of the thousand ways to do this :
<div class="col-sm-12">
<table class="table table-responsive table-bordered" id="calctable">
....
</table>
</div>
<div class="col-sm-12 text-right">
<button class="btn btn-success"></button>
</div>
Related
I am trying to create a layout that will resize properly, regardless of window size, resolution, etc. Here is what I am trying to do:
html, body {
border: 0px;
margin: 0px;
padding: 0px;
height:100%;
}
.container{
height:100%;
display:table;
width: 80%;
}
.row{
display: table-row;
}
#media (min-width: 992px) {
.row .no-float {
display: table-cell;
float: none;
}
}
.col-md-9 {
background: #A28DFF;
height:100%;
}
.navbar {
margin-bottom: 0;
}
</style>
<div class="container">
<div class ="row " style="border:0px solid red;">
<div class=" no-float" style="border:0px solid green; height:1px;">
<!-- code for my nav bar -->
</div>
</div>
<div class="row">
<div class="col-md-9 no-float" style="padding-top:50px">
<!-- code for my content -->
</div>
</div>
</div>
The problem is, though, that it does not resize properly. If the page becomes too small, the toolbar row and the content row split apart and do not resize with one another and do not stay together. Can anyone help with tips on how to make this layout responsive to resizing?
Here is a jsFiddle: https://jsfiddle.net/4qj7a3bh/13/
So we concluded that you are not very experienced with bootstrap so I made this code for you. Here is the example of how to use bootstrap also you should explore their grid system so you can better understand code. Also you should really avoid targeting bootstrap classes directly unless it's absolutely necessary.
<div class="container mainC">
<div id="toolbar" class="row text-center col-md-10 col-md-offset-1">
<h2>Toolbar section</h2>
</div>
<div id="content" class="row text-center col-md-10 col-md-offset-1">
<h2>Content section</h2>
</div>
</div>
#toolbar {
background: cyan;
}
#content {
background: yellow;
}
Here is codepen so you can see code in action:
https://codepen.io/anon/pen/vWaKxZ
ImageI would like to display the page in two columns below the heading and center align the buttons the way it is.
I do not understand if I have missed any divs here?
I have been trying to do it but its not showing up the way i expected.
<div>
<div class="slds-p-top--x-large slds-text-align--center slds-p-bottom_small" width="100%">
<span>Help us improve Customer Support</span>
</div>
<table>
<tr>
<td width="50%" class="divText slds-p-bottom--medium leftBtn" >Tell us what you think<br/>
<div class="slds-text-align--center slds-p-top--small slds-p-bottom--large slds-p-top--medium">
<button class="slds-button slds-button--neutral">
<span class="btn-feedback">Provide feedback</span>
</button>
</div>
</td>
<td width="50%" class="vertical-liness divText slds-p-bottom--medium rightBtn" >Collaborate with our team<br/>
<div class="slds-text-align--center slds-p-top--small slds-p-bottom--large slds-p-top--medium">
<button class="slds-button slds-button--neutral">
<span class="btn-feedback">Get Involved</span>
</button>
</div>
</td>
</tr>
</table>
</div>
.THIS .vertical-liness
{
border-left: 2px solid red;
}
.THIS .leftBtn{
padding-left:115px;
float:right;
}
.THIS .rightBtn{
padding-left:175px;
}
.THIS {
background-color: #f4f7f7; /* ibm-cool-white-3; */
border-top: 1px solid #d0dada; /* ibm-gray-10 */
font-size: 20px;
font-weight: normal;
color: #272727; /* ibm-gray-90 */
}
.THIS .divText{
font-size: 16px;
color: #272727; /* ibm-gray-90 */
}
I simplified your markup to show an example. You can create a couple of flex parents and use their centering properties to recreate this.
.flex {
display: flex;
justify-content: center;
align-items: center;
}
.col {
flex-direction: column;
}
.button {
padding: 0 3em;
text-align: center;
}
.button1 {
border-right: 1px solid #ccc;
}
header {
margin: 0 0 .5em;
}
<div class="flex col">
<header>
Help us improve Customer Support
</header>
<div class="buttons flex">
<div class="button button1">
<div>
Tell us what you think
</div>
<button>Provide feedback</button>
</div>
<div class="button button2">
<div>
Tell us what you think
</div>
<button>Provide feedback</button>
</div>
</div>
</div>
You need to create two divs in your body and place the content inside each of them.
body {
width: 500px;
height: 500px;
}
.left, .right {
float: left;
width: 50%;
height: 100%;
}
.left {
background-color: red;
}
.right {
background-color: blue;
}
<div class="left">
<p>Left column</p>
</div>
<div class="right">
<p>Right column</p>
</div>
https://codepen.io/anon/pen/QgLKzQ
float: left; with width: 50%; is the key here.
Be careful that you need either content inside your div like the below example, either give them an height (eg. CSS: .left-float { height: 500px; }
Be careful either that floating elements will break the flow.
You will need to clear float with the next elements:
https://css-tricks.com/almanac/properties/c/clear/
CSS :
.left-float {
width:50%;
float:left;
}
HTML :
<div>
<div class="left-float" style="background-color:green;">
left div
</div>
<div class="left-float" style="background-color:red;">
right div
</div>
</div>
So, with your code... Ugh, put me off this <table> element please !
They are designed to display tabular data and not to provide a way of positioning elements. In your case you do not display tabular data.
An example of how it could be :
https://jsfiddle.net/12fd30bf/
HTML:
<div>
<div class="slds-p-top--x-large slds-text-align--center slds-p-bottom_small" width="100%">
<span>Help us improve Customer Support</span>
</div>
<div class="left-float">
Tell us what you think<br/>
<div class="slds-text-align--center slds-p-top--small slds-p-bottom--large slds-p-top--medium">
<button class="slds-button slds-button--neutral">
<span class="btn-feedback">Provide feedback</span>
</button>
</div>
</div>
<div class="left-float">
Collaborate with our team<br/>
<div class="slds-text-align--center slds-p-top--small slds-p-bottom--large slds-p-top--medium">
<button class="slds-button slds-button--neutral">
<span class="btn-feedback">Get Involved</span>
</button>
</div>
</div>
</div>
CSS :
.left-float {
width:50%;
float:left;
}
I have a div in the following format
<div id="main">
<div id="row1">
<div id="label1"></div>
<div id="value1"></div>
</div>
<div id="row2">
<div id="labe2"></div>
<div id="value2"></div>
</div>
<div id="row3">
<div id="label3"></div>
<div id="value3"></div>
</div>
</div>
I am trying to achieve a layout, where all the values are aligned on top of each other to the right and labels to the left within each row.
I have tried using float:left and float:right like
css
#row1{
display: inline
}
#value1{
float:right
}
#row2{
display: inline
}
#value2{
float:right
}
#row3{
display: inline
}
#value3{
float:right
}
But, this css i tried is missing the layout and row items are colliding into each other. Can someone help what could be the issue?
If you are familiar with how a HTML table works, then you can use display:table-* properties. Btw, use class instead of id. Use id specifically for things such as DOM manipulation or forms. Do not use id for styling unless you have no other choice.
SNIPPET
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>inline</title>
<style>
#main {
border: 5px dotted grey;
display: table;
width: 300px;
}
.row {
display: table-row;
}
.value {
border: 1px solid red;
display: table-cell;
width: 50%;
}
label {
border: 1px solid blue;
display: table-cell;
}
</style>
</head>
<body>
<main id="main">
<div class='row' id="row1">
<label for='value1'>V1</label>
<div id="value1" class='value'>44</div>
</div>
<div class='row' id="row2">
<label for='value2'>V2</label>
<div id="value2" class='value'>ALPHA</div>
</div>
<div class='row' id="row3">
<label for='value3'>V3</label>
<div id="value3" class='value'>💀</div>
</div>
</main>
</body>
</html>
If I've understood your question right you want to have labels on the left and values on the right just in front of their labels.
Here is example for you http://codepen.io/g1un/pen/PGKEwB
Add to your rows class row and to labels class label and apply the next css to it:
.row::after {
clear: both;
display: table;
content: '';
}
.label {
float: left;
}
And don't apply to your rows display: inline; - it just does harm to your code.
Here's my solution - rather simple, replaced your whole CSS (i.e. no other CSS):
* {
box-sizing: border-box;
margin: 0;
}
div {
border: 1px dotted #fa5;
}
#main > div > div {
display: inline-block;
width: 49.8%;
padding: 10px;
}
Codepen: http://codepen.io/anon/pen/GjvykB
Change the width value to any desired setting < 50%
P.S.: border isn't necessary, used only to visualize the elements, th very last padding also isn't necessary
If you don't need to support older IE browsers, go with flexbox
Side note: Don't use id like that, use class
.main > div {
display: flex;
}
.main > div > div {
margin: 0 10px;
}
<div class="main">
<div class="row1">
<div class="label1">1</div>
<div class="value1">One</div>
</div>
<div class="row2">
<div class="label2">2</div>
<div class="value2">Two</div>
</div>
<div class="row3">
<div class="label3">3</div>
<div class="value3">Three</div>
</div>
</div>
on my opinion - try display: inline-block; I will hope it help you.
Looking through some documentation, it looks like you an try using position for left and right alignment. I would suggest trying out something like in the documentation:
.right {
position: absolute;
right: 0px;
width: 300px;
}
I'm trying to make the following pattern in HTML:
CellA CellB
CellC
CellD CellE
CellF
I'm trying to use a mixture of divs and spans to do this. I make CellC inside of a div since browsers always place line breaks before and after the div (Source). I also give this div the CSS property float: right so that it will appear to the right (like shown above). Making it float right is working, but I think by doing this I'm removing the default property of the div, which I believe is display: block, which puts in the line breaks. Even if I add this property in manually, it has no affect.
Here is the code I'm trying out (Along with a fiddle):
HTML
<div>CellA
<span class="floatRight">CellB</span>
</div>
<div class="both">
CellC
</div>
<div>CellD
<span class="floatRight">CellE</span>
</div>
<div class="both">
CellF
</div>
CSS
.floatRight { float:right;}
.both {float: right; display: block;}
The code above will cause my output to look like this:
CellA CellB
CellD CellECellC
CellF
Add following style to both class
.both {
float: right;
display: block;
width: 100%;
text-align: right;
}
Adding another solution to your problem, you can use flexbox to do this.
Try this:
html:
<div class="flex-container">
<div class="item">CellA</div>
<div class="item">CellB</div>
<div class="item">CellC</div>
<div class="item">CellD</div>
<div class="item">CellE</div>
<div class="item">CellF</div>
</div>
css:
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
.item:nth-child(3n) {
width: 100%;
text-align: right;
color: red;
}
Demo
But if you can't use flexbox, the #Jaspreet Singh answers its correct.
If you can change the HTML structure, then this approach will be easy for you:
HTML
<div class="clearfix">
<div class="left">
Cell A
</div>
<div class="right">
<div>
Cell B
</div>
<div>
Cell C
</div>
</div>
</div>
<div class="clearfix">
<div class="left">
Cell D
</div>
<div class="right">
<div>
Cell E
</div>
<div>
Cell F
</div>
</div>
</div>
CSS:
.right {
float: right;
}
.left {
float: left;
}
.clearfix:after {
content: "";
clear: both;
display: block
}
Demo: https://jsfiddle.net/j0eqtzn2/2/
Why are you using float? If there is no "good" reason to use float, because float removes the element from the flow of the design.
Try using display inline-block instead.
<html>
<head>
<title>foo</title>
<style>
.left {
width: 45%;
display: inline-block;
background-color: #0ff;
}
.right {
width: 45%;
display: inline-block;
background-color: #f00;
}
</style>
</head>
<body>
<div>
<div class="left">CellA</div> <div class="right">CellB</div>
<div class="left"></div> <div class="right">CellC</div>
<div class="left">CellD</div> <div class="right">CellE</div>
<div class="left"></div> <div class="right">CellF</div>
</div>
</body>
</html>
if you use DL here instead of DIV then it will be easy for you. because it's look like title and description
Here is the demo
[check demo here][1]
[1]: https://jsfiddle.net/j0eqtzn2/6/
I am using bootstrap and I have two container inside a bootstrap container. Like this:
<div class="container">
<div id="container-map">
aasdasd
</div>
<div id="container-buttons">
asdasda
</div>
</div>
What I am trying to do is center the two divs, #container-map and #container-buttons side by side, inside the main container.
This is my custom CSS for the two divs:
#container-map,
#container-buttons {
display: inline-block;
margin: 0 auto 0 auto;
width: 500px;
height: 500px;
}
Is there a reason you don't want to use the bootstraps built in gridsystem? Something like this?
<div class="container">
<div class="row">
<div class="col-md-3 col-md-offset-3">
<div class="container-map">
asdf
</div>
</div>
<div class="col-md-3">
<div class="container-buttons">
asdf
</div>
</div>
</div>
</div>
Just change your CSS to this
#container-map,
#container-buttons {
float: left;
margin-left: auto;
}
Both containers will be centered and side by side
You can try the code from this example (using text-align: center; on .container display:inline-block; for divs).
<style>
.container {
position:relative;
text-align:center;
}
#dv1, #dv2 {
display:inline-block;
width:100px;
margin:0 3px;
background:#33f;
}
</style>
<div class="container">
<div id="dv1">Div 1</div>
<div id="dv2">Div 2</div>
</div>
you make both your divs to take equal height using flex. You can refer the link to find out the browsers which support it. Have a look at this:
.container {
display: flex;
width: 400px;
background: #eee;
}
.column {
flex: 1;
background: #fff;
border: 1px solid #ccc;
margin: 1px;
}
<div class="container">
<div class="column">
<p>aasdasd</p>
</div>
<div class="column">
<p>asdasda</p>
<p>asdasda</p>
</div>
</div>