I am using twitter bootstrap, i have an issue with clearfix class in bootstrap. My html is :
<div class="pull-left">This is a text</div>
<hr class="clearfix" />
What i am expecting is horizontal line should come in next line of displayed text but it renders at right side of the text. And if when i use style='clear: both;' in hr than it works fine. Why clearfix not doing the same as clear: both does ?
The class clearfix should be applied to the parent container element
<div class="clearfix">
<div class="pull-left">This is a text</div>
</div>
Demo: Plunker
Try the following:
<div>
<div class="pull-left">This is a text</div>
<div class="clearfix" />
</div>
<hr />
In this case empty clear div is placed next to right of your pull-left div and does clearing.
The matter is if you use float: left on the element then it becomes float and the next element after it is placed to the right if there is a free space for it. So you should place all the elements you need to be float with float: left (say pull-left) in a row and close this sequence with float: none; clear: both (say clearfix) to stop floating.
Related
i have downloaded an html template and it has a banner after the nav bar, i am trying to replace the image banner with my image, i changed it to the same size of the image in the template and added, the html is like below:
<div class="single-creative-shop-banner parallaxBg bg-img" style="max-width:100%; height:auto;"
data-bg="assets/img/home-banner/home_shop_creative_01.jpg">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div class="creative-shop-banner-content">
<h2>Minimal Collection</h2>
<p class="mb-0">Unlock The Goddess In You</p>
</div>
</div>
</div>
</div>
</div>
the css is so long , not able to post in the question, my website is https://likhaa.com
the problem is when i am adding the banner image, its not properly displaying, instead some part is hiding under the navbar, and the width is also not proper. is there any code in html to fix it or can anyone help me with my code
Please remove the inline margin of 131px from the div having the class "shop-creative-banner" also remove position fixed from the div which is children of div having id "jarallax-container-0"
I'm trying to create an index page and would like to have links to anchors which would be within a hidden div.
Clicking the anchor link would trigger the div the anchor is in to become visible and scroll the page to the anchor location.
I've tried a few things but have failed. Any help would be greatly appreciated.
<div>
<p>Link</p>
Content 1Content 2Content 3Content 4
</div>
<div class="inter">Some intermedary content with a large bottom margin to demonstrate scroll</div>
<div>
<div class="hiddenContent">
<div id="content1">I am content 1</div>
<div id="content2">I am content 2</div>
<div id="content3">I am content 3
<a id="content4" >Inner anchor within content 3 div. Link should scroll here but also show the other content within content 3.</a>
</div>
</div>
This can be easily solved with CSS. You will need to adjust to meet your needs as you've not given us any code to work with.
Use the :target pesuo-class selector to select an item that is the target of a link
.hiddenContent>div, .hiddenContent > [name=content4] {
display: none;
}
.hiddenContent>div:target {
display: block;
}
.inter {
margin-bottom: 100vh;
}
<div>
<p>Link</p>
Content 1Content 2Content 3Content 4
</div>
<div class="inter">Some intermedary content with a large bottom margin to demonstrate scroll</div>
<div>
<div class="hiddenContent">
<div id="content1">I am content 1</div>
<div id="content2">I am content 2</div>
<div id="content3">I am content 3</div>
<a name="content4" >
<div>Some content in a named anchor</div>
</a>
</div>
I have 2 divs on a same row. When the div2 which is on right is removed I want the div1 on left to take full width.
<div class="row">
<div class="col-sm-6" style="background-color:lavender;">Div1/div>
<div class="col-sm-6" style="background-color:lavenderblush;">Div2</div>
</div>
I am using bootstrap for grid and resposivity. Is there any way I could achieve it with bootstrap?
You could write a css selector that sets the width of col-sm-6 to be 100% it is both the first-child and last-child
.row .col-sm-6:first-child:last-child {
width:100%
}
If you are using bootstrap4, then you can skip the column size declaration and instead just do.
<div class="row">
<div class="col-sm" style="background-color:lavender;">Div1/div>
<div class="col-sm" style="background-color:lavenderblush;">Div2</div>
</div>
I know div elements are block level elements. They come one by one in different rows. I found one strange behavior. It is not displaying one by one.
<div id ="contend">
<div style='position:relative'> <div class='serach-box'>
<div class="container">
<p>Live Search</p>
<!--Row with two equal columns-->
<div class="row" >
<div class="col-md-3" >
<div class="demo-content">Location</div>
</div>
<div class="col-md-3" >
<div class="demo-content bg-alt">.col-sm-6</div>
</div>
</div>
<!--Row with two equal columns-->
<div class="row">
<div class="col-md-3" >
<input type="text" class="form-control">
</div>
<div class="col-md-3" >
<input type="text" class="form-control">
</div>
</div>
</div>
</div></div>
<div>hello</div>
<div>hello</div>
</div>
I added two div elements after completing the serach-box div. I gave serach-box a position: absolute; and its parent div position: relative;.
But why did div text appear above ? Why not below the serach-box div?
Code is below:
http://plnkr.co/edit/ONrHDKuaP9bwmT7MsQhD?p=preview
.serach-box{
width: 90%;
height: 150px;
border: 1px solid;
position:absolute;
left:5%;
}
Because the search box is absolutely positioned, it is taken out of normal flow.
Since it isn't in normal flow, it has no influence over the height of its container.
Since its container has no other content, the container ends up with a height of zero.
The elements following the container are, therefore, not pushed down by the container's height.
your position absolute will cause the text to find its way to the top.
Absolute means it will 'hover' on top of the page.
you can set the position to relative and add some with and height to place the box at the top.
just replace absolute for relative
To the div which is relatively positioned, its taking no height so, both the div's with 'hello' text are displaying there itself.
Give some min-height to the relatively positioned div.
<div style='position:relative;min-height: 32%'>
....
....
</div>
Which will work fine for you.
I have divs on my page as below;
<div id="container">
<div id="header">
</div>
<div id="sidebar">
<div id="switch"></div>
<div id="list"></div>
</div>
<div id="viewer"></div>
<div id="footer">
</div>
</div>
div switch is a button meant to shrink sidebar and to stretchviewer. I want the sidebar to shrink completely to the left and to stretch viewer to the remaining space. But still I am getting a 5px wide gap. You can have a look at my fiddle here. How can I solve this??
Thanks in advance...:)
blasteralfred
Add this line too your css:
#list {padding-left: 0;}
Remove the padding-left in #list and the whitespace is gone.