I have a div container of width and height 420px inside that container i have 4 small div's with width 140px and height 140px but 2nd divs height is 170px.if i apply css float property float:left to all the divs except container div.
Q1).where will the 4th div sit.
Q2).if i want the 4th div to come below 1st div how can i do it without using position:absolute or relative.
<div class="container">
<div class="section1"></div>
<div class="section2"></div>
<div class="section3" ></div>
<div class="section4"></div>
</div>
css
.container{width:420px;height:420px;border:1px solid black;}
.section1{width:140px;height:140px;background-color:green;float:left;}
.section2{width:140px;height:170px;background-color:yellow;float:left;}
.section3{width:140px;height:140px;background-color:red;float:left;}
.section4{width:140px;height:140px;background-color:orange;float:left;}
Here is the link for my code JSFiddle
Define your .section4{clear:left;}
Demo
.container{width:420px;height:420px;border:1px solid black;}
.section1{width:140px;height:140px;background-color:green;float:left;}
.section2{width:140px;height:170px;background-color:yellow;float:left;}
.section3{width:140px;height:140px;background-color:red;float:left;}
.section4{width:140px;height:140px;background-color:orange;float:left;}
.section4{clear:left;}
<div class="container">
<div class="section1"></div>
<div class="section2"></div>
<div class="section3" ></div>
<div class="section4"></div>
</div>
2nd option your can try to display:inline-block as like this
.container{width:420px;height:420px;border:1px solid black;font-size:0;}
.section1{width:140px;height:140px;background-color:green;display:inline-block;vertical-align:top;font-size:12px;}
.section2{width:140px;height:170px;background-color:yellow;display:inline-block;vertical-align:top;font-size:12px;}
.section3{width:140px;height:140px;background-color:red;display:inline-block;vertical-align:top;font-size:12px;}
.section4{width:140px;height:140px;background-color:orange;display:inline-block;vertical-align:top;font-size:12px;}
<div class="container">
<div class="section1"></div>
<div class="section2"></div>
<div class="section3" ></div>
<div class="section4"></div>
</div>
Add clear: both to your 4th div:
https://jsfiddle.net/8kyed4fx/1/
Related
I am trying to make sticky div inside div col-md-3 , it working fine if I don't use col-md-3 class, please tell what I am doing wrong,
.sticky {
position: sticky;
top: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class=" col-3">
<div class="sticky" style="border:1px solid; color:red">sticky</div>
</div>
<div class="col-9" style="height:1000px; border:1px solid; background:red">
</div>
</div>
The sticky position is happening due to parent div (.col-3) because it have display flex property with this it's getting height equal to the div (col-9).
In short:
<div style="display: flex;">
<div class="1"></div>
<div class="2" style="height="500px;"></div>
</div>
Now in above HTML the div class 1 also get the height = div class 2 (500px).
Any element(position:sticky) inside div class 1 is sticky for next 500px.
If any element is sticky then it also has same defined parent height.
How to create an element in the Bootstrap that will normally equalize on one side (form left side) and 100% of the width on the other?
.maksymalnaszerokosc {
max-width: 1170px;
margin-left: auto;
margin-right: auto;
}
<div class="container-fluid">
<div class="row maksymalnaszerokosc">
<div class="col-sm-6">text 1</div>
<div class="col-sm-6">text 2 </div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">nice same line text 1</div>
<div class="col-sm-6">Full width to right</div>
</div>
</div>
See this image how to must work
First, you must add class to that "full width to the right" column div, and then give it a position:absolute; right:0%; in the css,
Bootply: http://www.bootply.com/ukGiye0V6Y
Hope that helps, Cheerio!
<div style="border-style:solid; margin:auto;">
<div style="position:absolute;">
<div style="background:yellow; border-style:dotted; height:300px; width:300px">
<h3>THIS IS THE BODY, AND HEIGHT WILL BE CHANGED DYNAMICALLY</h1>
</div>
</div>
<img src="https://www.google.ca/logos/doodles/2016/lunar-new-year-2016-5134827118395392-hp.jpg">
</div>
<div style="border-style:solid">
<h2> THIS IS THE FOOTER</h1>
</div>
I'm trying to put a div over the image, how let the floating div to occupy the space, so the footer div will be pushed accordingly.
I'm not sure what you're asking. Do you wish to have the yellow div take up only the amount of space of the div behind it (with the Google Doodle)? Or do you want the reverse, that is, you want the footer height to automatically adjust to the yellow div height?
I am not sure I completely understand. Do you mean to make the div containing the image to have a minimum height? You can use the min-height property then as follows:
<div style="border-style:solid; margin:auto;min-height:80%">
<div style="position:absolute;">
<div style="background:yellow; border-style:dotted; height:300px; width:300px">
<h3>THIS IS THE BODY, AND HEIGHT WILL BE CHANGED DYNAMICALLY</h1>
</div>
</div>
<img src="https://www.google.ca/logos/doodles/2016/lunar-new-year-2016-5134827118395392-hp.jpg">
</div>
<div style="border-style:solid">
<h2> THIS IS THE FOOTER</h1>
</div>
-- Edit: If you are looking for some kind of a background-image in a div container you can control you can do something like this:
<html>
<head>
</head>
<body>
<div style="border-style:solid; margin:auto">
<div div style="background-image:url('https://www.google.ca/logos/doodles/2016/lunar-new-year-2016-5134827118395392-hp.jpg'); background-repeat: no-repeat;" >
<div style="border-style:dotted; height:400px; width:600px">
</div>
</div>
</div>
<div style="border-style:solid">
<h2> THIS IS THE FOOTER</h1>
</div>
</body>
</html>
I am trying to make the <div> with class col-md-6 to be always positioned in the right end of the row even while scrolling horizontally.Here is an illustration.
<div class="row">
<div id="div1" class="col-md-6">.col-md-6</div>
<div id="div2" class="col-md-6">.col-md-6</div>
</div>
<div class="test">LARGER DIV
</div>
When we scroll horizontally i want div2 to remain in the last 6 columns of the window Which is not happening.The div itself is going out of the view.
Can you please specify or give some references to achieve this?I'm using Bootstrap-v3.3.0
You can set the second div to absolute position, and make it keeps the right always at the border of the screen using some jQuery.
CSS:
[class*="col-"] {
background: #F2FAFF;
border: 0px solid #B1D8ED;
display:inline-block;
}
.test{
width:2000px;
background: #F2F79F;
border: 0px solid #B1D8ED;
}
#fixed{
position:absolute;
}
HTML:
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div id="fixed" class="col-md-6">.col-md-6</div>
</div>
<div class="test">
LARGER DIV
</div>
Javascript:
$(window).scroll(function(){
$('#fixed').css('right', $(this).scrollLeft() * -1);
});
Example:
http://www.bootply.com/yeKqMVA91r
Why not just wrap the larger div in a scrollable element like so:
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
<div class="row">
<div class="col-md-12" style="overflow:scroll;">
<div class="test">LARGER DIV</div>
</div>
</div>
I'm trying to create two floating divs inside of another:
<div style="width:100%;height:500px;position:relative;top:15px;">
<div style="position:relative;float:left;width:58%;height:100%;left:10px;">
<div id="borderdiv" style="position:relative;width:92%;top:20px;bottom:20px;left:20px;border:1px solid #000;background-color:gray;">
<div style="height:30px;text-align:center;position:relative; "><h2>welcome</h2></div>
<div style="position:relative;width:25%;background-color:green;float:left;">floating div1</div>
<div style="position:relative;width:25%;background-color:red;float:left;">floating div2</div>
</div>
</div>
</div>
The problem is the floating div1 and div2 are outside the border of the div with id "borderdiv". What am I doing incorrectly?
Floated elements have no height, so #borderdiv does not expand to contain them.
You can use a clearing element to correct this:
<div style="position:relative;width:25%;background-color:red;float:left;">floating div2</div>
<div style="clear: both" />
Demo on JSFiddle.net
Since your question was not very specific, then my answer is very simple. This simply puts the div1 and div2 inside the borderdiv:
<div style="width:100%;height:500px;position:relative;top:15px;">
<div style="position:relative;float:left;width:58%;height:100%;left:10px;">
<div id="borderdiv" style="position:relative;width:92%;top:20px;bottom:20px;left:20px;border:1px solid #000;background-color:gray;">
<div style="position:relative;width:25%;background-color:green;float:left;">floating div1</div>
<div style="position:relative;width:25%;background-color:red;float:left;">floating div2</div>
<div style="height:30px;text-align:center;position:relative;"><h2>welcome</h2></div>
</div>
</div>
</div>