...

View Full Version : Layout problem



Kim2
11-12-2008, 03:28 PM
Im trying to create a layout as shown below, but Im having problems when the content in "MAIN" is longer than 100% (near X). The column with the logo simply does not stretch. Using "position: fixed" solves it, but I dont want the logo to stay on top. The background color should be shown when the user scrolls down.

Its split into two colums, where the left one has a fixed width and the right is fluid. The right column is split into four rows, where row 1,2 and 4 have fixed heights - making row 3 fluid. No rows have fixed positions.

What have I done wrong, or is missing ?

Layout

| | Topbar |
|L|---------|
|O| Menu |
|G|---------|
|O| |
| | M A I N |
| | |
| |---------|
|X| Footer |

HTML

<div id="container">
<div id="leftCol">
<div id="logo"></div>
</div>
<div id="rightCol">
<div id="info"></div>
<div id="menu"></div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
</div>

CSS

html,body{
margin:0;
padding:0;
width: 100%;
height: 100%;
min-height: 100%;
}
/* LAYOUT */
div#container{
width: 100%;
height: 100%;
min-height: 100%;
float: left;
}
div#leftCol{
width: 43px;
height: 100%;
min-height: 100%;
float: left;
margin-right: 10px;
}
div#rightCol{
padding-left: 53px;
margin-right: 5px;
}
div#logo{
height: 100%;
min-height: 100%;
background-image: url('/images/logo.jpg');
background-repeat: no-repeat;
}
div#topbar{
margin-left: -10px; /*strech to touch #leftcol*/
margin-bottom: 5px;
padding: 5px 0px 5px 25px; /* top right bottom left */
display: block;
height: 15px;
line-height: 15px;
border-bottom: 1px solid gray;
background: InfoBackground url('/images/image.gif') no-repeat 6px 4px;
font: message-box;
color: InfoText;
overflow: hidden;
z-index: 1;
}
div#menu{
height: 20px;
margin-top: 5px;
border-bottom: 1px solid black;
}
div#content{
height: 100%;
margin-top: 10px;
margin-bottom: 10px;
}
div#footer{
height: 20px;
}

abduraooft
11-12-2008, 03:44 PM
You may have to use some faux column approach (http://www.alistapart.com/articles/fauxcolumns/).

Have a try by modifying http://www.bonrouge.com/2c-hf-fluid.php in such a way that first remove the current header part from html and CSS and then stack your rows inside the div having id="main".

anthias
11-13-2008, 12:34 AM
What happens if you remove the 100% height parameter from the left column? Leave the min set at 100% but don't specify a max. Does that work?

Kim2
11-13-2008, 01:44 PM
You may have to use some faux column approach (http://www.alistapart.com/articles/fauxcolumns/).

Have a try by modifying http://www.bonrouge.com/2c-hf-fluid.php in such a way that first remove the current header part from html and CSS and then stack your rows inside the div having id="main".
I dont see how any of the faux columns tricks apply to my problem.

Removing the header, just makes it looks like an early version of the layout I want. Counter-useful.


What happens if you remove the 100% height parameter from the left column? Leave the min set at 100% but don't specify a max. Does that work?
It removes the entire logo div, but I assume its just minimized to 0px high. Switching the background images to a img tag does the same.

If you give #container, #leftCol and #rightCol a different background-color does it show the color from #right extends to the X area. Changing the padding-left in #rightCol to margin-left reveals that its #container which limits the height. Any ideas why it does ?

In case you didnt consider it, then the CSS code must work in IE6 & 7, FF2 & 3, Safari and hopefully Google Chrome too (this is the least important one as its still in beta).

anthias
11-13-2008, 04:46 PM
Is your page posted somewhere?

Kim2
11-13-2008, 06:03 PM
It isnt.

Kim2
11-17-2008, 01:24 PM
It appears the problem is with height and min-height, so I had to remove those attributes. This meant #leftCol kept being "minimized", so I resorted to using a background-image as describe in the faux column approach.

Here is the code that works.
HTML

<div id="container">
<div id="leftCol">
<div><img src="/images/logo.jpg" /></div>
</div>
<div id="rightCol">
<div id="info"></div>
<div id="menu"></div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
</div>

CSS

html, body {
margin: 0;
padding: 0;
border: 0;
}
body {
color: black;
background: white url(/images/bg_leftcol.png) repeat-y 0 0; /* image is part of layout */
}
div#container {
width: 100%;
}
div#leftCol {
width: 43px;
position: absolute;
top: 0;
left: 0;
margin-right: 10px;
}
div#rightCol {
padding-left: 53px;
margin-right: 5px;
position: relative;
}
div#topbar {
margin-left: -10px; /*strech to touch #leftCol*/
margin-bottom: 5px;
padding: 5px 0px 5px 25px; /* top right bottom left */
display: block;
height: 15px;
line-height: 15px;
border-bottom: 1px solid gray;
background: InfoBackground url('/images/image.gif') no-repeat 6px 4px;
font: message-box;
color: InfoText;
overflow: hidden;
z-index: 1;
}
div#menu{
height: 20px;
margin-top: 5px;
border-bottom: 1px solid black;
}
div#content {
position: relative;
margin-top: 10px;
margin-bottom: 10px;
}
div#footer {
height: 20px;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum