<div style="width: 800px;border:1px solid black">
<div style="width:100px;height:100px;float:left;border:1px solid black"></div>
<div style="float:left">ssdfsdfsdfsdgfag25w6a4g8w5614w5sge16dgf45d4sdffffffffffffffffffffffffffffffffffffffffffffffffffffff5s4f64s6f456a46f456a456456456f456we4f54we5gf45456v4sd5646sadf54s56f465as4f564as56f</div>
<div style="clear:both"></div>
</div>
It end up like this:
how to fix it
put a width on the 2nd child div. you will also need to put a space in that string as it cannot wrap it across lines.
<div style="width: 800px;border:1px solid black">
<div style="width:100px;height:100px;float:left;border:1px solid black"></div>
<div style="float:left; width: 100px">ssdfsdfsdfsdgfag25w6a4g8w5614w5sge16dgf45d4sdffffffffffffffffffffffffffffffffffffffffffffffffffffff5s4f64s6f456a46f456a456456456f456we4f54we5gf45456v4sd5646sadf54s56f465as4f564as56f</div>
<div style="clear:both"></div>
</div>
Set height to 100 to for main div
Related
I am using Bootstrap v5 and would like to get a grid layout, where one column has position:fixed so that it scrolls with the very long column left to it.
The issue is the following:
Whenever the height of the first row gets too large such that the second row (with the position:fixed column) moves out of the viewport, then also the column ("Some sample content") disappears. For smaller heights, it works as expected.
The example code is:
<div class="container">
<div class="row mt-5">
<div class="col-md-8" style="min-height:200px; border: 1px solid red">
</div>
<div class="col-md-4">
Box1
</div>
</div>
<div class="row mt-3">
<div class="col-md-8" style="min-height:4000px; border: 1px solid red">
</div>
<div class="col-md-4">
<div style="position:fixed">
Some sample content
</div>
</div>
</div>
<div class="row">
<div class="col-md-8" style="min-height:500px; border: 1px solid red">
</div>
<div class="col-md-4">
Box End
</div>
</div>
You can find an example at: https://jsfiddle.net/4cma32k9/1/
Do you have any ideas to resolve it?
Best,
Tom
Use sticky position:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" >
<div class="container">
<div class="row mt-5">
<div class="col-md-8" style="min-height:200px; border: 1px solid red">
</div>
<div class="col-md-4">
Box1
</div>
</div>
<div class="row mt-3">
<div class="col-md-8" style="min-height:4000px; border: 1px solid red">
</div>
<div class="col-md-4">
<div class="sticky-top">
Some sample content
</div>
</div>
</div>
<div class="row">
<div class="col-md-8" style="min-height:500px; border: 1px solid red">
</div>
<div class="col-md-4">
Box End
</div>
</div>
</div>
When I try to fix problem in JSFiddle i just add border and i see already your
Some sample Content
text is positioned by viewport whatever you do. In this point your result is what you want with large screen?
<div class="col-md-4" style="border:1px solid green;" >
<div style="position:fixed; border:1px solid gold;">
Some sample content
</div>
</div>
position:fixed similarty position:absolute both abolute and fixed
take the defined element out of the normal flow. Depends on the relatively positioned parent element.
Maybe some bootstrap problem occurs. Try to figure out without bootstrap codes. give Two or more divs and style it. Then try to shape it and reach what you want, if it is not working , I'll write and try it when I'm available.
Please make you sure, all option you try and give me feedback.
<div>
<div style="position:fixed; z-index:9999;">
do something ....
</div>
</div>
So whatever content is in this div, its position is always in front of other content. If you want the content in this div to be behind the content of another div then you can use z-index:-9999
I have a problem in bootstrap css about container and fluid
This is my code:
<div class="container">
<div class="row">
<div class="col-sm-6" style="border:3px solid black"><- this div still here</div>
<div class="col-sm-6" style="border:3px solid red">this div full to right -></div>
</div>
</div>
<br/>
<br/>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6" style="border:3px solid black">text here</div>
<div class="col-sm-6" style="border:3px solid red">text here</div>
</div>
I make it on JSFiddle too, please look it for detail:
JSFiddle
my problem is, how to make my col-sm-6 inside container like col-sm-6 inside container-fluid. Or anyone have other way to fix it?
Maybe this post can help you: override bootstrap container width
The idea is basically that you put negative margin on your div.
Given the following code
<div style="border:solid 5px orange;width:400px;height:400px">
<div style="display:table;border:solid 1px red;width:100%;height:100%">
<div style="display:table-row;border:solid 1px blue">
<div style="display:table-cell;border:solid 1px green;height:100%">
<div style="height:100%;background:yellow;overflow-y:auto">CONTENT
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>sss
</div>
</div>
</div>
<div style="display:table-row;border:solid 1px blue">
<div style="display:table-cell;border:solid 1px green;height:100px">
<div>INPUT</div>
</div>
</div>
</div>
Chrome correctly sizes the CONTENT area by the available size for the table cell while Firefox and IE increase the size of the table cell to fit the content.
How can I make FF/IE behave like Chrome?
Example in Fiddle:
http://jsfiddle.net/2p6Jx/
UPDATE : I cannot use fixed height, the table should change according to it's parent element height and width
Update 2: adding display:-moz-stack solved the issue in FF, now it is just IE (http://jsfiddle.net/2p6Jx/3/)
I change your code and it works in IE/FF/chrome.
<div style="border:solid 5px orange;width:400px;height:400px">
<div style="display:table;border:solid 1px red;width:100%;height:100%">
<div style="display:table-row;height:300px;width:100%;">
<div style="display:table-cell;">
<div style="background:yellow;overflow-y:auto;height:300px;">
CONTENT
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>sss
</div>
</div>
</div>
<div style="display:table-row;height:100px;width:100%;">
<div style="display:table-cell;border:solid 1px green;height:100px">
<div>INPUT</div>
</div>
</div>
</div>
</div>
I am working with Bootstrap 3.0 and would like to accomplish something along these lines
Favorites Add
Where favorites is pulled left and wrapped in an H3 and the add is pulled right and wrapped in an anchor. They are bottom aligned and on the same line.
Here is what I have that is not working:
<div class="vertical-gutter-xs row container">
<div class="row">
<div clas="col-md-6" style="border: 1px solid red"><h3>Favorites</h3></div>
<div clas="col-md-6" style="text-align: right; border: 1px solid red"><a>add</a></di>
</div>
<hr />
</div>
Many thanks in advance.
You could use a pull-right link inside the H3..
<div class="col-md-6"><h3>Favorites add</h3></div>
Demo: http://bootply.com/87773
This should get you most of the way there:
<div class="vertical-gutter-xs row container">
<div class="row">
<div clas="col-md-6" style="float:left; width:50%;"><h3>Favorites</h3></div>
<div clas="col-md-6" style="float:right; width:50%; text-align: right"><a>add</a></div>
</div>
<hr/>
</div>
How can a bootstrap grid be styled with a simple header like the picture below?
When I try changing the background color of the first row, the color doesn't extend to the edge of the grid because of the grid padding. When I remove the left/right grid padding, it messes up the rounded corners.
The html looks like this:
<div class="container-fluid" style="border: solid 1px black; border-radius: 10px; max-width: 400px">
<div class="row-fluid">
<div class="span3">Name</div>
<div class="span3">Count</div>
</div>
<div class="row-fluid">
<div class="span3">Joe</div>
<div class="span3">10</div>
</div>
<div class="row-fluid">
<div class="span3">Bob</div>
<div class="span3">7</div>
</div>
</div>
Does this help? rounded corners on divs with background color.
<div class="container-fluid" style="border: solid 1px black; border-radius: 10px; max-width: 400px; padding: 0px">
<div class="row-fluid" style="background-color: #f0f0f0; border-top-left-radius: 10px; border-top-right-radius: 10px;">
<div class="span3">Name</div>
<div class="span3">Count</div>
</div>
<div class="row-fluid">
<div class="span3">Joe</div>
<div class="span3">10</div>
</div>
<div class="row-fluid">
<div class="span3">Bob</div>
<div class="span3">7</div>
</div>
</div>
This is one of those cases where you probably should be using a table. Screen reader users will appreciated it, and Bootstrap has styles built in that should help.
http://twitter.github.com/bootstrap/base-css.html#tables