Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: Layout problem

  1. #1
    New Coder
    Join Date
    Jun 2008
    Posts
    15
    Thanks
    1
    Thanked 1 Time in 1 Post

    Layout problem

    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
    Code:
    | |  Topbar |
    |L|---------|
    |O|   Menu  |
    |G|---------|
    |O|         |
    | | M A I N |
    | |         |
    | |---------|
    |X|  Footer |
    HTML
    Code:
    <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
    Code:
    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;
    }
    Last edited by Kim2; 11-12-2008 at 03:38 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You may have to use some faux column approach.

    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".
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Nov 2008
    Posts
    19
    Thanks
    0
    Thanked 1 Time in 1 Post
    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?

  • #4
    New Coder
    Join Date
    Jun 2008
    Posts
    15
    Thanks
    1
    Thanked 1 Time in 1 Post
    Quote Originally Posted by abduraooft View Post
    You may have to use some faux column approach.

    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.

    Quote Originally Posted by anthias View Post
    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).

  • #5
    New Coder
    Join Date
    Nov 2008
    Posts
    19
    Thanks
    0
    Thanked 1 Time in 1 Post
    Is your page posted somewhere?

  • #6
    New Coder
    Join Date
    Jun 2008
    Posts
    15
    Thanks
    1
    Thanked 1 Time in 1 Post
    It isnt.

  • #7
    New Coder
    Join Date
    Jun 2008
    Posts
    15
    Thanks
    1
    Thanked 1 Time in 1 Post
    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
    Code:
    <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
    Code:
    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;
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •