SitePoint Sponsor |
|
User Tag List
Results 1 to 4 of 4
Thread: Tableless banner breaking up
-
Sep 28, 2007, 08:14 #1
- Join Date
- Oct 2006
- Posts
- 24
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Tableless banner breaking up
I'm trying to lay out my top banner without using a table. At this point, it looks fine until you start to minimize the size of the browser window. I'd like it to behave the same way it would if it were in a table -- it collapses until it reaches the minimum size of the background images used, then the right margin just disappears off the screen, with the remaining banner looking the same. Now as you narrow the screen, the banner breaks apart into two segments, one on top of the other.
Here's the page:
http://www.rosscustomleather.com/tem.../template.html
Here's the css I've got so far pertaining to the banner:
body {
background-color: #3d271c;
margin: 10px;
padding: 0px;
}
#wrapper {
width: 95%;
margin-right: auto;
margin-left: auto;
}
.banner {
width: 100%;
background-image: url(images/filler.png);
background-repeat: repeat;
}
.floral {
background-image: url(images/floral.png);
background-repeat: no-repeat;
height: 165px;
float: left;
width: 320px;
}
.title {
margin-right: auto;
margin-left: auto;
}
.horses {
background-image: url(images/horses.png);
height: 165px;
width: 344px;
background-repeat: no-repeat;
float: right;
}
-
Sep 28, 2007, 08:32 #2
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
The easiest way to achieve this would be to apply a min-width
Code:.banner { width: 100%; background-image: url(images/filler.png); background-repeat: repeat; min-width: 900px; }
note: I'd put the include to your ie6.css stylesheet between the conditional comments so that any IE6 and below hacks are contained within one stylesheet.
Code:<!--[if lte IE 6]> <style type="text/css" media="screen"> .banner { width: expression((documentElement.clientWidth < 900) ? "900px" : "auto" ); } </style> <![endif]-->
-
Sep 28, 2007, 09:02 #3
- Join Date
- May 2007
- Location
- Portsmouth, UK
- Posts
- 775
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
or just stick a 900px x 0px div inside it to stop the fluidity at a certain point
-
Sep 28, 2007, 09:53 #4
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I'd always try and find a solution that doesn't require extra markup where possible but maybe that's just my approach in trying to keep the HTML as streamlined as possible.
Bookmarks