Forum Moderators: not2easy
I am quite the noob at CSS, only recently have I had the need to get my hands "dirty"... ;)
I am transforming a table into divs and this table has something like 3 columns:
two are borders and one is content (which, by the way, is also floating divs.
I have managed to display the content the way I wanted, but without the middle div extending. I want to place the borders left and right of the available space and the middle border occupying all the space in between.
Here's my CSS code so far:
.largeBtn {
width: 100%; height: 70px;
margin: 15px 0;
padding: 0;
}.leftBorder {
float: left;
position: relative;
width: 10px; height: 70px;
text-align: right;
vertical-align: middle;
background: url(/path/largeBtn_left.gif) left top repeat-x !important;
}
.middleContent {
float: left;
position: relative;
background: url(/pf/img/largeBtn_middle.gif) left top repeat-x !important;
vertical-align: bottom;
padding-left: 0;
/* width: 100%; */
height: 100%;
}
.rightContent {
float: left;
position: relative;
width: 10px; height: 70px;
text-align: right;
vertical-align: middle;
background: url(/pf/img/largeBtn_right.gif) left top repeat-x !important;
}
and my HTML code:
<div class="largeBtn">
<div class="leftBorder">
</div>
<div class="middleContent">
Some meaningful content!
</div>
<div class="rightBorder">
</div>
<div style="clear: both;"></div>
</div>
I have been searching the net for a solution to my problem, but to no avail. Anyone out there knows how I can do this?
I have tried applying those little tutorials about formatting your page with three columns and all that. Unfornately, as far as I have acknowledged, this only works with absolute positioning.
Since the page content is dynamic and rendered at runtime I can't know where to position the elements... They must be relative to their father.
Thanks,
Ric
The elements that are rendered at runtime are absolutely positioned? They have css applied?
So to answer you, no, the left and right borders will never contain any content. Yes, they're strictly containers for a 70px tall colored image. The end result would be something like what you said bgImage¦bgImage (repeating itself along the x-axis) with fgContent¦bgImage.
I do need two things:
1. The middle div, which is floating, to stretch so it ocuppies all the remaining horizontal space (I can't do it with "width: 100%" because it makes the div occupy ALL the horizontal space leaving none to the left and right border... :( );
2. and if the content is too large and wrapped below the 70px tall bg image, the image to stretch vertically.
Of these two, what I really need is the first one. To stretch horizontally the middle floating div.
And no, no elements in the whole HTML page have any absolute positioning. And to the best of my knowledge all the elements have CSS applied.
Thanks.
Ric
(one of many possible ways forward:)
Try not to float your middle div. Float the other left and right and use margins to keep the middle one out from under the floated ones.
I'd also be careful with height definitions in there.
Item2:
You can't directly stretch a float directly cause something next to it is bigger.
But there is a really nice example of how to do it in the profile of one of the moderators: SuzyUK [webmasterworld.com]'s flexi float technique might be a good move forward. Sorry can't do direct link I'm afraid. Still do take a look ... the result she got is quite nice.
I'm not sure I understand your point#2. There are many ways to accomplish #1. I'm going to paste a suggestion here -- this may not be the best answer or approach but it works
<style type="text/css">
<!--
body {text-align:center;}
#wrapper {text-align:left; margin:0 auto; width:80%;}
#leftimage {background-color:#0066CC; width:10px; float:left;}
#content {float:left;}
#rightimage {background-color:#0066CC; width:10px; float:right;}
#content p {padding:0 12px;}
#rightimage p {padding:0;}
</style>
</head>
<body>
<div id="wrapper">
<div id="leftimage"><p> </p></div>
<div id="content"><div id="rightimage"><p> </p></div>
<p>all content goes here and width of actual container is limited to where it hits on the right side, although smaller content will still look like it's taking up the whole space </p>
</div>
</div>
</body>
</html>
The main things are:
- the floats are only on the images. The images do not have to be in divs, you can apply the style directly to the image
- the content has no width applied. it will stretch as needed but stop when it bumps into the right side
Pick up a book on css or poke around here to see how floats work
I tried floating the left div and the right div only. The center div expands as I wanted, but with two unexpected (at least for me) side effects: There's a gap of maybe two pixels between the left floating div and the content div; And the right div wraps under the content div. Even if I specify the right-margin for the content div.
Maybe I'm really in need to pick up a book on CSS. ;)
Thanks,
Ric
good luck!
this "table", is it to be used many times (I've picked up the word button from your code) or is it a page layout
if it's a button/box is it always different heights, max height etc.. and the images are they all repeating or are the sides always a 70px fixed height image
I'm asking because I don't think this should be made with floats at all just because the "table" had three columns being as the left and right sides are borders there should be no need to have three separate images at all - however that does depend on the effect being created
it is possible to create "button" effects just using one image and adjusting its background position in nested divs (we can't have multiple backgrounds yet ;)) - is it possible to describe the whole image.. i.e. is a rounded corner gradient type thing or what.
floats cannot stretch to their parent heights, which is why I think this is the wrong tack if the button height is dependant on the center content.
sorry loads of questions
the gap is possibly the ie 3px jog? - but I'm not sure what code/browser you're using so that's a guess
This "table" isn't quite a button. I've picked up where someone else left and, as far as I understood, the intention is to create an area in the site with highlights. Each highlight has this "large button" appearance which must occupy all the available width and if possible stretch the height to hold its content. Normal table behavior.
I was suggesting floats because, in my little (to none) experience and following someone's else advice, that's the only way to place several div's side by side.
The whole image is, as you guessed, a rounded corner gradient image, much like a large button with a gradient of two colors, white to light blue. Maybe three colors: a slightly darker blue a little under the center. And it has a thin dark border around it.
I don't know if it's possible to create the button effect just using one image as you say, but I'm trying to sell the idea of making the background a color gradient, to my bosses. It will look a little different but I believe it'll be easier and less cumbersome to the client... And less bandwidth to the server! ;)
The browsers I'm developing to (ie, testing against) are IE7 and FF2. I'm considering downloading Opera 7 to test in it also. The gap can't be the IE 3px jog you mention as it happens in FF2 also.
The code I wrote to float only the borders is this:
.largeBtn {
width: 100%;
padding: 0;
}.leftBorder {
float: left;
width: 10px; height: 70px;
text-align: right;
vertical-align: middle;
background: url(/path/largeBtn_left.gif) left top repeat-x !important;
}
.middleContent {
background: url(/pf/img/largeBtn_middle.gif) left top repeat-x !important;
vertical-align: bottom;
padding-left: 0;
width: 100%;
}
.rightContent {
float: right;
width: 10px; height: 70px;
text-align: right;
vertical-align: middle;
background: url(/pf/img/largeBtn_right.gif) left top repeat-x !important;
}
Thanks,
Ric
After some searching through the web I found some IE commands to do that... But I wanted something CSS pure to work on all browsers.
But it is no longer relevant as priorities have shifted and send this alteration to the end of the queue. I'm going to continue using the tables and bg images... :(
Anyway, thank you all for all your great inputs.
Though I hadn't got my solution I learned a lot in the process! ;)
SuzyUK, if you don't mind I'm still interested in knowing how one can simulate this layout without floating divs. It's now more of a personal curiosity than professional need... Nevertheless...
Thank you all.
Ric
