CODEWITHSUNDEEP
htmlcssalignment
user3624831
user3624831

Reputation: 205

Aligning a Centered Div with a Div to its Immediate Right

I am looking to align two divs such that div a is in the absolute center of the page and div b is to the immediate right of div b. div a is 320 px wide and div b is 42 px wide. It is important that div a is in the center and div b is to div a's right (i.e., div a + div b is not in the center). I cannot seem to get this right and have hit a block.

Below is a rough outline of the page layout.

|-----aaaab----|

Upvotes: 0

Views: 83

Answers (2)

Fisnik Tahiri
Fisnik Tahiri

Reputation: 406

simple as this:

<div class="centered-div">
    <div class="attached-div"></div>
</div>

and the css:

.centered-div{
    position: relative;
    margin: auto;
}
.attached-div{
    position: absolute;
    left: 100%;
}

Here's the fiddle

Upvotes: 1

Bokoskokos
Bokoskokos

Reputation: 512

You could have a div that is centred, and nest 2 divs within; left and right with the appropriate widths. The HTML would be:

<div class="centred">
    <div class="left"></div>
    <div class="right"></div>
</div>

The style to centre is:

div.centred {
    width: 404px; /* This is 320 + 42 + 42 */
    height: 100%;
    margin-left:auto;
    margin-right:auto;
}

The left div:

div.left {
    width: 320px;
    height: 100%;
    background-color:green;
    float:left;
    margin-left: 42px;
}

And the right:

div.right {
    width: 42px;
    height: 100%;
    background-color:red;
    float:right;
}

This gives you a centred div that is 320px wide (green) and one on the right (red) that is 42px wide.

FYI: If you're looking to align things easily and responsively, have a look at Bootstrap

Upvotes: 1

Related Questions