| You are here: DEVPPL ‹ Forum ‹ Programming ‹ CSS Forum |
NOTIFICATIONS
|
|
|||||||||||||||
Login |
floating and positioning div
2 posts
• Page 1 of 1
0
floating and positioning div
by Javascript » Tue Mar 22, 2011 12:58 pm
I am trying to make some divs arranged look like the picture attached
- div container has flexible width
- divA and divC has fixed width and located at two sides of the window,
- divB stays between divA and divC and fill the empty space between them
- divA, divB and divC must be at the bottom of the div container
finally, - there is divD (orange area), it is overlaped on divB, in the middle of div container
the following code is what i am working now, but cant work well
///////////////////////////////////////////////////////////////////
[ICODE]#div_container{
position:relative;
height:300px;
}
#divD{
width:500px;
height:300px;
position:absolute;
margin: auto;
left:0; right:0;
}
#divABC{
height:30px;
clear:both;
}
#divA{
width:100px;
height:30px;
float:left;
}
#divC{
width:100px;
height:30px;
float:right;
}
#divB{
height:30px;
margin-left:100px;
margin-right:100px;
}[/ICODE]
- Javascript
- Reputation: 0
- Posts: 2
- Joined: Fri Feb 18, 2011 4:50 pm
- Highscores: 0
- Arcade winning challenges: 0
0
Re: floating and positioning div
by Rajmv » Mon Jul 25, 2011 3:47 am
- Code: Select all
<html>
<head>
<style>
#container{
background : blue;
position:relative;
height:300px;
}
#divD{
background : orange;
width:500px;
height:300px;
position:absolute;
margin: auto;
left:0; right:0;
}
#divA, #divB, #divC{
height:30px;
vertical-align:bottom;
}
#divSpacer {
height:270px;
}
#divA{
background : green;
width:100px;
height:30px;
float:left;
}
#divC{
background : green;
width:100px;
height:30px;
float:right;
}
#divB{
background : yellow;
height:30px;
margin-left:100px;
margin-right:100px;
}
</style>
</head>
<body>
<div id="container">
<div id="divD">
page
</div>
<div id="divSpacer"> </div>
<div id="divA">
left
</div>
<div id="divC">
right
</div>
<div id="divB">
middle
</div>
</div>
</body>
</html>
- Rajmv
- Reputation: 0
- Posts: 103
- Joined: Thu Jul 14, 2011 8:22 am
- Highscores: 0
- Arcade winning challenges: 0
|
|