Responsively center two elements on same level

HTML & CSS
1

Hi all

I have a jsfiddle here - http://jsfiddle.net/w2tbefap/

It’s a simple css problem.

I have a two separate elements (div’s here).

The two elements have different widths.

I need to responsively center the elements next to each other so it is positioned like in the bottom example. The bottom example is just a centered image.

.block-1{
    border: 1px solid red;
    height: 100px;
}

.content{
    border: 1px solid green;
    position: relative;
}

.block-1-1{
    background: blue;
    width: 100px;
    height: 50px;
    //float: left;
    position: absolute;
    right: 50%;
    margin-right: 20px;
}

.block-1-2{
    background: yellow;
    width: 300px;
    height: 50px;
    //float: right;
    position: absolute;
    left: 50%;
    //right: 0;
}



.block-2{
    border: 1px solid red;
    height: 100px;
}

.content-2{

    text-align: center;
}
2

Do note though that your HTML structure could be cleaned up (less elements) although I have left it intact since I do not know whether it’s possible (I dunno what goals this block has…)

3

ttmt,

.content {
    border: 1px solid green;
    text-align: center;    /* ADD ME */
    position:relative;   /* DELETE ME */
}
.block-1-1 {
    background: none repeat scroll 0 0 blue;
    display: inline-block;    /* ADD ME */
    width: 100px;
    height: 50px;
    margin-right: 20px;
    position:absolute;   /* DELETE ME */
    right:50%;       /* DELETE ME */
}
.block-1-2 {
    background: none repeat scroll 0 0 yellow;
    display: inline-block;    /* ADD ME */
    width: 300px;
    height: 50px;
    position:absolute;   /* DELETE ME */
    left:50%;       /* DELETE ME */
}

Oops. Ninja’d by Ryan

I believe someone has mentioned to you before that those leading slashes in your CSS are not valid comment marks and they render a portion of that CSS unworkable.

When you say “responsively”, what do you mean? I don’t see any media queries in play. Do you mean “fluid”?

1 Like
4

Is there a way of doing this without setting a width on the blocks. One of the blocks will contain a timer which will change the width of the element.

5

Sorry I meant fluid not responsive.

Sorry I know the // aren’t valid in css, I use them in jsfiddle when I’m trying stuff out.

6

There’s no content in the boxes so if I remove the width, nothing will show.

7

The blocks, -1-1 and -1-2, are set to “inline-block”. A width is optional. By default, they “shrink to fit” whatever is inside. They are centered by virtue of “text-align:center” in their parent.

(I’m gonna buzz out.)

8

Yes I see about the width.

If the blocks are different heights is it possible to center them vertically.

I’ve done it here using a margin but I don’t know if the elements will be set heights.

I would normally center block vertically with display: table; but I’m using display:inline; to center horizintally.

9

“inline” or “inline-block”?

Try this: (This is a working page. Copy the whole thing to a new file and open it in your browser.)

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>template</title>
<!--
http://www.sitepoint.com/community/t/responsively-center-two-elements-on-same-level/118116/
Apr 9, 11:14 AM
ttmt
-->
    <style type="text/css">

.block-1 {
    display: table;
    height: 100px;
    width: 100%;
    border: 1px solid red;
}
.content {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    border: 1px solid green;
}
.block-1-1 {
    display:inline-block;
    vertical-align:middle;
    width: 100px;
    height: 70px;
    background: blue;
}
.block-1-2 {
    display:inline-block;
    vertical-align:middle;
    width: 300px;
    height: 50px;
    background: yellow;
    margin-left:20px;
}
.block-2 {
    height: 100px;
    border: 1px solid red;
}
.content-2 {
    text-align: center;
}

    </style>
</head>
<body>

<main>
    <div class="block-1">
        <div class="content">
            <div class="block-1-1"></div>
            <div class="block-1-2"></div>
        </div>
    </div>
    <div class="block-2">
        <div class="content-2">
            <img src="http://i676.photobucket.com/albums/vv121/ttmt_2009/Screen%20Shot%202015-04-09%20at%2016.02.44_1.png">
        </div>
    </div>
</main>

</body>
</html>
10

When using display:inline-block you need to alter the default vertical alignment so remove your bottom margin and use vertical-align:middle instead (see Ron’s example above).

display:inline-block;
vertical-align:middle;

That will align the inline-blocks vertically in respect to other inline-blocks on the same line. It will not verticallly center the blocks in respect to a parent’s height and you would need display:table/table-cell for that (as also seen in Ron’s example above).

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.