| Author |
Trying non-table approach
|
|
|
| I am trying to create a a three column page with fixed size left and
right columns and sretching middle one that uses left and right margins
to give space to the left and right columns. It worked very well. Now i
am trying to add in the middle DIV several DIV blocks with floating to
hold images. I followed the instructions in
http://alistapart.com/stories/practicalcss to make the container DIV
expand with the content floating DIVs (uisng spacer DIVs) but something
is odd. Try this and tell me what is wrong:
<html>
<head>
<style>
..thumb {
width:120px; height:120px; margin: 5px; float: left; background-color:
#FF9900;
}
..leftBar {
float: left;
width:100px;
background-color: #009933;
}
..rightBar {
float: right;
width:100px;
background-color: #009933;
}
..middleContainer {
background-color:#CCFF00; margin-left:110px; margin-right:110px;
}
..spacer {
clear:none
}
</style>
</head>
<body>
<div class="leftBar">Content for New Div Tag Goes Here</div>
<div class="rightBar">Content for New Div Tag Goes Here</div>
<div class="middleContainer">
<div class="spacer"> </div>
<div class="thumb">Thumb</div>
<div class="thumb">Thumb</div>
<div class="thumb">Thumb</div>
<div class="thumb">Thumb</div>
<div class="thumb">Thumb</div>
<div class="thumb">Thumb</div>
<div class="thumb">Thumb</div>
<div class="thumb">Thumb</div>
<div class="spacer"> </div>
</div>
</body>
</html>
| |
|
| I made some changes to my code. The code page below works perfectly in
FireFox but has odd behavior in IE7. The thumb DIV does not comply with
container edges and only wraps when the space available for it is 0,
unlike the desired behavior which is wrap contents if the space
available is less than width. Also the last spacer DIV causes container
to jump below left and right DIVs.
<html>
<head>
<style>
..thumb {
width:120px; height:120px; margin: 5px; float: left; background-color:
#FF9900;
}
..leftBar {
float: left;
width:100px;
background-color: #009933;
}
..rightBar {
float: right;
width:100px;
background-color: #009933;
}
..middleContainer {
background-color:#CCFF00; margin-left:110px; margin-right:110px;
}
..spacer {
clear:both}
</style>
</head>
<body>
<div class="leftBar">Content for New Div Tag Goes Here</div>
<div class="rightBar">Content for New Div Tag Goes Here</div>
<div class="middleContainer">
<div class="thumb">Thumb</div>
<div class="thumb">Thumb</div>
<div class="thumb">Thumb</div>
<div class="thumb">Thumb</div>
<div class="thumb">Thumb</div>
<div class="thumb">Thumb</div>
<div class="thumb">Thumb</div>
<div class="thumb">Thumb</div>
<div class="spacer"> </div>
</div>
</body>
</html>
shady wrote:
> I am trying to create a a three column page with fixed size left and
> right columns and sretching middle one that uses left and right margins
> to give space to the left and right columns. It worked very well. Now i
> am trying to add in the middle DIV several DIV blocks with floating to
> hold images. I followed the instructions in
> http://alistapart.com/stories/practicalcss to make the container DIV
> expand with the content floating DIVs (uisng spacer DIVs) but something
> is odd. Try this and tell me what is wrong:
>
> <html>
> <head>
> <style>
> .thumb {
> width:120px; height:120px; margin: 5px; float: left; background-color:
> #FF9900;
> }
> .leftBar {
> float: left;
> width:100px;
> background-color: #009933;
> }
>
> .rightBar {
> float: right;
> width:100px;
> background-color: #009933;
> }
>
> .middleContainer {
> background-color:#CCFF00; margin-left:110px; margin-right:110px;
> }
>
> .spacer {
> clear:none
> }
> </style>
> </head>
>
> <body>
> <div class="leftBar">Content for New Div Tag Goes Here</div>
> <div class="rightBar">Content for New Div Tag Goes Here</div>
> <div class="middleContainer">
> <div class="spacer"> </div>
> <div class="thumb">Thumb</div>
> <div class="thumb">Thumb</div>
> <div class="thumb">Thumb</div>
> <div class="thumb">Thumb</div>
> <div class="thumb">Thumb</div>
> <div class="thumb">Thumb</div>
> <div class="thumb">Thumb</div>
> <div class="thumb">Thumb</div>
> <div class="spacer"> </div>
> </div>
> </body>
> </html>
|
|
|
|
| Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |