CODEWITHSUNDEEP
csshtml
Nutritioustim
Nutritioustim

Reputation: 2738

2 Divs: Right-Centered, Left-overhang

I have a parent div, and 2 child divs. I want [child 2] to be centered in the parent. And I want [child 1] to hang over the left side of the parent. If I I give [child 1] a position of absolute, I can make the child left-hang outside of the container. However, [child 2] is still vertically displaced by the height of [child 1]. 

[c1][   [c2]   ]

I've worked up an example in this jsFiddle. Any insight is appreciated.

Thanks Tim

Upvotes: 0

Views: 304

Answers (2)

Pieter
Pieter

Reputation: 1833

Use this structure:

HTML

<div class="div_container"> 

    <div class="div_left">

    </div>

    <div class="div_right">

        <div class="div_right_content">

        </div>

    </div>

</div>

CSS

div {

    position: relative;
    height: 200px;
    background: yellow;

}

.div_container {

    width: 500px;
    margin: 0px auto;

}

.div_left {

    width: 200px;
    float: left;

}

.div_right {

    width: 300px;
    float: right;
    background: blue;

}

.div_right_content {

    margin: 0px auto;
    width: 100px;
    background: red;

}

jsFiddle: http://jsfiddle.net/Xk7fP/1/

Upvotes: 0

Yair
Yair

Reputation: 192

Your .slide-left-overhang (which is child 1, right?) has position: relative. Set it to position: absolute and it won't interfere anymore.

Other notes: .slide-container-content has a width that is greater than its containing element - set it to 100% or whatever width you want the text to be, and then set your margin autos.

You set a bunch of <p> tags inside of an <h4> - I'm not sure what you plan to do with that, but it's semantically troubling.

here, see my update (minor tweaks) of yours: http://jsfiddle.net/Ye5us/

Upvotes: 1

Related Questions