...

View Full Version : Help in Web Template Layout



moneysharma
05-19-2012, 08:45 PM
I am making a template. but the text in the pink colon is not coming only in it,that is it is moving into next div[Shown in image]. please help. do tell why is this happening:confused:
http://i50.tinypic.com/28sneib.png



CSS Code


body{
margin:60px;
background-image:url('bg.jpg');
}

#container{
background-color:#FFFAF0;
width:100%;
height:100%;
}

#header{
width:100%;
height:180px;
background-color:yellow;
}


#innercontainer{
width:100%;
height:100%;
background-color:red;
}

#leftcol{
float:left;
width:200px;
min-height:100%;
background-color:green;
}

#rightcol{
width:100%;
min-height:100%;
background-color:pink;

}

#bottom{
clear:both;
width:100%;
height:100%;
background-color:blue;
}



HTML PAGE:


<html>


<head>
<link rel="stylesheet" type="text/css" href="homepage.css">



</head>


<body>
<div id="container">

<div id="header">

</div>
<div id="innercontainer">

<div id="leftcol">

</div>

<div id="rightcol">
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>

</div>

</div>

<div id="bottom">

</div>



</div>

</body>


</html>

sunfighter
05-20-2012, 12:36 AM
If you remove the background-color:blue; from CSS #bottom you will see that the pink div goes a lot futher then what you think it does. You have no height set in any of your divs. So your text causes the div to expand. If your remove some of your <p>text</p> you can watch it shrink.

Both the #leftcol and #rightcol are in the #innercontainer, set the height of all of them to 550px.

#innercontainer{
width:100%;
height:550px;
background-color:red;
}

#leftcol{
float:left;
width:200px;
min-height:100%;
height:550px;
background-color:green;
}

#rightcol{
width:100%;
min-height:100%;
height:550px;
background-color:pink;
}
Now add background-color:blue; and put all those <p>'s back. Hey, it's still doing it. OK set overflow

#rightcol{
width:100%;
min-height:100%;
height:550px;
background-color:pink;
overflow: auto;
}It could have been hidden and you might want that set in other divs that might over flow.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum