This is the page: propertytest.uphero.com
I have narrowed down the problem to the 6 blueish boxes (the top 3 are under a div called offers and the 3 below that are under a div called properties). If I was to take them out, the space goes but I would really like to keep them in so I need someone to help me troubleshoot it so that I can keep the boxes and have no space below the footer.
I think my problem lies with the fact they are positioned with relative (all divs are positioned relative - bad idea I now realize that).
I have tried:
aligning the 2 divs with absolute positioning - that does the trick of getting rid of the space at the bottom/right however if I was to scale down the browser, the boxes go out of position..
removing all positioning and floating them to the left/right - removes the space at the bottom/right but doesn't go into the position I would like them to ( I don't think you can position floats with top/bottom/left/right or margin? )
Here is how to sort out the 6 boxes that you currently have as position:relative;
http://jsfiddle.net/F9Q6T/
The basic premise is that you float the boxes inside a container and then clearfix them to make the container the right size.
In terms of the issue at the bottom of the page you need to remove bottom:290px; from your footer. This appears to be what is causing the problem
I think main problem is body background image. You have used image of 1300px * 1000px size. i think you must use image of 1px width with repeat property.. And white space at bottom come due to bottom property of orders and properties div`
thanks.
Related
Having problems executing a complex layout with minimal usage of relative and absolute positioning.
Here's my layout:
All my elements are floating left sitting side by side with only a single problem: the border img needs to bleed down into the next row. How can I do that while preventing the elements in the 2nd row (the CTA elements) from scooting down below the lower margin of border img?
This is what happens if I set the height of border img
For clarification:
The dom is such that border img is between main_sidebar and CTA_top_container.
main_side_image
main_heading_container
main_sidebar
border_img
CTA_top_container
CTA_Button_relative
Closing thoughts:
I have some ideas, like floating right the border img as a div (or susy's last) and setting background-image as 60% width and positioned on the left of the div or nesting an absolute positioned img inside of a relative container to nudge it over to the left, but i am afraid of destroying the fluidity of the layout (it's inside of a susy fluid grid).
Any thoughts?
If you float the border_img right instead of left (with some right margin to push it off the edge), everything else should be able to flow around it.
You might also want to use a grid with more columns. If you're always having to split columns into fractions, it's not really the right grid for the job.
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!
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 am facing a problem: I have a div tag and images of 100px width each on both sides of the div. Now I want to add a number of div tags stacked over each other in the middle of it and they have to be fluid (using % width) and relative to support multiple resolutions. How can I do it?
JSFiddle Code
The only way to do that with the center being position: relative is by knowing the height of the center divs and adjusting margin-bottom of the div immediately above. Look at http://jsfiddle.net/XMkDt/10/ (this is only a single line, not very useful), and http://jsfiddle.net/XMkDt/26/ (this is equal height divs, but could be adapted to accommodate different heights; note: on my FF win7 the border's align correctly but the text is tweaked by a pixel and I'm not sure why--but for your purposes, it would work).
Note: you would want to make sure z-index: 1 was set to the div that you are actually showing at the time (as you make your opacity change), to lift it above the other divs.
Something like this? You'll need a hell of a lot of empty spaces though to make them fill the width...
EDIT:
New fiddle with fluid width: http://jsfiddle.net/BXW8y/1/
To get an idea of what the hell I'm on about, please go Here and Here
As you will see there is a side bar and a content area, sidebar is floating left, content floating right, and footer clears both.
Height on the sidebar and content are not set so the divs grow!
However, you can see that if one floating div is bigger than the other, the the background image appears.
I need to know how to make the background colour of both divs always be the same, and grow together in peace and harmony
Thanks
display: table-cell on both divs (and removing the floats) can work easily here, though lower IEs won't like it.
Or, you could always use the infamous Faux Columns
What you are asking is for the two divs to be the same height even though their content height is different. This cannot be done without relying on tables or javascript.
What you can do to achieve the same effect, is have a container div (I can see you already have it) and give this a vertically repeating background image of the sidebar and content color. This is known as Faux Columns.
Make sure to clear within the container (move <div class="clear"></div> up one level) so the container gets the height of whichever div is bigger.