Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

floating and positioning div

Status
Not open for further replies.

javascript123456

Technical User
Feb 18, 2011
4
0
0
HK
5549929422_297dbaba1b.jpg


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
/////////////////////////////////////////////////////////////////

#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;
}
 
This part is not directly possible:
Code:
divB stays between divA and divC and fill the empty space between them
As there's no way for divB to know how much space is left.

With that said you could potentially fake it.

Try his:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>
<head><title>Panels</title>
<style type="text/css">
body,html{
width:100%;
height:100%;
}
#divD{
height:100%;
width:500px;
margin-left:auto;
margin-right:auto;
background-color:#DD9977;
}

#abcwrap{
margin:0px;
pading:0px;
position:fixed;
bottom:0px;
width:100%;
height:30px;
border:2px solid gray;
overflow:auto;
background-color:#7799DD;
}
#divA{
float:left;
background-color:#77DD99;
width:100px;
height:100%;
}

#divC{
float:right;
background-color:#77DD99;
width:100px;
height:100%;
}
#divB{
display:inline-block;
}
</style>
</head>
<body>

<div id="divD">This is DIV D</div>
<div id="abcwrap">
  <div id="divA">This is Div A</div>
  <div id="divB">This is Div B</div>
  <div id="divC">This is Div C</div>
</div>

</body>
</html>




----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
That's still faking the width. The content div is as wide as the screen. It doesn't really fill in left over space it fills everything while the side bars are simply floated over it.

The website also fails to validate with 22 errors.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
I've long since stopped caring about the dumb W3c "validator".

The 22 errors are because I use "<>" as seperators in the title element, Maybe one day I'll code it to use HTML Entities

while the side bars are simply floated over it.
the net effect is that the content of the centre element stay within the constraints
There will, of course come a point where the content will wrap under the floats, but it's something I threw together in about 10 mins and if I put a bit of thought into will solve it :D

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
 
My original point remains though. There's no real way to get a div to fill the remaining space. However, [red]you CAN fake it[/red], make it look like it is filling it up, in many different ways.

With that said, adding appropriate padding to the div solves the wrapping issue.




----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top