margin right doesn't work

Question

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 ?

Where is the margin-right supposed to be? I don't see it in the OP or the fiddle. — Mark M, Jun 05 '12 at 12:55
Give me a few minutes to look at your code and I will find your issue. — Michael Garrison, Jun 05 '12 at 12:57
I am unable to reproduce your issue. I can successfully add a right margin on the menuContent element. It just increases the total width by the size of the right margin. — Mark M, Jun 05 '12 at 13:02
Did you see [this post](http://stackoverflow.com/questions/2105773/problem-with-right-margin-with-css-100-350px-layout)? It appears to be the same issue. — Mark M, Jun 05 '12 at 13:16
Could you either comment on or upvote the answers that you feel are closest to what you are looking for. You have not given any more insight to your issue, and you have received several good answers. — Josh Mein, Jun 05 '12 at 18:31

alhimikst · Accepted Answer · 2012-06-05T13:25:00.130

3

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

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

edited Jun 05 '12 at 13:25

answered Jun 05 '12 at 13:18

alhimikst

428
3
10

This works but you cannot use height:100% because of the borders. Height only accounts for the space inside the div, so the inside of the div is set to 100% and it still has another 10px of borders that change it's position. It is the same with the width attribute. Other than that, I like this one. – Michael Garrison Jun 05 '12 at 13:53

score 0 · Answer 2 · answered Jun 05 '12 at 12:56

0

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

answered Jun 05 '12 at 12:56

S P

4,615
2
18
31

Please take a look at the following Fiddle: http://jsfiddle.net/q4rdL/12/ Don't look at main content section, but the positioning of the next and prev. – S P Jun 05 '12 at 13:02

score 0 · Answer 3 · answered Jun 05 '12 at 13:10

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

score 0 · Answer 4 · answered Jun 05 '12 at 13:12

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/

Michael Garrison · Answer 5 · 2012-06-05T13:46:56.000

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

score -1 · Answer 6 · answered Jun 05 '12 at 13:29

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;
}

margin right doesn't work

6 Answers6