CODEWITHSUNDEEP
htmlcss
davey
davey

Reputation: 1564

DIV layout aligning div to the right using float or in-block

I'm trying to align a few divs into this structure but nothing is working.

<div>
     <div>top</div>
     <div>middle
          <div>left</div> <div>right</div>
     </div>
     <div>bottom</div>
</div>

Ive tried using floats with abosolutes, blocks, etc closest im getting is with block-inline but the div which i need aligned right just sits up close to the left div,ived add text-align right with no joy.

Many Thanks D

Upvotes: 1

Views: 110

Answers (3)

mohamed elbou
mohamed elbou

Reputation: 1857

you can do this in different ways, one through float css property, make sure you specify the width as in this example:

<div class="container">
<div class="top">top</div>
<div class="middle">
   <div class="left">left</div> <div class="right">right</div>
</div>
<div  class="bottom">bottom</div>

and your css should look like this:

.left{
float:left;
width:50%;
background:green;
}
.right{
float:right;
width:50%;
background:blue;
}
.bottom{
clear:both;
}​

see here http://jsfiddle.net/M3met/1/

Upvotes: 0

marius_5
marius_5

Reputation: 501

try this

<div>
    <div>top</div>
    <div>
        <div style="float:left;">left</div>
        <div style="float:left;">right</div>
    </div>
    <div style="clear:both;">bottom</div>
</div>

the bottom div with clear:both is probably not enough but does the trick in this particular example

google clearfix for this

Upvotes: 1

Wouter Dorgelo
Wouter Dorgelo

Reputation: 11978

Give the left and right div a width and let them float

Make sure you also clear the float by adding an extra div below with: clear: both;

Code:

<div id="wrap">
     <div id="top">top</div>
     <div id="mid">
         <div id="left">left</div>
         <div id="right">right</div>
         <div class="clear"></div>
     </div>
     <div id="bot">bottom</div>
</div>​

CSS:

div {
    background: #ccc;
    height: 15px;
    margin-bottom: 10px;
}

.clear {
    clear: both;
}

#wrap {
    width: 400px;
}

#top {

}

#mid {

}

#left {
    float: left;
    width: 200px;
}

#right {
    float: left;
    width: 200px;
}

#bot {

}
​

See code in action: http://jsfiddle.net/GZg6y/

Upvotes: 0

Related Questions