how to arrange 3 divs(left/bottomcenetr/topright) inside div in html? - css

Question

i have trying to achieve this
| Div | |Div nav wrapper|
| logo |
|container|| Div banar container |
| || |
i hv tried this
<div class="grid_12">
<!--logo_container start here-->
<div id="logo_container">
</div>
<div style="margin-top: 57px" class="grid_13">
<div id="banar_container">
</div>
</div>
<!--logo_container end here-->
<div id="nav_wrapper">
<ul id="nav">
<li class="current_page_item">Home</li>
<li>My Profile</li>
<li>LogOut
</li>
</ul>
</div>
<!--#nav_wrapper-->
</div>
and the css are
.grid_12 {
width:940px;
}
.grid_13 {
width:851px;
}
#logo_container{
float:left;
margin-top:20px;}
#logo{
background:url(../images/bp.jpg) no-repeat left;
width:100px;
float:left;
height:100px;
}
#banar_container
{
float: left;
}
#banar
{
background:url(../images/Banner1.png) no-repeat left;
width: 851px;
float:left;
height: 71px;
}
#nav_wrapper {
position:relative;
display:inline;
float:right;
margin-right:25px;
margin-top:6px;
height:50px;
}
its not coming that way.. so what should i do?
this is my complete code ... this is what i am trying but failing to do it ... so guys pls take a look at this and tell me my fault
guys i am still struggling with this

Answer 1

I hope you'll find this example useful. Notice that, as you said, the size is fixed but still fluid relative to it's parent by using percentage.
HTML
<div id="example">
<div class="box01"></div>
<div class="box02"></div>
<div class="box03"></div>
</div>
​CSS
#example {
width: 400px;
height: 400px;
}
div.box01 {
float: left;
width: 20%;
height: 100%;
background-color: #eee;
}
div.box02 {
float: right;
min-width: 100px;
min-height: 100px;
background-color: #ccc;
}
div.box03 {
float: right;
width: 80%;
min-height: 100px;
background-color: #aaa;
}​
Code Example

Answer 2

The trick is to realize you need more divs than just those three. That is to say, divs 2 and 3 need to have a parent that is a sibling of div 1. Try something like this: http://codepen.io/anon/pen/rLDqc
HTML:
<div id="left">This is your div on the left</div>
<div id="center">
<div id="main">Hello, this is the third div</div>
<div id="right">This is the div in the top right</div>
</div>
<div class="clear"></div>
CSS:
#left{
width:30%;
background:red;
height:100px;
}
#center{
width:70%;
background:blue;
height:100px;
}
#left, #center{
float:left;
}
#right{
position:relative;
display:inline;
float:right;
}
#main{
margin-top: 57px;
float: left;
}
.clear{
clear:both;
}

Answer 3

You may do something like this:
<div class="wrapper">
<div class="div1"></div><div class="div2"></div>
<div class="div3"></div>
</div>​
and CSS:
div{border:solid 1px black;}
.div1 {
width:50px;
height:100px;
float:left;
}
.div2 {
width:50px;
height:18px;
float:right;
}
.div3 {
width:250px;
height:80px;
float:left;
}
.wrapper{
width:304px;
border:none;
}​
Demo
Or maybe even something like this: http://jsfiddle.net/4YX9H/1/ - width and height of div2 may be almost any (it just must be not wider than its parent)

Answer 4

#div1 {
width: 100%;
}
#div2, #div3, #div4 {
width: 33.3%;
float: left;
}
<div id="div1">
<div id="div2"></div><div id="div3"></div><div id="div4></div>
</div>
Change width of inside divs according to your needs.

Answer 5

Most confusing job in web designing for me is to align divs like these but if you understand every aspect of float, display and some other properties important for layout designing then you can easily create such layouts.
Check this fiddle for an example
http://jsfiddle.net/DeepakKamat/xQKXz/1/
The HTML :
<div class="container">
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
</div>​
The CSS :
.container {backgroundcolor:yellow;display:block;width:400px;height:150px;padding:10px;}
.container div {margin:2px;color:white;}
#div1 {background-color:blue;width:20%;height:100%;border:2px dashed white;float:left;}
#div2 {background-color:green;display:inline-block;width:20%;height:70px;float:right;border:2px dashed white;}
#div3 {background-color:red;display:inline-block;width:76%;height:48%;border:2px dashed white;}​
I hope this helps you.

Answer 6

Not sure what is the values of your div width and height.
Check this DEMO
Updated DEMO