CODEWITHSUNDEEP
csspositioning
Jugal Thakkar
Jugal Thakkar

Reputation: 13472

Positioning two child divs one centered and other top-right/bottom-right inside another div

I have two divs inside a container div & I am trying to position one of the child divs at the center (vertical & horizontal) and another at top-left/bottom-right of the container.

Both the child divs contain only text. I tried a few things and was able to get both these styles applied individually, i.e. if only one of the two divs was there it would work as required. I am unable to figure out how do I get both styles to apply simultaneously. I tried playing around with positions and z-index, but due to my limited CSS knowledge I have not been able to get a breakthrough.

Update: I want the text to be centered w.r.t to the outer container.

HTML

Top left works
<div class="container">
    <div class="topLeft">value</div>
</div>
Center Works
<div class="container">
    <div class="center">label</div>
</div>
Both don't work simulaneously
<div class="container">
    <div class="topLeft">value</div>
    <div class="center">label</div>
</div>

CSS

.container {
    border-width:1px;
    width:200px;
    border-style:solid;
    display:table;
    height:300px;
}
.center {
    text-align:center;
    display:table-cell;
    vertical-align:middle;
    z-index:5;
}
.topLeft {
    text-align:left;
    display:table-cell;
    vertical-align:top;
    z-index:10;
}

Demo

http://jsfiddle.net/jugal/E5zGw/

I am mainly targeting IE8+ and chrome and have flexibility to change both html and css if needed

Upvotes: 0

Views: 2989

Answers (2)

Milche Patern
Milche Patern

Reputation: 20452

your cells are behaving like <TD> out of a <TR>.

Just encapsulate your DIVS inside something like a TableRow

http://jsfiddle.net/E5zGw/6/

jsFiddle with background-colors

CSS added :

.table-row {
    display:table-row;
    clear:both;
}

HTML added :

<div class="container">
    <div class="table-row">
        <div class="topLeft">value</div>
    </div>
    <div class="table-row">
        <div class="center">label</div>
    </div>
</div>

Witch is exactly like :

<table style="width:100%">
    <tr>
        <td valign="top" align="left">value</td>
    </tr>
    <tr>
        <td valign="middle" align="center">label</td>
    </tr>
</table>

NOW, let me try to fit it like you think you want it to fit :

jsfiddle.net/E5zGw/15/

<div class="container">
    <div class="topLeft">value</div>
    <div class="center">label</div>
</div>

.topLeft {
    background-color:blue;
    text-align:left;
    display:table-cell;
    vertical-align:top;
    z-index:999;
    position:absolute;
    width:200px;
}

Upvotes: 0

Adrift
Adrift

Reputation: 59799

Just give the .container div position: relative; and then position: absolute; to the children divs to position them simultaneously, using left and top properties:

JsFiddle: http://jsfiddle.net/E5zGw/14

You just need to get rid of the display: table-cell as its not needed if you this route.

Upvotes: 1

Related Questions