I'm trying to prevent the left div from scrolling. I've set its position to fixed but now, it is overlapping with the right one. What can I do? I've tried position: relative and absolute to the right div but nothing happens.
<div class="container-fluid">
<div class="row">
<div class="col-sm-7">
</div>
<div class="col-sm-5">
<div id="googleMap"></div>
</div>
</div>
</div>
Add the class col-sm-offset-7 to the col-sm-5 element.
When you make an element's position absolute or fixed, it is removed from the flow of relative and static elements, thus vacating its space in that flow, allowing subsequent elements to "move up" (or left in your situation) in its place.
Assuming you're using Bootstrap, your col divs are floated left so when you make the col-sm-7 fixed, it gets pulled out of the flow making the col-sm-5 float all the way to the left where the other element used to be before being removed from the flow.
Related
On my webpage, I have a div element on the left with a static width of 300px. Right next to it, on the right, I want to display another element which has a dynamic, flexible width (because the browser window could be resized by the user) by using the Bootstrap grid with col-12. Imagine this:
<div class="row">
<div style="width:300px;"></div>
<div class="col-12"></div>
</div>
The div with class="col-12" should be right next to the left div, without space in between of them, and it should be growing/flexing always to the right of the window.
Unfortunately, it seems not to work, having a static px-width on the left element, and on the right an flex element with col-12. The second div is always BELOW the first div. Do you know a solution? Thanks in advance!
Try giving the second div in the row the class "col".
<div class="row">
<div style="width:300px;"></div>
<div class="col"></div>
</div>
Regards!
I seem to be having an issue with aligning the basket on the top row when viewing my site on a mobile. For some reason, this sometimes appears at the top and sometimes appears at the bottom and I cant work out why this is and where I need to amend the code in order to fix this.
Would really appreciate if somebody could advise. I have attached an image to show this from a mobile and the site itself can be seen at:
[https://defineclothing.co/][]1
I wonder why it even works sometimes ;)
This div <div class="col-xs-12 col-sm-12"> has a relative positioning and <div class="top-header "> an absolute positioning.
Absolute positioned elements are positioned relative to the first positioned parent (which means relative, absolut or fixed). In order to achive the behaviour you want simply reset the relative positioning of <div class="col-xs-12 col-sm-12"> to position: static
<div class="col-xs-12 col-sm-12">
<div class="top-header ">
....
</div> <!-- End Top Header -->
</div>
I have a couple of divs sat side by side that need the button to be on the bottom.
I need the button to sit on the bottom of the .col-sm-4 container, without the h3 tag pushing it further out. Does anyone have a hack or some kind of solution?
The h3 tag size needs to be responsive as its text may change. I've got it to a point where the boxes are pushed out of the container, but now I'm stuck.
____________________Better explanation_______________
My h3 tag is pushing my .col-sm-4 outside of the container. I need the button to be at the bottom of the div.
In this js.fiddle, I have provided two divs. The first one is where I want the button, but I need the h3 tag to look like div 2. I can't seem to achieve the second div without the button being pushed out of the container.
https://jsfiddle.net/19obrm0q/1/
edit - h4 -> h3.
You can't put an element with nonzero height in the same container as a full-height div and expect both to fit in 100% of the parent's height. That's what height: 100% means.
I've tried again, this time keeping the h3 outside the col-sm-12 as required. To make this work I've moved the full-height class up a level to the col-sm-4. I also had to move the center-bottom element outside the col-sm-12. This is because now that the col-sm-4 is the element with defined height, it should also be the element which defines the position context for the absolute element.
https://jsfiddle.net/19obrm0q/7/
First, your markup was a little different between the two columns: one had the h3 inside the parent div and the other had it before/outside, which was contributing to making them look different.
But my suggested solution is to pad the bottom of the parent so that there's sure to be room for the absolute positioned button.
Have a look:
https://jsfiddle.net/19obrm0q/3/
https://jsfiddle.net/19obrm0q/5/
After much fiddling about: BEFORE:
<div class="col-sm-12 bg-white pad-sm-top text-center full-height full-width">
<h3 class="clear-margin text-banner-activity fix text-center"> SOME TEXT</h3>
<p class="clear-margin">SOME TEXT</p>
<div class="center-bottom">
Learn more >
</div>
</div>
</div>
and AFTER:
<div class="col-sm-4 no-pad bg-white">
<h3 class="clear-margin text-banner-activity text-center">heading</h3>
<div class="col-sm-12 pad-sm-top pad-xlg-bot text-center">
inner
</div>
<a href="#" role="button" class="btn btn-activity-light btn-md center-bottom">
button
</a>
</div>
I moved the divs around and got rid of the div that was nesting the button, and now it works, the button sits on the bottom no matter the size of the column.
i've a div block where i need to show a block always in bottom of the section no matter if above section is empty inner div should be in the bottom section div like attached
this is what i am doing
<div class="col-md-6 col-xs-6" style="position:relative; min-height:300px;">
Content for upper section
<div class="row" style="position:absolute; bottom:0 !important;">
<div class="col-xs-12">
Div in footer section of the parent div
</div>
</div>
</div>
what i expect even f there is no content in top section bottom div should be in footer of the parent div instead of starting from the top section , as in attached image but that is not the case please help me to solve it
Check your spellings, its a typo:
Change positoin to position
You must have some custom styling because i just tested your code and it works. The row-class is stuck to the bottom as it is supposed to.
By the way, all col-* classes is position relative by bootstrap default. No need to specify it in the style tag.
I am trying to design a responsive webpage using bootstrap. I have the following HTML structure
<div class="container">
<div class="row">
<div class="col-lg-8 col-sm-8">
<div class="well"><!--Page content here--></div>
</div>
<div class="col-lg-4 col-sm-4">
<div class="well">
<form class="form-horizontal" role="form">
<!--Form elements here-->
</form>
</div>
</div>
</div>
</div>
Now, I want the div.well inside div.col-lg-4 to be fixed positioned. So when I add style="position:fixed;" to the div.well, the default responsive width which it inherits from its parent (that is 33.33%) gets reduced and the form elements gets shrunk. Any suggestions on how I can fix this?
Take a look at this Codepen.
In the CSS Box Model, fixed positioning takes an element out of the normal flow, and if there are no other sibling elements, the parent container will collapse. In this case, the form inherits it's width from the parent, but when taken out of normal flow with fixed positioning, the width value of the parent does not cascade. But when I add a sibling element to illustrate my point, in this case a Bootstrap 'jumbotron' element, you will see that the parent .col-lg-4 .col-sm-4 element is once again visible, but it settles in underneath it's fixed sibling who appears first in source order.
Hope that helps.