CODEWITHSUNDEEP
htmlcss
Mina Gabriel
Mina Gabriel

Reputation: 25080

margin right doesn't work

can some one please help me fix this http://jsfiddle.net/q4rdL/2/ i am doing a menu with next and previous buttons one float right and the other to the left , i added a div with width 100% height 100% between the pre and next divs , the margin left works fine the margin right doesn't work at all

here is the code : 

 <div id="menu" style ="width : 100% ; height:50px ; border : 2px solid red ; position : absolute  ; top:0 ; display : none" >
            <div id="pre" style ="height:100% ; width: 50px ; border :1px solid green ; float :left ; left:0  "><</div>
            <div id="menuContent" style="width:100% ; height:100% ; border : 5px solid green ; position:absolute; margin-left :60px ;" > </div>
            <div id="next" style ="height:100% ; width: 50px ; border :1px solid green ; float :right ; right:0 ; position:absolute  ">></div>
            </div>
            <div id="show_hide" style ="width : 100% ; height:70px ; position : absolute  ; top:0" ></div>

Question is how to make the margin right works and why it does this ?

Upvotes: 0

Views: 19988

Answers (6)

Michael Garrison
Michael Garrison

Reputation: 941

I tried my own version that does not use floats. It is all positioned as absolute. I removed the width: 100% on the menu div because it will always be off by 2px because of the border you have. Instead of having a div that changes its width, I simply centered it by using position: absolute; left: 50%; margin-left: -<half the size of #menuContent>. So if #menuContent is 500px then the margin-left: -250;. Let me know what you think: JS Fiddle

Upvotes: 0

Tooraj Jam
Tooraj Jam

Reputation: 1612

In my opinion, it's far better if you change the structure; Check this Fiddle out.

HTML:

<div id="menu">
    <table width="100%" cellspacing="0" cellpadding="0">
        <tr>
            <td id="pre">            
                <
            </td>
            <td id="menuContent">            

            </td>
             <td id="next">            
                >
            </td>
       </tr>
    </table>
</div>

CSS:

#menu {
    width : 100% ; 
    height:50px ; 
    border : 1px solid red ; 
    top:0 ; 
}

#pre, #next {
    width: 50px;
}

#menu td {
    border : 1px solid red ; 
    height: 50px;
    vertical-align: middle;
    text-align: center;
}

Upvotes: -1

alhimikst
alhimikst

Reputation: 448

try this http://jsfiddle.net/q4rdL/32/

i remove width 100% and change "position" on some div, solution can be stretched to any resolution

Upvotes: 3

Al-Mothafar
Al-Mothafar

Reputation: 8219

if you mean to put a right margin for dive with menuContent, you have to change width of it to lower, 100% means the width of your view and margins will be added, so you will have a horizontal scroll for your browser.

try this :

<div style="height: 100%; border: 5px solid green; position: absolute; width: 90%; margin: 0pt 58px;" id="menuContent"> </div>

In additional I dont really know what you are trying to do, but i hope you got idea and my answer helpful for you.

Edit: oh I changed menu to relative position, see this link : http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Upvotes: 0

Josh Mein
Josh Mein

Reputation: 28635

I tried to clean up your html some and move it to non-inline css.

HTML:

<div id="menu">
    <div id="pre"><</div>
    <div id="menuContent"></div>
    <div id="next">></div>
</div>
<div id="show_hide"></div>​

CSS:

#menu {
    width: 100%; 
    height: 50px; 
    border: 2px solid red; 
}

#pre {
    height: 100%; 
    width: 3%;
    border: 1px solid green;
    float: left;
    padding-left:7px;
}

#menuContent {
    float:left;
    width: 90%; 
    height: 100%; 
    border: 5px solid green; 
}

#next {
    height: 100%; 
    width: 3%; 
    border: 1px solid green; 
    float: right; 
    padding-left:7px;
}

#show_hide {
    width: 100%; 
    height: 70px; 
    position: absolute;
    top:0;
}​

Live DEMO

Upvotes: 0

S P
S P

Reputation: 4643

As far as I can see you should remove position:absolute for the element with id = "next"

Upvotes: 0

Related Questions