|
P: 21
|
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 :)
| |
Share this Question
| Expert 5K+
P: 7,435
|
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>
| |
|
P: 21
|
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 :)
| |
| Expert 5K+
P: 7,435
|
Then other factors in your code are playing into it and I can't help without a link or the complete code.
| |
|
P: 21
|
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
| |
| Expert 5K+
P: 7,435
|
Yes, but a link is preferred if the site is online.
| |
|
P: 21
|
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>
-
| |
|
P: 21
|
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!!!
| |
| Expert 5K+
P: 7,435
|
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;
-
}
| |
|
P: 21
|
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 :)
| | | |  Question stats - viewed: 2102
- replies: 9
- date asked: Mar 14 '07
|
