Reputation: 9527

CSS - div positioning issue

I have a wrapper. Inside that wrapper I have 3 divs. I would like #contentOne standing above #contentTwo and contentThree standing on the right side of those two. I am sure someone can help. Thank you in advance for your replies. Cheers. Marc. (This positioning thing is killing me....)

http://jsfiddle.net/Qmrpu/

My HTML:

<div id="wrapper">
    <div id="contentOne" class="content">contentOne</div>
    <div id="contentTwo" class="content">contentTwo</div>
    <div id="contentThree" class="content">contentThree</div>
</div>

My CSS:

#wrapper{
    width:430px;
    float:left;
    height:auto;
    border:2px solid blue;}

.content{
    border:1px solid black;
    background-color:yellow;
    width:200px;
    height:100px;}

#contentThree{
    height:130px;}

Upvotes: 0

Answers (5)

samra

Reputation: 180

try this:

<div id="wrapper">
    <div id="contentThree" class="content">contentThree</div>
    <div id="contentOne" class="content">contentOne</div>
    <div id="contentTwo" class="content">contentTwo</div>
</div>


#wrapper{
width:430px;
float:left;
height:auto;
border:2px solid blue;}

.content{
    border:1px solid black;
    background-color:yellow;
    width:200px;
    height:100px;}

#contentThree{
    height:130px;
    float: right;
}

Upvotes: 0

Jeff B

Reputation: 30099

Can you put them in floated column wrappers?

<div id="wrapper">
    <div id="column1" class="column">
        <div id="contentOne" class="content">contentOne</div>
        <div id="contentTwo" class="content">contentTwo</div>
    </div>
    <div id="column2" class="column">
        <div id="contentThree" class="content">contentThree</div>
    </div>
</div>

CSS:

.column {
   float: left;
}

http://jsfiddle.net/xbcxs/

Upvotes: 5

Malk

Reputation: 11983

HTML is lacking in providing functions for vertical positioning. They are getting better with newer display values, but you need to limit your audience to only modern browsers. Barring that you need to change the order of the HTML to get the vertical position you want. In this case if you put the 3rd section at the top and gave it a float:right you get what you are after.

http://jsfiddle.net/Qmrpu/1/

Upvotes: 1