Hi
Sorry no screen shots or links...I want to achieve the following visual
effect:
I want three boxes to appear on screen, all within a parent box (so 4
in total).
Concerning the three inner boxes, I want them to appear in a two column
format. One box in the left hand column that will contain an image and
the two other boxes stacked one above the other in the right hand
column that will contain text.
Using relative positioning, I can achieve what I want for the three
internal boxes and this works in Internet Explorer (IE) and in FireFox
(FF).
However, when I add the parent box it "correctly" surrounds the
daughter boxes in IE, but appears as a thin strip in FF (i.e. the
daughter boxes hang out of the bottom of this box).
I can't use absolute positioning because I don't know how much text
these will contain, or how big the image will be.
The HTML text is simply three <div/elements embedded within a parent
<div/>.
Any help would be most appreciated in this.
Thanks
Griff 13 2450
Griff wrote:
Hi
Sorry no screen shots or links...I want to achieve the following visual
effect:
I want three boxes to appear on screen, all within a parent box (so 4
in total).
Concerning the three inner boxes, I want them to appear in a two column
format. One box in the left hand column that will contain an image and
the two other boxes stacked one above the other in the right hand
column that will contain text.
Using relative positioning, I can achieve what I want for the three
internal boxes and this works in Internet Explorer (IE) and in FireFox
(FF).
However, when I add the parent box it "correctly" surrounds the
daughter boxes in IE, but appears as a thin strip in FF (i.e. the
daughter boxes hang out of the bottom of this box).
I can't use absolute positioning because I don't know how much text
these will contain, or how big the image will be.
Guessing, but would the inner boxes be floated. If so declare width and
height on containing div.
Louise
Guessing, but would the inner boxes be floated. If so declare width and
height on containing div.
Louise
Hi Louise
But...I don't know how big the parent box will need to be, because I
don't know how big the daughter boxes will be.
Give me 10 mins or so and I'll post some example HTML and CSS...
Thanks
Griff
Griff schrieb:
Give me 10 mins or so and I'll post some example HTML and CSS...
No, post the URL to a minimal example instead.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)
Okay - here's the tidied up code....The effect in both IE and FF is
that the "daughter" boxes appear below the parent box.
NOTE: if I add [height:5px;] to the CSS for div#Border then it works as
expected in IE, but not in FF. It seems that I'd need to know the
ABSOLUTE height of the parent box, but without knowing the amount of
text of the size of the image I don't see how I can guess at that.
First the HTML
<body >
<div id="Border">
<div id="Left">Left</div>
<div id="Right">
<div id="Top">Top</div>
<div id="Bottom">Bottom</div>
</div>
</div>
</body>
Now the CSS
body
{
margin:0px;
padding:8px;
}
div
{
padding:1em;
margin:1em;
border: solid 1px black;
}
div#Border
{
background-color:#333;
}
div#Left
{
background-color:#555;
position:relative;
float:left;
}
div#Right
{
background-color:#777;
position:relative;
float:right;
}
Griff wrote:
Okay - here's the tidied up code....The effect in both IE and FF is
that the "daughter" boxes appear below the parent box.
NOTE: if I add [height:5px;] to the CSS for div#Border then it works as
expected in IE, but not in FF. It seems that I'd need to know the
ABSOLUTE height of the parent box, but without knowing the amount of
text of the size of the image I don't see how I can guess at that.
<cut markup>
For a more likely approach especially as the generated height of the
left boxes is indeterminate, see http://www.boclair.com/test/contained-floats.html
Louise
Okay - that works in IE but not in FF. I'm using FF 2 beta 1
Griff wrote:
I want three boxes to appear on screen, all within a parent box (so 4
in total).
Go and read brainjar.com and their article on "css positioning"
(Floats are _meant_ to hang out of the bottom of things, unless you
tell them not to. IE gets things wrong again).
Andy Dingley wrote:
Griff wrote:
>I want three boxes to appear on screen, all within a parent box (so 4 in total).
Go and read brainjar.com and their article on "css positioning"
(Floats are _meant_ to hang out of the bottom of things, unless you
tell them not to. IE gets things wrong again).
Or check http://www.quirksmode.org/css/clearing.html for a nice compact
decription/solution.
Grtz,
--
Rik Wasmus
Rik wrote:
Andy Dingley wrote:
>Griff wrote:
>>I want three boxes to appear on screen, all within a parent box (so 4 in total).
Go and read brainjar.com and their article on "css positioning"
(Floats are _meant_ to hang out of the bottom of things, unless you tell them not to. IE gets things wrong again).
Or check http://www.quirksmode.org/css/clearing.html for a nice compact
decription/solution.
I think the quirksmode suggestions is suspect.
There could be no objection to the "old" method of clearing the floats
before closing the containing div but the suggestion to use the overflow
property hack is not a good one in my opinion.
Firefox, for one, treats overflow:hidden (and overflow:visible) as would
be expected; without the containing div having a set or implied height,
its contents cannot be viewed.
As for overflow:auto, who's to know if this will result in some browser
drawing scroll bars. http://www.w3.org/TR/REC-CSS2/visufx...opdef-overflow
Louise
boclair wrote:
Rik wrote:
>Andy Dingley wrote:
>>Griff wrote:
I want three boxes to appear on screen, all within a parent box (so 4 in total). Go and read brainjar.com and their article on "css positioning"
(Floats are _meant_ to hang out of the bottom of things, unless you tell them not to. IE gets things wrong again).
Or check http://www.quirksmode.org/css/clearing.html for a nice compact decription/solution.
I think the quirksmode suggestions is suspect.
Not ideal by any means, but workable.
There could be no objection to the "old" method of clearing the floats
before closing the containing div but the suggestion to use the
overflow property hack is not a good one in my opinion.
Firefox, for one, treats overflow:hidden (and overflow:visible) as
would be expected; without the containing div having a set or implied
height, its contents cannot be viewed.
As for overflow:auto, who's to know if this will result in some
browser drawing scroll bars.
Well, you as the deisgner usually know. It's a method with several prerequisites
(?). I'll only use it on a container with set by either the container itself or
it's parents, or one set dimension which I know is not going to overflow in that
dimension due to content-dimensions, which I'm in control of.
On a completely unpredictable system (CMS's for third parties etc.), it isn't a
true solution, that's right. If only you yourself will be working on it it will
save you a lot of headache/HTML-clutter.
Grtz,
--
Rik Wasmus
On 2006-08-17, Rik wrote:
boclair wrote:
>> As for overflow:auto, who's to know if this will result in some browser drawing scroll bars.
Well, you as the deisgner usually know.
You do not know; you *cannot* know.
You don't know the size of my browser window, or my font size. You
are making an assumption that is responsible for vast numbers of
badly rendered pages on the WWW.
It's a method with several prerequisites (?). I'll only use it on a
container with set by either the container itself or it's parents,
or one set dimension which I know is not going to overflow in that
dimension due to content-dimensions, which I'm in control of.
--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
boclair wrote:
I think the quirksmode suggestions is suspect.
That's because of your calm and generous nature.
I think it's a fecking evil bogosity and would have nothing at all to
do with the perverse idea. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Ken Kast |
last post by:
Here's my situation. I have a statically positioned table that has an image
in a cell. I also have some layers, defined by absolute-positioned DIVs for
some animation. Everything works until I...
|
by: Stephen Weatherly |
last post by:
Could anyone please help me with a problem I am having with my table
widths???
If I have 2 images within a td tag, but using CSS relative positioning I
position one over the top of the second (I...
|
by: Catherine Lynn Wood |
last post by:
I need to know how to overlap DIV content within 'relative' associated
rendering. I am building div layers in the middle of a page and when I set
positioning to absolute in the CSS, it references...
|
by: Wilhelm Kutting |
last post by:
Hi i like to make a complex layout with css.
All the content is inside a container div.
I like to get the following sequence without the css-layout:
logo
title
mainnav
content
i can only...
|
by: Markus Ernst |
last post by:
Hello
Reading the follwing document:
http://www.w3.org/TR/WD-positioning-970131#In-flow
it seems very clear that position:relative should be relative to the parent
element. So in the following...
|
by: Fred Nelson |
last post by:
Hi:
I'm working on one of my first web applications in asp.net 2.0 and I'm
having a problem with absolute versus relative positioning of controls
that I place on pages that use master pages with...
|
by: nonsensitor |
last post by:
I'm just learning xhtml & css, primarily from westciv's online tutorials and css guide. I've run into a couple of problems with a page I'm developing that I can't figure out.
The first problem is...
|
by: mikewse |
last post by:
I have a strange problem where it seems IE is doing the correct layout but Firefox and Safari isn't. I think I'm probably wrong, and there is something in the standards that say behaviour should be...
|
by: Cruelemort |
last post by:
All,
I have a div in my page that has a set width of 1000px, height of
200px, inside this i declare two more div's, both relatively
positioned and floated left, the first is placed to the top...
|
by: slaterino |
last post by:
Hi,
I am in the process of creating a web site at the following address:
http://www.cca-ltd.co.uk/New/en/index.html
At the moment when you hover over the navigation links a list appears
on the...
|
by: ryjfgjl |
last post by:
ExcelToDatabase: batch import excel into database automatically...
|
by: isladogs |
last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM).
In this month's session, we are pleased to welcome back...
|
by: isladogs |
last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM).
In this month's session, we are pleased to welcome back...
|
by: Vimpel783 |
last post by:
Hello!
Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
|
by: PapaRatzi |
last post by:
Hello,
I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
|
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: Defcon1945 |
last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
|
by: af34tf |
last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
|
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...
| |