DIV对齐和定位问题

Question

I'm having a hard time on this DIV alignment and positioning. I have a parent DIV width=980px(yellow) and child DIV's: left width=600px(red) and in right width=280px(green) . And in right DIV i want to display vertical arrangement of images(white boxes). Here the sample image:

Here's my code so far: JSFiddle

Thank you in ADVANCE!

Answer 1

Question 1 - Positioning divs with CSS

Example

JSFiddle

CSS

<style>
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: Helvetica;
}
.yellow {
    width: 980px;
    height: 600px;
    background: yellow;
    padding: 10px;
}

.red {
    float: left;
    width: 600px;
    display: block;
    height: 100%;
    background: red;
    margin: 0px 10px 0px 0px;
}

.green {
    float: right;
    width: 280px;
    height: 100%;
    background: green;
    padding: 10px;
}

.white {
    background: white;
    height: 180px;
    margin: 0 0 10px 0;
}
</style>

HTML

<div class="yellow">
<div class="red"></div><!-- end red -->
<div class="green">
<div class="white"></div>
<div class="white"></div>
<div class="white"></div>
</div><!-- end green -->
</div><!-- end yellow -->

---

Question 2 - Using CSS3 for a responsive layout

To answer your additional question, you can use CSS3 media queries for a responsive layout that will display the "Green" div on top of the "Red" div if the window size is under a certain width.

Example

JSFiddle .

Answer 2

Here is what you want http://jsfiddle.net/ZZ5AD/4/

<div>
    <div class="parent">
        <div id="left" class="child">
                Yo
        </div>
        <div id="right" class="child">
            <div class="baby">
                lol
            </div>
            <div class="baby">
                lol
            </div>
            <div class="baby">
                lol
            </div>
        </div>
    </div>
</div>

css

.parent{
    width: 900px;
    height: 400px;
    background: yellow;
    padding: 10px 10px 10px 0px;
}
.child{
    float: left;
    margin: 0px 0px 0px 10px;
    height: 100%;
}
#left{width:600px;     background: red;}
#right{width:280px;     background: green;}
.baby{
    height: 30%;
    width: auto;
    margin: 10px 10px 0px 10px;
    background: white;
}

Answer 3

I don't know if I understand correctly your question and if this will help you
If in your question you are referring to the fact that the yellow div doesn't include the items on the right you can try this code for parent element content(overflow:hidden)

#content {
    margin: 30px 0 50px;
    padding: 5px 50px;
    width: auto;
    height:auto;
    background:yellow;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
    opacity:0.8;
    text-align:justify;
    overflow:hidden;
}

If this solution does not suit your needs, i apologize for making you lose time.

Answer 4

Html

<div id="main">
    <div id="leftd">
    </div>
    <div id="rightd">
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

CSS

#main {
    width:980px;
    background:yellow;
    padding:20px;
    float:left;
}

#leftd {
    background:red;
    height:400px;
    width:600px;
    float:left;
}

#rightd {
    background:green;
    height:400px;
    width:360px;
    float:right;
}

#rightd div
{
    height:100px;
    background:white;
    margin:20px;
}