DIV positioning

Question

Hey this is my link: http://ilikeyou.tk/409/

I'm trying to position the Next and Previous buttons (< and >) inside of the container like_box_page.

I first centered the buttons using the answer here: Vertical-Align a DIV

Whatever I do, the buttons are still out of place. Is there a way to center them horizontally in the container?

Can you photoshop a picture of where you want them? – JSantos Aug 12 '11 at 13:05 — JSantos, Aug 12 '11 at 13:05

score 2 · Answer 1 · answered Aug 12 '11 at 13:05

2

use firebug plugin for firefox and you'll see that they are very much in the center of your box, the rest is just off :D He is also much bigger then it's parent.

answered Aug 12 '11 at 13:05

Hans Wassink

2,529
3
30
45

score 2 · Accepted Answer · answered Aug 12 '11 at 13:09

I wpuld change even HTML structure, but if to play with this HTML ---

Overwrite these 3 classes :

.img_spot {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    float: left;
    margin-left: 0 !important;
    margin-right: 20px;
    max-width: 333px;
}

.navigation {        
    height: auto;
    left: -5px;
    margin: 30px 0;
    padding: 0;
    position: absolute;
    width: 636px;
}

.like_box_page {
    background: none repeat scroll 0 0 #F8F8F8;
    border: 1px solid #E4E3E3;
    box-shadow: 0 3px 0 #E9E9E9 inset;
    float: left;
    padding: 16px 61px 13px;
    position: relative;
}

Do you, by any chance, know how to make it work in IE too ? It's kind of messed up there.. — Asaf Biton, Aug 12 '11 at 13:26

score 2 · Answer 3 · answered Aug 12 '11 at 13:09

2

Have you tried using absolute positioning? set the parent div to postion:relative and the links to position:absolute and set the top property. That may not be perfect, but I think it would work.

answered Aug 12 '11 at 13:09

Chad W

420
2
14

I did (: it's working but not the way I want it to be in this case. – Asaf Biton Aug 12 '11 at 13:22

score 2 · Answer 4 · answered Aug 12 '11 at 13:10

In your .navigation, you need to change the margin as follows

.navigation {
    position: absolute;
    margin: 0 0 0 -20px;  //HERE
    top: 50%;
    height: 50px;
    width: 100%;
    z-index: 1;
}

You might also want to give the img under it some more margin.

<img style="margin-left:40px;"

enter image description here

score 2 · Answer 5 · answered Aug 12 '11 at 13:15

add margin-top: -25px; in .navigation to center the navigation in middle of the height, not start from the center.

P.S. margin-top: -25px or (yourCOntainerHeight) / 2 as negative margin, because you have top: 50% which mean that your element will start at 50% of container height and u must compensate with negative margin to be exatcly in middle.

Regards

score 2 · Answer 6 · answered Aug 12 '11 at 13:17

2

In your previous css code,just replace margin-left:10px; to margin-left:200px;
and margin-rigt:10px; to margin-right:200px;

answered Aug 12 '11 at 13:17

gurjeet kj

99
1
1

DIV positioning

6 Answers6