This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Space at the bottom and right side of my page
First off, I am sorry for posting this twice, my previous question earlier got good replies but they did not fix my problem.. so I am posting it again to hopefully get some more answers (I really need to fix this issue!)
Link for the actual page
Basically, at the bottom of my page between the offers/properties div and the footer there is a big space. I know why this is; I have used relative positioning and used top: -256px; to position the boxes where they are.
I have tried:
Aligning the 2 divs with absolute positioning - that does the trick of getting rid of the space at the bottom and I can get the boxes where I want them however if I was to scale down the browser, the boxes go out of position..(is there a way to get around that?)
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
Sam on my previous question did this, it sorts of my problem just I can get them into position!
Adding overflow: hidden; to the container div.
I just don't know what to do so any help is really appreciated!
Thanks in advance!
EDIT:
Just saw that you got that answer already.. The next step is to put those boxes in a container.
<div id="offer_box_wrap"></div>
style
#offer_box_wrap {
width: 650px;
float: left;
margin-left: 5px;
}
you'll have to tweak it but it should work
end EDIT
You are relatively positioning your left boxes so...
i would suggest this
do not use <li> for boxes
use a div with a class that aligns them as you want.
<div class="offer_box"></div>
style it
.offer_box {
width: 208px;
height: 170px;
background: url(http://www.propertytest.uphero.com/images/offers_box.png) no-repeat;
float:left;
margin: (figure out the spacing you need for 3 per row)
}
put a clear div underneath the last one
<div style="clear: both"></div>
see it here http://jsfiddle.net/atTGa/2/
Related
I'm not very good with HTML/CSS. Here is the website that I'm trying to edit. I'm unsure if this should be in WordPress Stack because even though my website is in WordPress, the problem is with the CSS. Also, I'm really sorry for bad English (I know 5 languages so its kinda hard to keep up).
The problem is that the grid (Essential Grid which displays a product catalog) and the container above it are both children of one div. When I try to change the padding of my grid, It changes the padding relative to the top of the parent div rather than instead of its sibling which is on top of it.
I'm not sure what CSS properties might be affecting this(I'm not very good at CSS) but I have posted the ones which I think might be the problem. Please visit the link and inspect element (Sorry..)
.child-on-top{
//acutal id on page is featured-111
width: 99.8936px;
height: 449px;
background-size: 100% 100%;
}
.child-below{
position: relative;
padding-top: 100px;
}
.parent{
//actual id is wrapper.
position: relative;
clear: both;
}
One solution that has worked so far is if I increase the top padding to about 500 px, that would add about 50 pixels of padding above the child element thats below. But that will only work in desktop. In mobile, you will get a lot of empty space. So it isn't really a solution.
Add folowing css and then check. Your div which have id featured-111 which take floating from class grid and because of this problem create. So write this css
#featured-111{
float:none;
}
I have searched the internet for countless hours looking for a solution and I can never seem to find it. What if I had a log in page and I wanted to have it completely centered in the center of the page.
I've never figured out how to do this and hopefully someone can help me put and end to this lack of knowledge of mine.
Here is an example
What I want is to have a div with a height of 410px and a width of 756px to be centered on the screen. So vertically and horizontally. I then want to be able to put other 's inside it with content. For example maybe I want to put a login page in there or a blog post or anything.
Major thanks in advance!
Use margin: auto;.
HTML:
<div class="middle">middle</div>
CSS:
.middle
{
width: 100px;
height: 50px;
border: solid 1px red;
margin: auto;
}
See this link for vertical centering.
Here's a fully working example.
Hey all - I don't know why my rollover links don't work now. I think it may have to do with z-index and divs being hidden.
The breadcrumbs for example:
<div id="breadcrumbs">
Home >>
Section Title >>
Parent Menu Item >>
Sub-Item 1
</div>
The last two work for some reason. You can look at the page and view the source from here:
http://cpkdesign.com/uiaustin
Thanks everyone.
For the div with the right id, if you can give it the following css:
#right {
margin-left: 0px;
margin-top: 0;
padding-left: 0px;
width: 745px;
float: left;
}
That should hopefully take care of your problem.
More info:
The reason why you're running into this issue is that the right div is overlapping your links. The general rule is, if you're gonna start floating your elements, then keep an eye on the non-floating elements...that div is your non-floating element in a sea of floating divs.
Here is a jsfiddle http://jsfiddle.net/Jw6kU/2/ of what i have right now. The thing i need to do is drop the white box and the text in that div tag ("left") down so it is center in the green bar at the top (67px tall). How can i easily do this? Sorry this is sloppy, the work was done fast.
This is a second post. The first one i messed up by pasting the wrong link. Sorry.
Using the margin-top css property would give the div space from the top of the page. You'd have to find the right amount of pixels and test it out fully but I think that will help.
I added this to the css of your fiddle and got the white div at the top in the center of the green div under it.
#left {
margin-top: 9px;
padding-top: 12px;
}
I have managed to put two divs side by side using a <div class="clear"></div> as explained elsewhere.
I now want to put two divs side by side, inside a fixed-size box that can scroll horizontally. Vertical space isn't a problem, but the two divs must be side by side and can expand vertically when needed. If space is needed horizontally, they must expand inside the box with fixed width but whose insides can scroll horizontally.
The following code does this with tables, but I was wondering if it can be done with divs as well, to keep the page semantically correct. The div version fails, because it keeps the second pane under the first one, even with a <div class="clear">.
Cheers for any advice!
PS: I can't seem to insert a block of html code in here, so I saved the file here: http://husnoo.com/scroll1.html (tested with chrome and safari, open the source code to see what I mean).
give the right box float:right;and it will stick to the right side :)
http://jsfiddle.net/loktar/Mbs3q/1/
div#wider {
background-color: #ddd;
width: 700px;
float:left;
}
.second_pane{
background-color: #eee;
width: 300px;
float: left;
}
Is that what your looking for? Floats them both to the left so they stick to each other, and are inline.