Hey Everyone
I have a problem, that just wont seem to go away. Here is the setup, i has one outer div with two divs inside, one large on the left and a small div on the right, i need the div on the right to meet the bottom of the outer div, and to always flow with it. No matter what i seem to do, the div just wont flow with the outer div, and just stay at the top of the right div.
So i thought i would ask here, see if anyone has an idea's that i can try??
Thanks for any help :)
9 2500
The height must be specified for a parent element and then the div can reference that and expand to 100% of the parent. iow, set your outer/parent div to the height you wish. If you want it to be 100% of the body, set both html and body to 100%. So body references html and "outer" references body. Now you can have your inner divs ref the outer one and set them to 100% of the outer div. - <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
-
"http://www.w3.org/TR/html4/strict.dtd">
-
<html>
-
<head>
-
<title></title>
-
<meta http-equiv="content-type" content="text/html;charset=utf-8">
-
<style type="text/css">
-
html,body{
-
height:100%;
-
}
-
#outer{
-
height:100%;
-
background-color:#eee;
-
}
-
#left{
-
height:100%;
-
width:400px;
-
float:left;
-
background-color:#ddd;
-
}
-
#right{
-
height:100%;
-
float:left;
-
width:200px;
-
background-color:#ccc;
-
}
-
</style>
-
</head>
-
<body>
-
-
<div id="outer">
-
<div id="left">
-
left
-
</div>
-
<div id="right">
-
right
-
</div>
-
</div>
-
-
</body>
-
</html>
Hi drhowarddrfine
Thanks for the detailed reply. I have tried what you has said but it still will not flow with the page. I don't have a clue why it wont work, i have tried taking different line of code out, to make sure that there isn't any conflict, but nothing seem to make a difference, do you have any other idea's what it could be??
Thanks for your help :)
Then other factors in your code are playing into it and I can't help without a link or the complete code.
Then other factors in your code are playing into it and I can't help without a link or the complete code.
So would you need me to post the html code and the CSS code??
Thanks
Yes, but a link is preferred if the site is online.
Yes, but a link is preferred if the site is online.
Hey drhowarddrfine
Ok i put together a test page, to see if it is something to do with my code, but i got the same result, below is the HTML and the CSS.
If you could take a look that would be much appreciated.
Thanks -
</head>
-
-
<body>
-
-
<div id="outline">
-
-
<div id="left">
-
-
<p>Here is some text, Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,
-
Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here
-
is some text, Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is
-
some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,</p>
-
-
</div>
-
-
<div id="right">Here
-
-
<p>Here is some text, Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,
-
Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here
-
is some text, Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is
-
some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,</p>
-
</div>
-
</div>
-
-
</body>
-
</html>
-
-
<style type="text/css">
-
<!--
-
-
body {
-
height: 100%;
-
margin: 0px;
-
padding: 0px;
-
}
-
#outline {
-
position: relative;
-
height: 100%;
-
width: 900px;
-
padding: 0px;
-
margin-top: 0px;
-
margin-right: auto;
-
margin-bottom: 0px;
-
margin-left: auto;
-
}
-
#left {
-
width: 500px;
-
float: left;
-
height: 100%;
-
position: relative;
-
font-size: 25px;
-
margin: 0px;
-
padding: 0px;
-
background-color: #00CCFF;
-
}
-
#right {
-
width: 300px;
-
float: right;
-
height: 100%;
-
margin: 0px;
-
padding: 0px;
-
position: relative;
-
top: 3px;
-
background-color: #33CC99;
-
}
-
-
-->
-
</style>
-
Ok i see that i didn't style the html, body just the body on that last example!
So i tried that again on my other web page, and sort of got the result i was after, the only problem that i had, is that i have two divs below the main outline div, and it pushed them over to the right, and extended to the bottom of the page!!!
Change your css to this: - * {
-
margin:0;
-
padding:0
-
}
-
-
html,body {
-
height: 100%;
-
}
-
#outline {
-
height: 100%;
-
width: 900px;
-
margin:0 auto;
-
}
-
#left {
-
width: 500px;
-
float: left;
-
height: 100%;
-
font-size: 25px;
-
background-color: #00CCFF;
-
}
-
#right {
-
width: 300px;
-
float: right;
-
height: 100%;
-
background-color: #33CC99;
-
}
Hey
I don't know why but that code will just not work on my main page, i got it working on my test page fine.
So i have found another way around it on the net. Basically you give the padding bottom a valve of say 2500 and you then give the margin bottom a negative value which is the same -2500, and then set the outer divs overflow to hidden, and fingers crossed it has worked a charm so far!!
Thanks for all your efforts with trying to help me on this matter, it is really appreciated :)
Sign in to post your reply or Sign up for a free account.
Similar topics
by: Mary Ellen Curtin |
last post by:
The client wants the page to have both a left border (purple) and a right
border (green).
Is there any way to stretch a background image to fit the viewport? Or
should I divide
the background...
|
by: John Smith |
last post by:
In Mozilla/Netscape, is it possible to make a DIV stretch the length
of a page ithout resorting to the "repeat background
image" trick?
Thank you!
|
by: rkleiner |
last post by:
Is there a regular expression to find the first unmatched right bracket
in a string, if there is one? For example,
"(1*(2+3))))".search(/regexp/) == 9
Thanks in advance.
|
by: Dan V. |
last post by:
Does anyone have any idea why the right column is not aligned with the left
column? It is much lower from the top.
Please comment: http://officeactivate.com/newest/test.shtml
Is it because...
|
by: Zeez |
last post by:
Hello!
I'm looking for a way to stretch an HTML page.
I found a way to zoom into a web page by using this code:
body.style.zoom = 200%. (this piece of code magnifies the page 2 times
larger)...
|
by: Ufit |
last post by:
I have a problem with displaying controls in placeholder that in turn is place in the mid cell
of the table. When I run IE the table doesn't stretch properly even if I set width and ht to 100%
Now...
|
by: pavel.orehov |
last post by:
Hi,
Does anybody knows how to stretch Bitmap in C#.
Bitmap b = Bitmap.FromFile("...");
// stretch code ???
Thanks,
|
by: yuiness |
last post by:
I have this CSS layout that I'd like to use for a personal site:
I want the layout to stretch all the way from the top of the page to the bottom of the page regardless of how little content...
|
by: crazy works |
last post by:
hello
i was working on design new style for games script called onarcade
and i want to stretch it , i mean i want to make the script width full screen
in the script one css file and i had a...
|
by: DolphinDB |
last post by:
Tired of spending countless mintues downsampling your data? Look no further!
In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
|
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: ArrayDB |
last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
|
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: Shællîpôpï 09 |
last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
| |