How to put a div at left or right in pure CSS?

Question

I am new in pure css, it is nice and easy!

My HTML:

<header class="pure-u-1 pure-u-md-1-1">
<div class="pure-u-4-5">

    <div class="left-in-header pure-u-3-8">This should be in left</div>

</div>

</header>

My CSS:

@font-face{
    font-family: 'myfont';
    src: url('myfont.ttf');
}


html, button, input, select, textarea, *, * *,
.pure-g [class *= "pure-u"] {
    /* Set your content font stack here: */
    font-family: 'myfont', Times, "Times New Roman", serif !important;
}

html{
    direction:rtl;
    box-sizing: border-box;

}


*, *:after, *:before{
    box-sizing: inherit;
}

*{
    margin:0;
    padding:0;
}

header{
    color:white;
    background:#b90101;
    background: rgba(200,1,1,0.8);
    margin:0 !important;
    padding:2px 0!important;
}

header > div{
    margin:auto;
    display:block !important;
    background:red;

}

.left-in-header{
    background:green;

}

Now please see the green div with class .left-in-header, I want to put it at the left of its parent! (its size is pure-u-3-8). (My website language is Persian, and Persian is right to left, then my direction is rtl)

And How to put a div in center of it's parent by pure classes?

score 3 · Accepted Answer · answered Dec 29 '15 at 12:21

3

Give below css property to :

.pure-u-3-8{
 float:left;
text-align:left;
}

and remove margin:auto from div itslef and its parent if given

answered Dec 29 '15 at 12:21

prajakta

162
4

Thanks, but I know this is not standard way in pure-css!! and I need that margin:auto to put the div to center – John IP Dec 29 '15 at 12:23
even if you do not remove margin:auto still it will work due to float:left property – prajakta Dec 29 '15 at 12:24

score 1 · Answer 2 · answered Dec 29 '15 at 12:27

Using flexbox might be a good idea, it respects text direction when defined, e.g. <html dir="rtl" ...>.

The alignment can be achieved by setting display: flex and justify-content: flex-end (or different, for example space-between or space-around, if you wish to align more items in a different way) to the parent. For more options see this guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

How to put a div at left or right in pure CSS?

2 Answers2