I am trying to add side banners 160X600 that remain fixed with scrolling but my problem when I make the two divs position fixed they overlap although there is float left and right this problem is fixed when specifying position absolute to make it clear this my html.
<div class="addsright">content</div><div class="adds">content</div>
This my css:
.adds{position:fixed;float:left;margin-left:0px;margin-top:60px;z-index:1000;}.addsright{position:fixed;float:right;margin-right:0px;margin-top:60px;z-index:1000;}
Try creating a wrapping div and setting position fixed on that. Here's an example: http://codepen.io/anon/pen/Hjmva
Related
I am using bootstrap to design web application. I have two main divs, sidebar div with span 2 which has position : fixed and right div which is of span 10. These divs has float : left property as per bootstrap css file as I am using row-fluid class.
So the problem I am facing is when window size is reduced after certain limit, user is able to scroll the content of right div and which is overlapping with left div. So I want hide the content of right div which overlaps on left div ( ie. left div, the fixed div, should behave like a left wall of browser window for right div).
I have tried using overflow property and also tried changing z-index of divs, but nothing seems to be working here.
jsfiddle link - here is the link I have reproduced the problem, there if you scroll left in result area, you can see the content of right div is overlapping with left div(nav list), as I have given left-margin : 240px to rightDiv. So what I want is, the right div content should not overlap left div, and it should be hidden behind.
Any suggestion on how to get it right or is there any other way to achieve the same?
I'm not 100% sure exactly what you are trying to do. If it's just hiding whatever is overlapping then applying a background-color to the fixed div will achieve this.
JSFiddle.
You can left padding equal to the width of left navigation to prevent the overlapping (imitate)
padding-left:140px;
JSFiddle
I am trying to make a expandable menu which should get on top of one div and push some other divs down.
A mockup of what I am trying to do:
And a concept Plunker:
You're using Bootstrap and in order to achieve your desired behaviour you should "extract" TITLE div from document flow, for example using "position:absolute" and then move it to accomodate to deisred position.
Don't forget that you must extend it more than 100% in width... and push on the left with negative left position.
I created an image of what i would like to create using CSS. I also made a small setup in JSFiddle.
The problem is that i can create everyting, except for the fluid column on the right. I am using it to show images in a slideshow, and i would like them to appear from the right of the screen and dissapear on the left "behind" content 1.
I tried absolute, relative and fixed positioning. But the result is either losing the centered left positioning of content 1 or not having a fluid column up to the right of column 2.
You need to use width:100% to fill the whole screen, http://jsfiddle.net/a9Yda/2/
Is this code what you were looking for?
I added a fixed position and min width to the right div which seems to have achieved the effect you were looking for.
please see the test page on www.derekho.co.uk
I'm wanting to 'empty' the container labelled with 'D' so that the body background tiles show through.
Container D needs a set width and needs to be centered. Any ideas?
As solved by asker:
http://www.derekho.co.uk/test.html
I suggest to use floats instead of absolute positioning. With absolute positioning you will have troubles when adding content on top and at bottom of the whole structure. For example, if you add a footer and side columns are bigger than the center one, footer will be positioned under these columns, they will cover it! Using floats, you can avoid this setting clear: both; for the footer element.
Float example:
http://www.pmob.co.uk/temp/fixed-center-fluid-sides.htm
I'm working on a new portfolio site which has a menu that looks like this: http://cl.ly/9rJ7
The Logo and three buttons are positioned absolute and have a fixed width (which will be changed by animation with javascript later).
The div to the right should therefore fit exactly into the gap between the third button and the browsers's right edge (as seen the screenshot).
I've already tried to give it a width of 100%, a position of left:700px and the parent div an overflow: hidden, but this doesn't seem like correct css to me, since the overflow doesn't work in some browser.
Any suggestions?
The Logo and three buttons are positioned absolute and have a fixed width .. The div to the right should therefore fit exactly into the gap between
the third button and the browsers's right edge .. I've already tried to give it a width of 100%, a position of left:700px
Try position:absolute; left:700px; right:0.
It's fine to set both the left and right properties.
If you float your left elements left, then add a div with margin-left: 700, it should fill the remaining space to the right.