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.
Related
I need to have 2 equal width divs side by side, the left column contains an image and the right column will contain dynamic text where the height of the text div can vary somewhere between 400px - 550px depending on how much text the site owner inputs.
I need the image to line up flush at the top and bottom with the end of the text box. The container element is fluid to be responsive.
Desired Effect
What I have at the moment is using floats to line the elements up together and responding fine, but the image falls short, like so:
I tried setting the image as a background-image on the left column with...
.column-image{
padding-bottom:100%;
margin-bottom:-100%;
background-size:contain;
}
But this still falls short a little unless i tweak the padding-bottom amount. This is then rendered useless when I re-size my browser as the aspect ratio changes.
I am trying to avoid using Javascript to solve this.
Use display:table for the container and display:table-cell for the inner divs. Also make sure to remove the float
Fiddle: http://jsfiddle.net/afelixj/26b3vtfx/2/
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 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
So, I have this code
http://pastebin.com/W3ggtgZB as css, and the body looks like this:
http://pastebin.com/2tkmhnfW
What I am trying to do is create a div with two children divs, one of which has a fixed width, and the other one I want to fill the rest of the blank space. I'm eventually going to want a div going across the top of this side div, too, but, that comes later. My issue is, the child div sub1 expands to be 100% of its parent width, which is an issue, because then it overlaps out of the parent div and keeps going. I tried things like floating left, using block and inline, I tried setting the width to auto (which makes it disappear for some reason) - but nothing seems to really work. It looks okay, at first, but when you zoom in, sub1 kinda follows its own rules. Can someone help me fix it so that sub1 will just fill in the rest of the space left in the main div?
Here is the answer:
http://dabblet.com/gist/6069015
Only need to specify the side column's floating and the rest will take place as you want, adapting the screen size as well.
Hope it helps!