CODEWITHSUNDEEP
htmlcss
Eray
Eray

Reputation: 7128

Aligning Two DIVs

I have a web page like this (codes). AS you can see, there is a content div . And a little div which fixed to page, and scrolling with it. I want to align it to content div's left. I t will be like this page. There is a small fixed box which containing social sharing buttons. It's aligned to contents left. I want to do like this.

Upvotes: 1

Views: 94

Answers (2)

NGLN
NGLN

Reputation: 43664

Try this update of your fiddle. I think it does what you want, but there are much nicer solutions when the order of the two div's can be rearranged.

Upvotes: 1

Lucas
Lucas

Reputation: 14979

you need to modify your css for your sosyal-paylasim div to this (notice the last 2 elements):

#sosyal-paylasim {
    background-color: #F3F6FE;
    border-color: #A5B2D0 #DBE4F3 #DBE4F3;
    border-style: solid;
    border-width: 2px 1px 1px;
    box-shadow: 0 2px 3px #E2E2E2;
    min-height: 150px;
    overflow: hidden;
    position: fixed;
    top: 200px;
    width: 64px;
    z-index: 100;

    left: 50%;
    margin-left: -490px;
}

Further explanation can be found here.

----------- EDIT TO MAKE DIV OUTSIDE CONTAINER ---------------

Per your comment, if you want it outside of the container, use this:

#sosyal-paylasim {
    background-color: #F3F6FE;
    border-color: #A5B2D0 #DBE4F3 #DBE4F3;
    border-style: solid;
    border-width: 2px 1px 1px;
    box-shadow: 0 2px 3px #E2E2E2;
    min-height: 150px;
    overflow: hidden;
    position: fixed;
    top: 200px;
    width: 64px;
    z-index: 100;

    left: 50%;
    margin-left: -557px;
}

The trick is that you are centering the div with the left: 50%, and then pushing it back to the left by half the width of the main container (plus the width of the div(64px) plus both borders for the div(2px) plus the left border for the container (1px) to make it outside).

Upvotes: 1

Related Questions