I have content and sidebar:
.border {
border: 1px solid black;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-md-7 col-lg-9 border">
<div class="content">
.....
</div>
</div>
<div class="col-md-5 col-lg-3 border position-relative">
<div class="position-fixed border" style=" width: inherit;">
....
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
In this example width of element position-fixed is not inherit of parent element. Why? I need get inherit width of parent element. If I set width: 20% then width is working on position fixed, but why width inherit is not working?
It's working fine but you need to note that position:fixed has its width relative to the viewport. So if you set 20% to the parent, the fixed element will inherit 20% and will not inherit the calculated pixel value of its parent element width.
So both element will have 20% but not both of them have the same reference for the percentage (i.e. not both of them have the same containing block)
The inherit CSS keyword causes the element for which it is specified to take the computed value of the property from its parent element. ref
... However, for some properties (those where percentages are relative to something that may require layout to determine, such as width, margin-right, text-indent, and top), percentage-specified values turn into percentage-computed values. ref
Here is a basic example to illustrate:
.box {
border:2px solid red;
min-height:50px;
width:100%;
}
.box > div {
position:fixed;
width:inherit;
min-height:50px;
border:2px solid green;
left:0;
}
body {
padding:0 100px;
}
<div class="box">
<div></div>
</div>
In the below example, both element are having width:100%. The fixed element is having 100% width of the viewport while the static element is having 100% of the body width minus padding.
The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element. The containing block of an element is defined as follows:
...
For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest block container ancestor box.
If the element has 'position: fixed', the containing block is established by the viewport in the case of continuous media or the page area in the case of paged media. ref
Another thing to note is that you are not setting any left value in your code which is confusing and will make your think the width of the fixed element isn't correct but you are simply having an overflow.
Here is the pervious code without left:
.box {
border:2px solid red;
min-height:50px;
width:100%;
}
.box > div {
position:fixed;
width:inherit;
min-height:50px;
border:2px solid green;
}
body {
padding-left:100px;
}
<div class="box">
<div></div>
</div>
We may think that the fixed element has the same width as the static one, but no. The fixed element is overflowing.
Related: Why aren't my absolutely-positioned elements located where I expect?
for me i calculate percent of wanted col to be fixed then set it to css by width percent
for example if want fixed element to be col-md-2
this meaning you will set width in css to 2/12 = 16% !important; like this
.fixedelement{width:16% !important;}
Related
The padding on the div in the following snippet only pads it vertically:
.col-sm-2 {
background: pink;
padding: 100px;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-2"></div>
</div>
</div>
This is because Bootstrap's has .row > * applying padding-left and padding-right.
However, overriding the padding with !important only takes effect starting from a certain point (which seems to be padding: 45px in this case), so that setting it to less than that doesn't work horizontally:
.col-sm-2-a {
background: pink;
padding: 30px !important;
}
.col-sm-2-b {
background: pink;
padding: 40px !important;
}
.col-sm-2-c {
background: pink;
padding: 50px !important;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-2 col-sm-2-a"></div>
</div>
<br />
<div class="row">
<div class="col-sm-2 col-sm-2-b"></div>
</div>
<br />
<div class="row">
<div class="col-sm-2 col-sm-2-c"></div>
</div>
</div>
And here it is animated:
.col-sm-2 {
background: pink;
animation: myanim 10s infinite;
}
#keyframes myanim {
50% {
padding: 100px;
}
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-2"></div>
</div>
</div>
Question: What makes the padding not work both vertically and horizontally until a certain point, and what changes from that point that allows the padding to work horizontally?
In the snippet, the width of the row is 540px, thus the width of a col-sm-2 is 2 / 12 * 540 = 90px. The corresponding rule :
#media (min-width: 576px)
.col-sm-2 {
flex: 0 0 auto;
width: 16.66666667%;
}
But we also have this rule declaration setting the box-sizing property of all elements to border-box :
*, ::after, ::before {
box-sizing: border-box;
}
With box-sizing: border-box; :
The dimensions of the elements are calculated as: width = border +
padding + width of the content, and height = border + padding + height
of the content.
In this example we have no border, only padding and width/height. The width of ~16.7% will be applied to the border-box of the element.
With a padding set to 30px, the width of the element is 30 (padding-left) + 30 (padding-right) + the missing pixels to reach 16.7% (30).
When set to 45px, the width is 45 + 45 + 0.
According to the documentation :
The content box can't be negative and is floored to 0, making it
impossible to use border-box to make the element disappear.
That is why with a padding of 50px, the total width is 100px (50 + 50 + 0) and not 90px (50 + 50 - 10).
Consequently, the width of the element can go beyond 90px only when the padding is set to more than 45px (more precisely if padding-left + padding-right > 90px).
In relation to the answer of #onkar ruikar please have in mind that when you are using an external library such as Bootstrap in your case, the overwriting of styles might not work even with !important due to the priority of rules.
In many cases, such libraries generate really specific rulesets for their elements.
Your options for overwriting them are either be MORE specific than them (which doesn't always work) or use !important as you have tried.
The reason that #onkar ruikar's answer works - putting the your styles in the head is because when browsers are reading multiple !important rules for any given style, they cannot know what to prioritize and they "give up" after the fist one and apply it.
In your first code snippet you've mentioned that 100px pads only vertically. Then you've used !important in next snippet. So I think you are using important because 100px padding didn't have any effect in first code snippet. And you didn't put link to bootstrap css intentionally in the body instead of putting it in head section before your own style tag. If that is not the case then ignore following suggestion.
Order where you put CSS rules does matter. If you put the links in head section, before your own styles, then 100px padding will work.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
.col-sm-2 {
background: pink;
padding: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-2"></div>
</div>
</div>
</body>
</html>
As for why 45px is the turning point. As #tom suggested the element has 90px width. And as you keep on adding padding it eats into width till width becomes 0. After that the element starts growing to accommodate padding.
<!DOCTYPE html>
<html>
<head>
<style>
.one {
background: pink;
height: 100px;
padding: 0px !important;
}
.two {
background: wheat;
height: 100px;
padding: 46px !important;
}
</style>
</head>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<body>
<div class="container">
<div class="row">
<div class="col-sm-2 one"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-2 two"></div>
</div>
</div>
</body>
</html>
First dive has 0 padding thus it has full width 90px:
Second div has 46 padding thus it has no width left:
#MRadev has made a good suggestion. You should try to stick to the library/framework/toolkit you are using.
Following is the same first code snippet in OP trying to use as many bootstrap classes as possible.
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<body>
<!-- using available bootsrap classes-->
<div class="container">
<div class="row">
<div class="col-sm-2 bg-danger p-5"></div>
</div>
</div>
<!-- extending with specific classes -->
<style>
.p-100 {
padding: 100px !important;
}
.bg-pink {
background-color: pink !important;
}
</style>
<div class="container">
<div class="row">
<div class="col-sm-2 bg-pink p-100"></div>
</div>
</div>
This discussion will help you add more spacing options: https://stackoverflow.com/a/46125059/15273968
https://getbootstrap.com/docs/4.6/utilities/spacing/
https://getbootstrap.com/docs/4.6/utilities/colors/
I have a simple tag with a banner and a border at the bottom. How can I stop sliding these two elements on zooming? I was looking for a way to get the two elements intact on zoom in and out. Even after a few hours of search, i couldn't get the desired output. I tried this and one more post which says to change from px to em.
My html tag:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<div id="header">
<img class="logo" src="./style/logo.jpg" width= 895 height= 160">
</div>
<div id="container-border">
</div>
</body>
css:
#header
{ padding:0 20px;
display:block;
margin:0 auto;
background: #D6D6D6 url(background.jpg) repeat-x;
height: 205px;
width: 1500px;
position: center;
}
#container-border {
width: 1538px;
height:900px;
margin-left:260px;
border-color: black;
border-width: 1px;
border-style: solid;
}
You first need to wrap the content in a containing DIV
HTML
<div class="site-content">
<div id="header">
<img class="logo" src="./style/logo.jpg" width= 895 height="160">
</div>
<div id="container-border">
</div>
</div>
Note the new DIV .site-content. This is where you would center the website content and control the website contents width.
Here's my codepen: https://codepen.io/arlcode/pen/aRpWZo
I would also recommend not using static width/height for mobile dynamic purpose. You're also going to want to use classes more then ID's because ID's are specific but classes allow you to manipulate multiple DIVs at once.
I have a row with a certain height (e.g. 600px) and would like fit an img (size 1920x1080) into this row, stretching responsively 100% to the row width but not exceeding the height.
In other words, only 600px of the height of the image should be shown (the rest can be cut off, hidden, etc.), and it should remain responsive to the row width. To illustrate, only the part within the red borders should show:
The problem I am having is that "img-fluid" always fits the image to the smaller height of the container, and thus shrinking the width to keep the aspect ratio. Without img-fluid, or adding a fixed height to the image, the aspect ratio gets lost and the image is "squeezed" into the row-container. My code:
.img-400 {
height: 400px !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="container">
<div class="row img-400">
<div class="col-12">
<img src="https://image.ibb.co/iG8OSb/dogs.jpg" class="img-fluid" />
</div>
</div>
</div>
Note I tried this one: Constraining image height with bootstrap responsive image? but didn't work, it keeps scaling the img out of the container.
the above solution works if the .img-fluid is not manipulated:
.img-400 {
height: 400px;
overflow: hidden;
}
Hi try this one,
.img-400 img{ width: 100% ; }
Hope this helps :)
To achieve your image fitting into a specific height, you can use the open source library bootstrap-spacer via NPM
npm install uniformimages
or you can visit the github page:
https://github.com/chigozieorunta/uniformimages
Here's an example of how this works using the "unim" class (you'd require jQuery for this):
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="uniformimages.css" rel="stylesheet" type="text/css"/>
<script src="uniformimages.js" type="text/javascript"></script>
</head>
<body>
<section>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<a href="product1.html">
<img src="image1.jpg" class="unim" height="100"/>
</a>
</div>
</div>
</div>
</section>
</body>
I need to put my span inside a div,but because the content of div is more, it is overflown out of the border of the parent div.
How to solve it?
My outer div should be flexible because the contents in span is dynamic.
Here is the plunker link = DEMO
.outerDiv {
width: 100%;
border: 2px solid black;
}
.div40 {
width: 40%;
}
.div60 {
width: 60%;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div class="outerDiv">
<span class="div40">
hello
</span>
<span class="div60">
hello i am trying to insert this content inside the parent div,but i am not able to do so. My content should be inside the border of this div and i want the height not to be fixed as my content is dynamic.
</span>
</div>
</body>
</html>
You need to add a new element after div60
<div class ="outerDiv">
<span class = "div40">
hello
</span>
<span class = "div60">
hello i am trying to insert this content inside the parent div,but i am not able to do so. My content should be inside the border of this div and i want the height not to be fixed as my content is dynamic.
</span>
<div class="clear"></div>
</div>
and add the following in your CSS
.clear {
clear: both
}
set the outerDiv to display: inline-block
/* Styles go here */
.outerDiv
{
width:100%;
border:2px solid black;
display: inline-block;
}
.div40
{
width:40%;
}
.div60
{
width:60%;
float:right;
}
<h1>Hello Plunker!</h1>
<div class ="outerDiv">
<span class = "div40">
hello
</span>
<span class = "div60">
hello i am trying to insert this content inside the parent div,but i am not able to do so. My content should be inside the border of this div and i want the height not to be fixed as my content is dynamic.
</span>
</div>
By adding display inline block to outer div class you can achieve it.
/* Styles go here */
.outerDiv
{
width:100%;
border:2px solid black;
display:inline-block;
}
.div40
{
width:40%;
}
.div60
{
width:60%;
float:right;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<style>.outerDiv span{}</style></style>
<h1>Hello Plunker!</h1>
<div class ="outerDiv">
<span class = "div40">
hello
</span>
<span class = "div60">
hello i am trying to insert this content inside the parent div,but i am not able to do so. My content should be inside the border of this div and i want the height not to be fixed as my content is dynamic.
</span>
</div>
</body>
</html>
Move to fluid content... bootstrap.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
</head>
<body>
<h1>Hello Plunker!</h1>
<div class="container">
<div class="row">
<div class="col-md-4">
hello
</div>
<div class="col-md-8">
hello i am trying to insert this content inside the parent div,but i am not able to do so. My content should be inside the border of this div and i want the height not to be fixed as my content is dynamic.
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script src="https://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
</html>
I'm trying to make a website with Twitter Bootstrap, that is basically a single, vertically centered column on top of a background container div (so I can color / image the background on the edges).
I keep having this issue where I can get the background div to fill the enter screen, but the centered column div sets its height to the size of the content. I want it to always, at least, be as tall as the screen size. I thought min-height would do this, but it does not.
Here's what it looks like right now: (it's just a test page for the layout)
Here is the code for it:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Baileysaurus -- Dinosaurs && Logic in your face!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<LINK href="header.css" rel="stylesheet" type="text/css">
<LINK href="forum.css" rel="stylesheet" type="text/css">
<!-- jQuery (Bootstrap requires jQuery!) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- Bootstrap -->
<LINK href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"
media="screen">
<!-- A file of PHP utility functions -->
<?php
include 'functions.php';
?>
</head>
<body>
<!-- Bootstrap -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<div id='background' class='row-fluid'>
<div class='span12'>
<div id='site-column' class='row-fluid span10 offset1 column-wrap'>
<img src="/PipeDog.jpg" alt="ARGUMENT INVALID" />
<hr>
<p>
Put a blog here!
</p>
</div> <!-- END of outermost span12 div -->
</div> <!-- END - "site-column" div -->
</div> <!-- END - "background" div -->
</body>
</html>
CSS
html, body
{
height: 100%;
margin: 0;
}
#background
{
position: absolute;
top:0;
bottom: 0;
min-height: 100%;
min-width: 100%;
background-color: Gainsboro;
}
#site-column
{
top: 0;
bottom: 0;
min-height: 100%;
border-left: 2px solid;
border-right: 2px solid;
background-color: white;
}
.column-wrap
{
overflow: hidden;
}
I'm trying to get the white column in that photo to stretch to the bottom of the screen, at least, even if the content is not that long.
Anyone have any ideas on what I'm missing?
You should also be able to add the following CSS:
.span12 {
height:100%;
}
Try to make your outer <div> to extend to the bottom of the page.
So try this in the css:
.row-fluid
{
position:absolute;
bottom:0;
}
And I'm not sure but you may have to move your
<script src="bootstrap/js/bootstrap.min.js"></script>
line to the <head> part of your page.