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.
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 have to add a small banner at the top of a page and am having trouble with pushing the existing content down 40px so I can fit in the banner above.
The current layout has a lot of strangley positioned elements and they all keep moving out of place if I wrap the whole body area in a relative block div with a top margin.
Is there a technique that should work for this other than wrapping in a div like this?
If you do this, then you have to be careful that your CSS positioning on the divs that you want to move is not absolute. Because if it is, then they will just stay where they are. It should however, work if you add a div that encompasses everything and put a few pixels of padding on the top with CSS.
Why not just put a at the top of the page and set that div to clear:both afterwards. This should shift the rest of the page down 40px, or whatever you set the height of that div to. Of course, I'm just guessing here without looking at code and/or a sample site. Since I assume by strangely positioned you mean weird usage of position:absolute, this should allow your current setup to remain consistent.
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.
So, I am working on a fansite, and I can't figure out why my "content" class div will not stretch. It's supposed to be 100% min-height, but it's not doing that. Also, I can't get it to stretch to the "column2" div, which is seated inside of it. Sorry if this is a simple fix, I'm very new to this. I wouldn't know where to start as far as posting coding for you guys to reference, so if you want, just go to here and view the page source.
Actually, it does stretch to the bottom --- the bottom of the html element. The problem is that your right column is position: absolute. Whenever you set an element to absolute positioning, it is detached from the normal flow, and so its container will not strech to contain it (which is a desired effect in drop-down menus and such).
Instead, you should use the float: right property on the right column and then add an empty div at the bottom which is clear: both, to ensure that the div stretches correctly.
I am trying to create a site layout using CSS. I have four (4) DIV elements. One is the main container that I have centered in the page and contains all the other DIV elements. Of the remaining three DIVs one is a page header, one is a left menu and the last holds content for the page. I would like to have the CONTENT DIV floated such that it is adjacent to the MENU DIV. However, I am finding that the width of the CONTENT DIV is not using the width I specified. I have created a sample running on JSFIDDLE which should make it easier to visualize.
http://jsfiddle.net/Rrgr7/
What I am trying to figure out is why the CONTENT DIV doesn't take up 600 pixels as I have defined? Thank you.
You have to float your content also. Your content div is 600 from the left not counting the float and if you add more text it will run down under the menu: example.
If you float it, then it will do what you want, but you have to be careful about sizes or it will float down under your menu.
If you just give it a 200px margin and no width, I think that would work best as it would use the remaining space and stay 200px from the left edge. The float doesn't push it further, the margin is from the container div.