I have two div´s in a container div.
When I press the left div it expands to the right using {transition: 1s} in the CSS.
When I press the right div I want it to expand from right to left, but it expands and THEN "slides" to the right.
Any tips?
Thanks!
Related
Is it possible to align a button to the bottom of it's parent element, but keep it in the flow so that space is made for it?
I know how to align a button to the bottom use position: absolute; bottom:0 but that makes text overwrite it (example).
I would prefer not to have to hard code the height of the button as bottom padding for the parent element.
You can set padding bottom for parent equal to button height, then text won't go over button.
here is fiddle example
http://jsfiddle.net/t0e9hhn9/
I have two divs: one is floated left and the other right. The div on the right is a constant size, but I want the div on the left to change it's width according to the window size. I currently have the width set to 75%, which looks great at a certain size. However, when the window get's relatively large, the space in between the two divs becomes too large. How can I set the width of the div on the left so that it's distance from the div on the right is constant, regardless of window size?
Set the left-most div's width to 100% and give it a margin-right the same width as the right div. Then make the right div's position absolute and fix it to the top-right corner of the page.
You can set the left floating div to 100% and give it a margin as wide as the right floating div. That should work
Like this jsfiddle
There are a lot of questions regarding side-by-side divs. I didn't miss those. But I need something that spans the whole width of the screen. This is the situation:
I need three divs positioned side-by-side. The left, middle, and right divs we'll call them. The middle div holds the header contents of the site and is a fixed width (800px). I want the left and right div to span the rest of the screen width on either side. So..
<-LEFT-> | MIDDLE | <- RIGHT ->
The reason I want to do it this way is because the middle (content holding) div has a backgrond that is a gradient. Let's say the left side of the gradient is white and the right side is black. I need the Left div to be white so it is a continuation and the Right div to be black. This way it looks like one fluid heading that spans the whole width of the screen.
Thanks.
A solution for this problem I once implemented was using 2 div elements, absolutely positioned, with the center div as an overlay. I have a working example here:
jsFiddle solution
This way, it doesn't matter how wide the screen is: The div's span 50% of your screen, and the middle part is behind the centered div.
Note that you might have to use a javascript workaround for the height-issues.
Do you want content in the left or right divs? If not, Simply stick with your one center div, give it a width and position it using margin: 0 auto; in your css. You can then set the background image of the body tag with an image (say 1px by 2400px) that is half white and half black.
If you want that effect just behind your header, then you could create a div the same height as the heading and give it the following css properties:
position: absolute;
width: 100%;
z-index: -1;
that way it should sit behind your container (middle) div.
You should consider having just one centered div and on the body put a background-image of 1px height and large enough width and centered. That image will have the left half white and the right one black.
Hope this helps, Alin
...WWWWW| DIV |BBBBB...
Anyway I don't think it's possible without using a table.
Usually floatting div are size-fixed and center div is fluid.
I have a div with a background image which is aligned bottom right. Then I have another div floated inside that div to the left and to the bottom. In IE6, it looks like the bottom inner div is overlapping and cutting out the middle of the background image which is set to bottom left.
Any ideas what might cause this? Is there a known issue with floats and background images?
Thanks
The solution was to add the CSS property Zoom:1; on the div with the background image. This sorts it out in IE6.
I have two div's in a container div, one floating left, one floating right.
I have a php function for a search engine that spits out results, into the left div. what I need to do is have
the right div repeat the background based on the height of the varied results on the left div. I have no idea how to go about this, any ideas?
Right now it looks like this:
left div content right div background
left div content right div background
left div content right div background
left div content
left div content
what I need it to do is base it's repeat-y off of the content in the left div so it looks like this
left div content right div background
left div content right div background
left div content right div background
left div content right div background
left div content right div background
left div content right div background
EDIT:
The only solution I can think of right now is to spit out a blank line in the right div for every link in the left div, i'd like to avoid that, which is why i'm asking for a different solution.
EDIT 2:
Thought of another way via javascript, to just detect the height after the div is loaded into the page, and reassign the height of the left to the right. something i'd like to avoid but hey what can ya do.
As a pure css solution you can use faux columns. Basically it implies using background repeat on the parent to mask the div height. It's an ugly hack, but works surprisingly well for most scenarios.
Or you can use javascript:
var box1 = document.getElementById('left-div');
var box2 = document.getElementById('right-div');
var height = box1.offsetHeight;
if(box1.offsetHeight < box2.offsetHeight) height = box2.offsetHeight;
box1.style.height = box2.style.height = String(height) + 'px';
set the right div height as same as left div.