I am trying to add all of these skills on one bar. The text does not need to show,just want them all to display on the same one instead of four separate
* {box-sizing: border-box}
.container {
width: 100%;
background-color: #ddd;
}
.skills {
text-align: right;
padding-right: 20px;
line-height: 40px;
color: white;
}
.html {width: 10%; background-color: #4CAF50;}
.css {width: 10%; background-color: #2196F3;}
.js {width: 65%; background-color: #f44336;}
.php {width: 60%; background-color: #808080;}
<html>
<head>
<style>
</style>
</head>
<body>
<h1>My Skills</h1>
<p>HTML</p>
<div class="container">
<div class="skills html">10%</div>
</div>
<p>CSS</p>
<div class="container">
<div class="skills css">80%</div>
</div>
<p>JavaScript</p>
<div class="container">
<div class="skills js">65%</div>
</div>
<p>PHP</p>
<div class="container">
<div class="skills php">60%</div>
</div>
</body>
</html>
ones. Because its four, all would need to be 25%
The first thing to know is that divs are block elements, and will take up 100% of their containers (in this case the container div, which is 100% of the <body>). You need to set the display property to display: inline-block. This will allow them to be a set width.
Second, the percentages for the widths need to add up to 100% or less. More than 100%, and they will start to wrap to the next line.
See the code snipet below.
Edit: should also mention that all of your smaller divs need to be in one container, not each in their own container, if you want them to appear together like that.
* {box-sizing: border-box}
.container {
width: 100%;
background-color: #ddd;
}
.skills {
text-align: right;
padding-right: 20px;
line-height: 40px;
color: white;
display: inline-block;
}
.html {width: 10%; background-color: #4CAF50;}
.css {width: 10%; background-color: #2196F3;}
.js {width: 35%; background-color: #f44336;}
.php {width: 30%; background-color: #808080;}
<html>
<head>
<style>
</style>
</head>
<body>
<h1>My Skills</h1>
<div class="container">
<div class="skills html">10%</div>
<div class="skills css">80%</div>
<div class="skills js">65%</div>
<div class="skills php">60%</div>
</div>
</body>
</html>
Related
<!DOCTYPE html>
<html>
<head>
<style>
.d1 {
background-color: lightblue;
display: flex;
overflow: scroll;
padding: 10px;
}
.d2 {
background-color: yellow;
margin: 5px;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
</div>
</body>
</html>
In this simple example I use both padding on the parent div and margin on the child but there is no padding or margin on the far right of the container... How can I solve this problem? Ty
Try this
<!DOCTYPE html>
<html>
<head>
<style>
.d1 {
background-color: lightblue;
display:inline-flex;
overflow: auto;
padding: 10px;
}
.d2 {
background-color: yellow;
margin: 5px;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
</div>
</body>
</html>
I guess you want to keep the lightblue padding when the scroll bar appear. You will have to separate the scroll container and the padding container in order to achieve this.
I suggest you change the HTML into this:
*{
box-sizing: border-box;
}
html,body{
margin: 0;
}
.wrapper{
padding: 10px;
background-color: lightblue;
max-width: 500px;
}
.scroll{
overflow-x: scroll; /* or auto */
display: flex;
}
.content{
background-color: yellow;
margin: 5px;
}
<div class="wrapper">
<div class="scroll">
<div class="content">loremipsumloremipsum</div>
<div class="content">loremipsumloremipsum</div>
<div class="content">loremipsumloremipsum</div>
<div class="content">loremipsumloremipsum</div>
</div>
</div>
You can also check out this CodePen
This image shows what I am trying to do.
Basically, I have a header and footer inside the body. I have a div1 inside a header which has a size that can vary. I want to align div2, which is inside the footer, so that its right border is matches the right border of div1.
The following HTML can explain the structure.
<body>
<div id="header">
<div id="div1">
</div>
</div>
<div id="footer">
<div id="div2">
</div>
</div>
This would be the css.
#div1 {
overflow: auto;
display: grid;
float: start;
}
#div2 {
width: 20px;
// ??????
}
There's no float: start. You just be better off having a common container, as how it is in Bootstrap and other frameworks to "contain" your code. So your page might be rendered well this way:
body {
font-family: 'Segoe UI';
background: #ffa500;
}
#header {
background-color: #fcc;
padding: 10px;
}
#footer {
background-color: #f99;
padding: 10px;
}
.container {
max-width: 65%;
overflow: hidden;
}
#div1 {
padding: 10px;
background-color: #99f;
}
#div2 {
padding: 10px;
background-color: #ccf;
float: right;
width: 50%;
}
<div id="header">
<div class="container">
<div id="div1">
div1
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div id="div2">
div2
</div>
</div>
</div>
Preview
I created space between my bootstrap columns using columns insight columns. However, when I start resizing the window, the distance between the columns gets smaller and disappears eventually, both columns start overlapping ech other. How can I keep the space when resizing using bootstrap? Thanks!!!
http://jsfiddle.net/humotrj0/604/
HTML:
<header id="home">
<div class="container-fluid">
<div class="row center-block home_boxes_row">
<div class="col-sm-4">
<div class="col-xs-12 home_box_left">
<p>teststetsttsgdbdshchdchdchdfvhfvhfvndvhdvvf</p>
</div>
</div>
<div class="col-sm-4">
<div class="col-xs-12 home_box_right"></div>
</div>
<div class="col-sm-4">
</div>
</div>
</div>
</header>
CSS:
#home {
height: 1100px;
background-image: url("https://media-cdn.tripadvisor.com/media/photo-s/0e/85/48/e6/seven-mile-beach-grand.jpg");
background-size: cover;
width: 100%;
.home_boxes_row {
margin-top: 200px;
.home_box_left {
width: 300px;
height: 300px;
background-color: $green;
padding: 5px;
}
.home_box_right {
width: 300px;
height: 300px;
background-color: $blue;
padding: 5px;
}
}
}
Boostrap is built with responsiveness in mind. Thereby, setting the width of the two columns to a pixel width, will in most cases break the layout. The width should rather be left to be handled by bootstrap.
The following snippets should provide you what you seek.
Spacing is achieved by creating a div inside of the columns, and then setting margins. I have added separate classes for this (.spacing_right and .spacing_left).
I have used Bootstrap 4, but it should work with Bootstrap 3 as well.
Note: bootstrap 4 has replaced the col-xs-* with col-*.
#home {
overflow: auto;
height: 1100px;
width: 100%;
background-image: url("https://media-cdn.tripadvisor.com/media/photo-s/0e/85/48/e6/seven-mile-beach-grand.jpg");
background-size: cover;
}
.home_boxes_row {
margin-top: 200px;
}
.home_box_left {
background-color: orange;
margin-top: 5px;
}
.home_box_right {
background-color: red;
margin-top: 5px;
}
.spacing_right {
height: 100%;
margin-right: 25px;
background-color: green;
}
.spacing_left {
height: 100%;
margin-left: 25px;
background-color: green;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<header id="home">
<div class="container-fluid">
<div class="row home_boxes_row">
<div class="col-sm-6 col-6 home_box_left">
<div class="spacing_right">
<p>Test test teasdasdst</p>
</div>
</div>
<div class="col-sm-6 col-6 home_box_right">
<div class="spacing_left">
<p>Test test teasdasdst</p>
</div>
</div>
</div>
</div>
</header>
</body>
</html>
I have a div #1 with a variable width and variable height. Now I want to position a div #2 with fixed width and height next to the right site of #1.
These two divs should be inside another div with width: 100%, because I want to repeat those two divs.
Here is an image (white: div #1, black: div #2):
How would I do that?
I played around with floating
Using a flexbox for the rows. I put the width for the white box as inline CSS because I assume it will be calculated somehow in your code.
.container {
background: lightgreen;
padding: 3em;
}
.row {
display: flex;
height: 4em;
}
.row:not(:last-child) {
margin-bottom: 1em;
}
.flexible {
background: white;
}
.fixed {
background: black;
width: 1em;
}
<div class="container">
<div class="row">
<div class="flexible" style="width:150px"></div>
<div class="fixed"></div>
</div>
<div class="row">
<div class="flexible" style="width:500px"></div>
<div class="fixed"></div>
</div>
<div class="row">
<div class="flexible" style="width:50px"></div>
<div class="fixed"></div>
</div>
</div>
Use flex.
.container {
display: flex;
}
.secondDiv {
width: 200px;
}
You can use this example:
.container{
width: 100%;
}
.div1{
width: <div1 width>;
height: <div1 height>;
float: left;
background-color: white;
}
.div2{
float: left;
width: <div2 width>;
height: <div1 height>;
background-color: black;
}
You should group this two divs (div1 and div2) in another div, inside de container with 100% width:
<div id="container" class="container">
<div id="block1" style="float: left; width: 100%">
<div id="div1" class="div1">
</div>
<div id="div2" class="div2">
</div>
</div>
...
</div>
I have some webpages that do not have much content and the footer sits in the middle of the page, but I want it to be at the bottom.
I have put all my pages in a "holder"
#holder {
min-height: 100%;
position:relative;
}
And then used the following CSS for my footer
ul.footer {
margin-top: 10px;
text-align: center;
}
ul.footer li {
color: #333;
display: inline-block;
}
#footer {
bottom: -50px;
height: 50px;
left: 0;
position: absolute;
right: 0;
}
The html for my footer
<div class="container">
<div class="row">
<div class="span12">
<div id="footer">
<ul class="footer">
<li>Website built by Fishplate</li>
<li>Email:exampleemail#gmail.com</li>
</ul>
</div>
</div>
</div>
</div>
I would like to keep the footer fluid.
just add the class navbar-fixed-bottom to your footer.
<div class="footer navbar-fixed-bottom">
Update for Bootstrap 4 -
as mentioned by Sara Tibbetts - class is fixed-bottom
<div class="footer fixed-bottom">
As discussed in the comments you have based your code on this solution: https://stackoverflow.com/a/8825714/681807
One of the key parts of this solution is to add height: 100% to html, body so the #footer element has a base height to work from - this is missing from your code:
html,body{
height: 100%
}
You will also find that you will run into problems with using bottom: -50px as this will push your content under the fold when there isn't much content. You will have to add margin-bottom: 50px to the last element before the #footer.
Most of the above mentioned solution didn't worked for me. However, below given solution works just fine:
<div class="fixed-bottom">...</div>
Source
http://bootstrapfooter.codeplex.com/
This should solve your problem.
<div id="wrap">
<div id="main" class="container clear-top">
<div class="row">
<div class="span12">
Your content here.
</div>
</div>
</div>
</div>
<footer class="footer" style="background-color:#c2c2c2">
</footer>
CSS:
html,body
{
height:100%;
}
#wrap
{
min-height: 100%;
}
#main
{
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}
.footer
{
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
color:#fff;
}
Here is an example using css3:
CSS:
html, body {
height: 100%;
margin: 0;
}
#wrap {
padding: 10px;
min-height: -webkit-calc(100% - 100px); /* Chrome */
min-height: -moz-calc(100% - 100px); /* Firefox */
min-height: calc(100% - 100px); /* native */
}
.footer {
position: relative;
clear:both;
}
HTML:
<div id="wrap">
<div class="container clear-top">
body content....
</div>
</div>
<footer class="footer">
footer content....
</footer>
fiddle
Use the bootstrap classes to your advantage. navbar-static-bottom leaves it at the bottom.
<div class="navbar-static-bottom" id="footer"></div>
It could be easily achieved with CSS flex.
Having HTML markup as follows:
<html>
<body>
<div class="container"></div>
<div class="footer"></div>
</body>
</html>
Following CSS should be used:
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
body > .container {
flex-grow: 1;
}
Here's CodePen to play with: https://codepen.io/webdevchars/pen/GPBqWZ
I have found a simple solution for this.
For body tag add
<body class="d-flex flex-column min-vh-100">.
On footer tag add class
mt-auto
The entire code looks as follows
<html>
<head> </head>
<body class="d-flex flex-column min-vh-100">
<div class="container-fluid"></div>
<footer class="mt-auto"></footer>
</html>
This is working for bootstrap 4+ and tested till 5 beta 1