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>
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 am trying to place a div which contains a clickable picture on a div which contains a background. However, this keeps happening:
http://gyazo.com/2144dfe91b46898e125787b2f5249542
It goes below the image and I don't understand why.
here is my code:
!DOCTYPE html>
<html>
<head>
<title>SlammedPK</title>
<link rel="shortcut icon" href="dragonclaws.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="style.css">
<style type"text/css">
#title{
height:100%;
width:100%;
display:inline-block;
}
#forum{
height:10%;
width:10%;
background-image:forum.png;
display:block;
}
</style>
</head>
</body>
<div id="container">
<div id="title" style="position:relative" alt="title">
<img src='fulltitle.png' style='width:100%;height:100%' alt='[]' />
</div>
<div id="forum" style="position:absolute" alt="forum">
<IMG SRC="forum.png" ALT="forum">
</div>
</div>
</body>
</html>
if you could help that would be wonderful.
I made this JsFiddle: http://jsfiddle.net/2c7eQ/
Make both #forum and #title are position: absolute
HTML:
<div id="container">
<div id="title">
div1
</div>
<div id="forum">
div2
</div>
</div>
CSS:
#title{
position: absolute;
border: 1px solid;
background-color: blue;
height:100%;
width:100%;
}
#forum{
position: absolute;
left: 100px;
top: 100px;
border: 1px solid;
background-color: green;
height:10%;
width:10%;
}
First off, your format for the background image is incorrect, you need background-image: url(forum.png); and the same thing for #title. I'm not sure why you give it a background image when you also have an img within it though
As for your issue, you need to give #container position:relative; or position:absolute. Absolutely positioned elements have to be a child or a relatively positioned parent
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.
I have two rows in two containers, but I can't figure out how to reduce the bottom and top margin/padding to bring the content closer.
The bottom content is way too far and I would like to bring it closer to the first row/container.
I tried to apply padding and margin to the rows and containers with no luck.
Here's a fiddle of the html below.
<html lang="en">
<head>
<title></title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<ul id="top-nav" class="nav">
<li data-current-nav="Home">Home</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
bottom content
</div>
</div>
</div>
</body>
</html>
Try removing the margin-bottom on ul#top-nav:
#top-nav {
margin-bottom: 0 !important;
}
See the updated jsFiddle for a demonstration > http://jsfiddle.net/6pbPd/1/
You should remove the bottom margin of ul.nav (20px) and the rule applied to the min-height of the container div (30px):
.row-fluid [class*="span"] {
min-height: 20px;
}
#top-nav {
margin-bottom: 0;
}
Demo: http://jsfiddle.net/6pbPd/4/
I have a div that will not stay put, it travels outside of the parent. The div I'm having trouble with is marked "6". It travels outside the parent to the right.
Here is my code.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html{
border:1px solid;
height:99%;
}
body{
height:100%;
margin:0;
padding:0;
}
#pageWrapper{
padding:0;
margin:0;
height:100%;
position:relative;
}
</style>
</head>
<body>
<div id="pageWrapper">
<div style="width:50%;border-right:0px solid;height:100%;float:left;position:relative;">
<div style="width:100%;height:30%;border:1px solid;">1</div>
<div style="width:100%;height:40%;border:1px solid;">2</div>
<div style="width:100%;height:30%;position:absolute;bottom:0;border:1px solid;">3</div>
</div>
<div style="width:50%;border:0px solid;height:100%;float:right;">
<div style="width:100%;height:40%;border:1px solid;">4</div>
<div style="width:100%;height:40%;border:1px solid;">5</div>
<div style="width:100%;height:20%;position:absolute;bottom:0;border:1px solid;">6</div>
</div>
</div>
</body>
</html>
Add position:relative to the parent div or remove position:absolute from the div you marked
Get rid of the position:absolute;bottom:0 on the lower two divs - It's unnecessary and causes your erratic behaviour.