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.
Related
I have a HTML grid and 4 divs in. On one hand I want to apply a single background image on these one. On the other hand, I want to translate the divs on scroll.
It works but when I scroll, the background image is not extended anymore.
<html>
<body>
<section id="home">
<div id="bloc1" class="bloc"> </div>
<div id="bloc2" class="bloc"> </div>
<div id="bloc3" class="bloc"> </div>
<div id="bloc4" class="bloc"> </div>
</section>
</body>
</html>
JS & CSS on JSFiddle : https://jsfiddle.net/SO3HSBF5/84wmv1cn/4/
Anyone can help me ?
I have 3 divs of the same size stacked on each other. Each of the divs has got the size of the screen which is visualized on the image with the black frame.
What I would like to achieve is to make div2 visible at the beginning. This is means div2 is filling the screen and the other divs are just visible when I am swiping up or down.
Right now, div1 is visible at the beginning since it is the first div.
Any help?
<div id="wrapper" style="overflow:hidden" layout="column">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
Try this library:
https://github.com/alvarotrigo/fullPage.js
HTML
<div id="fullpage">
<div class="section" id="div1">a</div>
<div class="section active" id="div2">b</div>
<div class="section" id="div3">c</div>
</div>
CSS
#fullpage>div{
height: 100vh;
}
In order to view the second square on page load add active class to the div.
Hope it helps.
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 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.
I'm using picturefill to do responsive images. The issue that I am having is that I am calling picturefill(); method on the success callback of an ajax call. When the dynamically loads, picturefill is called.
This works fine but the issue is that the picturefill'd picture covers up all of the elements that are overlayed on top of it for about 1 second. this causes an uncomfortable effect because the overlayed elements shows up abruptly. so the sequence is that we see the elements, elements dissapear, and then elements reappear from under the picturefill'd picture.
has anyone else run into this problem and does anyone have any suggestions on how I can deal with it? I already tried changing the z-index of the picture fill'd pictures to z-index:1 and everything else to z-index: 200 but still no luck.
Adding some code:
<!-- Begin centerimage Container -->
<!-- Begin rightcaption -->
<div class="rightcaption">
OVERLAID CAPTION
</div>
<!-- End rightcaption -->
<!-- Begin flip-container -->
<div class= "flip-container">
<div class= "flipper">
<div class= "front">
<div class="main-pic-wrap" id="bloop">
<div data-picture data-alt="name" data-class="relative_image">
<div data-src=source> </div>
<div data-src=img2%> data-media="(min-width: 480px)"></div>
<div data-src=img3%> data-media="(min-width: 767px)"></div>
<!--[if (lt IE 9) & (!IEMobile)]>
<div data-src="medium.jpg"></div>
<![endif]-->
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript>
<img src=img3 alt="Image of Activity">
</noscript>
</div>
</div>
</div>
<div class = "back">
<div id="map"></div>
</div>
</div>
<!-- End flipper -->
</div>
<!-- End flip-container container -->
<div id="moreShowHideGroup">
<div id="mapShowHide" class="icon-globe"></div>
</div>
Alright - finally figured it out. So I believe what is happening is that the container which is holding my picture fill'd picture and my position:absolute floating element is losing it's width property on execution of picturefill since I think picturefill.js removes the picturefill div from the DOM and then replaces it.
While it's removed, the container element which I have set to width:100% has nothing inside to give it an actual width so it collapses for a split-second and my fixed position elements dissapear for a split second.
To prevent this, I put another position:absolute div with 100% width into the container and then dropped my other position:absolute divs into this new container. So the structure looks like this:
<div class="main" style="position:relative">
<div data-picture data-alt="name">div data-src=source> </div></div>
<div class="always-here" style="position:absolute" top:0; left:0;>
<div class="fixed" style="position:absolute; top:2%; left:2%; ">
</div>
</div>
</div>