I have 3 divs on a line, surrounded by a another div(wrapper?) The middle section is content, while the div to the left and right work as borders (images). The middle section expands as should, but the left and right won't follow it. -
<div id="frame_wrapper">
-
<div id="frame_left"></div>
-
<div id="frame_middle">
-
-
content bla bla
-
-
</div>
-
<div id="frame_right"></div>
-
</div>
-
The CSS: - #frame_wrapper {
-
top: -230px;
-
width: 944px;
-
position: relative;
-
z-index: 75;
-
border: 1px solid black;
-
}
-
-
#frame_left, #frame_right, #frame_middle {
-
background-repeat: repeat-y;
-
width: 22px;
-
margin: 0 auto;
-
overflow: auto;
-
}
-
-
#frame_right {
-
background-image: url(skin/new/frame_r.png);
-
float: right;
-
}
-
-
#frame_left {
-
background-image: url(skin/new/frame_l.png);
-
float: left;
-
}
-
-
#frame_middle {
-
background-color: #eeeeee;
-
width: 900px;
-
}
As you can see, there are no height attributes. I've taken them out atm, because no one worked.
The CSS for the document is: - html, body { height: 100%; }
-
-
/* if you remove this then the container disappears in IE */
-
* html #container {
-
height: 99%;
Thankful for replies
5 5458
The middle section is content, while the div to the left and right work as borders (images).
why should they. the do not contain any content (right now), so the height should be 0.
not sure whether it is the best solution, but one that I got working is using nested <div>s and appropriate padding. - <div id="right">
-
<div id="left">
-
<div id="content">
-
<!-- your content -->
-
</div>
-
</div>
-
</div>
- /* fill in your values */
-
#right {
-
padding-right:
-
background-image:
-
background-position:
-
background-repeat:
-
}
-
#left {
-
padding-left:
-
background-image:
-
background-position:
-
background-repeat:
-
}
If I'm not mistaken it's impossible to have all three divisions expand equally, when one has more content than the others with HTML and CSS alone.
Regards, Death
Thanks guys.
So if it's impossible, what do people do in this situation?
Merge the 3 into one, wide image that's being stretched, or the use of tables?
I tried Dormilich's method and I didn't quite make it work, though I'm still at it.
Javascript would be the solution. Get the height of the tallest column and apply it to the other columns.
I think I asked this in another thread but are you using a fixed width on your content column? You have declared a 900px width but is this just for your example or for your actual project?
The width is for the actual project. :)
I have made a fix a the moment.. I've merged the 2 border images with the middle section so that it's an image being stretched (the images were made for stretchyness anyway).
Sign in to post your reply or Sign up for a free account.
Similar topics
by: clintonG |
last post by:
Can somebody direct me to documents or source that supports the use of
collapsible content that is collapsed by default when the page is loaded?
The secondary objective would of course be...
|
by: peter |
last post by:
I use the click-to-expand menu at
http://javascript.internet.com/navigation/click-to-expand-menu.html
This works fine, but is there a way to expand or collapse all the
menus?
An example of how...
|
by: Andrew Robinson |
last post by:
Given HTML text (likely from SQL), is there any method that could be
employed to render server and/or custom controls that are contained inside
of that text? I would be loading content from a...
|
by: Nospam |
last post by:
I don't know what it is I am doing wrong, I am trying to get the menus to
either expand or contract based on their previous states, i.e if already
expanded if clicked again contract, and if...
|
by: Homer J. Simpson |
last post by:
A few weeks ago I asked for suggestions on how to persist a tree's node
state to cookies, without causing postbacks on each click in the tree.
I had a single .aspx file, with a row of buttons on...
|
by: ge5talt |
last post by:
Longtime reader, 1st time poster :)
I am in the process of overhauling a website and replacing an old table-based quirksmode layout with a standards-mode tableless one. I am currently working on...
|
by: cshaw |
last post by:
Hello Everyone, I am having problems with a listbox control. I have a
page with a couple of labels and drop-down lists at the top, and then
below there is a table with two columns, the first column...
|
by: AJM Project |
last post by:
Hello,
I see this is a well known thing and have seen many answers but none have worked for me. It's just a test page I'm making and I've ran into this so I thought I'd ask how to fix it - inline...
|
by: unpresedented |
last post by:
I have a table with one TR and two TDs, one of the TDs has more content (i mean with content: other sub tables) than the other one, this results the following:
the TD with the little content stay...
|
by: CloudSolutions |
last post by:
Introduction:
For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome former...
|
by: ryjfgjl |
last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
|
by: taylorcarr |
last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
|
by: aa123db |
last post by:
Variable and constants
Use var or let for variables and const fror constants.
Var foo ='bar';
Let foo ='bar';const baz ='bar';
Functions
function $name$ ($parameters$) {
}
...
|
by: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
| |