Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I force margin-right 0?

Tags:

html

css

My html and css is like this :

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Data</title>
        <style type="text/css"> 
            body {  
                font-family: 'Arial';
                font-size: 9px;
                margin-bottom: 100px;
            }
            div.global{
                width: 100%;
                font-size: 12px;
            }
            div.left {
                float: left;
                width: 50%; 
                text-align: center;
            }
            div.right {
                margin-left: 80%;
            }
            div.center {
                margin-left: 35%;
                width: 485px;
                text-align: center;
                font-size: 12px;
            }
        </style>
    </head>
    <body>
        <div class="global">
            <div class="left">
                <div style="width: 80mm; margin-left: -15px !important;"> 
                    data.... <br>
                    test....
                </div>
                <hr style="max-width: 80mm; margin-left:0; height:1px; border:none; color:#333;background-color:#333;">
            </div>
            <div class="right">
                <div style="width: 80mm; margin-right: 0 !important"> 
                    <table>
                        <tr style="padding-right:35px">
                            <td>Lamp</td>
                            <td align="right">test 1</td>
                        </tr>
                        <tr>
                            <td>No</td>
                            <td align="right">test 2</td>
                        </tr>
                        <tr>
                            <td>Date</td>
                            <td align="right">test 3</td>
                        </tr>
                    </table>
                </div>
                <hr style="max-width: 80mm; margin-left:0 height:1px; border:none; color:#333;background-color:#333;">

            </div>
        </div>  
        <div class="center">
            data 1 2 3<br>
            data 4 5 6
        </div>          
    </body>
</html>

..........................................................

I want display table(table in class=right) on the far right

I try

...............

<div style="width: 80mm; margin-right: 0 !important">

..............

But id does not work

Is there anyone who can help me?

Update

Demos is like this :

https://jsfiddle.net/skfd7215/1/

like image 891
samuel toh Avatar asked Dec 16 '25 12:12

samuel toh


1 Answers

I appreciate this is an older post and I haven't tested this against the code that you have provided (so I can't guarantee it will work for your given scenario at this stage) but I was researching a solution for forcing relative elements to the right hand side via margin-right as well and found this little beauty:

.element {
  margin-left: auto;
  margin-right: 0;
}

Example codepen here https://codepen.io/jamie-endeavour/pen/GdrZao

Either way I hope you got sorted. It would be cool if you could share your solution since none of the above answers have been accepted!

like image 101
Jamie Bradley Avatar answered Dec 19 '25 05:12

Jamie Bradley