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.
Related
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!
I have a css code that has a float property. When i resize the window of my browser, the menus of my webpage are moving down. I already comment-out the float properties, but nothing's changed. What should I do to make it fixed that it will not move down even though I resize my browser?
float got nothing to do with the floating of the div's when the window is resized.
It just ask the div to be aligned to the left,right only if there is space,
what i think you should do is to make wrapper div ID called "content" like this below and add all your inside div elements there,
#content{
width:960px;
margin:0px auto;
}
now inside this div content, if you have 2 div's width 400px and 400px if you set their property to float left they align left, if you set it float right they align right..
if there is no space, like if one div is 400px and other one is 600px even if the property is set to float left they will come as vertical dives as combined width is more than container div
learn more about fix width css design
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.