5 Replies - 10130 Views - Last Post: 21 June 2011 - 12:19 AM

#1 kimmi_baby  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 87
  • Joined: 18-April 11

How to create a layout with a fixed and fluid column?

Posted 14 June 2011 - 02:17 AM

Hi,
What I'm wanting to do is create a fixed and fluid layout. I was pretty sure it was possible but I'm not quite sure how to do it.

The layout I want will have 2 columns within a wrap div.

The left column will have 2 divs. The div on the top is the header and the div below is the navigation. This will be the fixed column. This will also be positioned to the very left of the page.

The right column will be the content div. The content div is the one I would like to be fluid. I would like it to expand depending on the size of the screen. The problem I think I'm finding is that the background will be an image (I'm not quite sure how to make this expand or what size I should set the photo).

Any help would be greatly appreciated!!

Is This A Good Question/Topic? 0
  • +

Replies To: How to create a layout with a fixed and fluid column?

#2 souptoy  Icon User is offline

  • D.I.C Head


Reputation: 54
  • View blog
  • Posts: 244
  • Joined: 17-January 08

Re: How to create a layout with a fixed and fluid column?

Posted 15 June 2011 - 08:38 PM

If you want a response you should post up your CSS and HTML
Was This Post Helpful? 0
  • +
  • -

#3 Nykc  Icon User is offline

  • Gentleman of Leisure
  • member icon

Reputation: 731
  • View blog
  • Posts: 8,644
  • Joined: 14-September 07

Re: How to create a layout with a fixed and fluid column?

Posted 16 June 2011 - 11:29 AM

Post your code so far both HTML/CSS and we will help you with the errors you encounter.

If you are looking for a some base code to help you out, google two-column layouts and there are plenty of starter templates available to build from.
Was This Post Helpful? 0
  • +
  • -

#4 tidyui  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 1
  • View blog
  • Posts: 7
  • Joined: 13-May 11

Re: How to create a layout with a fixed and fluid column?

Posted 17 June 2011 - 02:17 AM

Here's a simple and pretty standard way to implement a two column layout with one fixed and one fluid column. Hope it helps.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Fluid</title>
    <style type="text/css" media="screen">
        html, body { background: #ccc; }
        .wrap      { margin: 20px; padding: 20px; background: #fff; }
        .main      { margin-left: 220px; }
        .sidebar   { width: 200px; float: left; }
        .main,
        .sidebar   { background: #eee; min-height: 100px; }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="sidebar">This is the static sidebar</div>
        <div class="main">This is the main, and fluid div</div>
    </div>
</body>
</html>



As you can see the left column floats (which indirectly means it does not clear, or break) which makes the non-floating div place itself beneath it expanding over the available width. This is however solved with a simple margin-left with the same width as the left column.
Was This Post Helpful? 0
  • +
  • -

#5 kimmi_baby  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 87
  • Joined: 18-April 11

Re: How to create a layout with a fixed and fluid column?

Posted 20 June 2011 - 07:34 PM

View Posttidyui, on 17 June 2011 - 02:17 AM, said:

Here's a simple and pretty standard way to implement a two column layout with one fixed and one fluid column. Hope it helps.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Fluid</title>
    <style type="text/css" media="screen">
        html, body { background: #ccc; }
        .wrap      { margin: 20px; padding: 20px; background: #fff; }
        .main      { margin-left: 220px; }
        .sidebar   { width: 200px; float: left; }
        .main,
        .sidebar   { background: #eee; min-height: 100px; }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="sidebar">This is the static sidebar</div>
        <div class="main">This is the main, and fluid div</div>
    </div>
</body>
</html>



As you can see the left column floats (which indirectly means it does not clear, or break) which makes the non-floating div place itself beneath it expanding over the available width. This is however solved with a simple margin-left with the same width as the left column.


Thank you for your help! I think I may have come across a problem... I have made the right column fluid but it now seems to overlap the left column.. I'm guessing this is because it's fixed? I did try setting the left margin to be the same size as the div... Did i do this wrong? Should I be aiming to have both columns fluid for what I'm aiming to do?


Also, can someone point me in the right direction of how to make the actual background image of the right column resize as well?

Here's my code:
<head>  
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/home_page/css/template.css" type="text/css" />

<jdoc:include type="head" />  

</head> 

<body>


<div id="wrap">  

<div id="sidecontainer">

  	<div id="header"><jdoc:include type="modules" name="top" /></div>    
    
  	<div id="nav" class="float"><jdoc:include type="modules" name="left" /></div>      
    
</div>
          	  
    <div id="content">
    <div id="contenttext" class="float"><jdoc:include type="message" /><jdoc:include type="component" /></div>  
    </div>


    
    <div id="footer" class="clear"><jdoc:include type="modules" name="footer" />
   footer goes here</div>
    
</div>



</body>  
</html>


CSS
@charset "utf-8";
/* CSS Document */

body {
background:black;

	
}



#wrap {
text-align:left;
width:100%;
height:auto;
	
}


#sidecontainer {
margin-left:2%;
float:left;
width:12%;
	
	
}

#header {
background:url(../images/logo2.jpg);
width:16.500em;
height:105px;
float:left;
	
}



#nav {
float:left;
width:300px;
height:600px;
display:block;
	
	
}

#nav ul {
	list-style: none;
	
	
}




#nav li.item1 a {
  width: 222px;
  height:70px;
  background:url(../images/about.png) no-repeat;
 
  
}


#nav li.item2 a {
  width: 220px;
  height:96px;
  background:url(../images/projects.png) no-repeat;
}

#nav li.item3 a {
  width: 243px;
  height:70px;
  background:url(../images/macfloors.png) 0 0 no-repeat;
}

#nav li.item4 a {
  width: 220px;
  height:70px;
  background:url(../images/kyronn.png) 0 0 no-repeat;
}

#nav li.item5 a {
  width: 200px;
  height:70px;
  background:url(../images/BMP.png) 0 0 no-repeat;
}

#nav li.item6 a {
  width: 243px;
  height:70px;
  background:url(../images/marketing.png) 0 0 no-repeat;
}

#nav li.item7 a {
  width: 258px;
  height:52px;
 
}


#nav li.item1 a:hover {
  width: 222px;
  height:70px;
  background:url(../images/about.png) no-repeat;
  background-position: 0px -85px;
 
  
}

#nav li.item2 a:hover {
width:222px;
height:100px;
background:url(../images/projects.png) 0 0 no-repeat;
background-position: 0px -103px;
}

#nav li.item3 a:hover {
  background:url(../images/macfloors.png) 0 0 no-repeat;
  width:243px;
  height:70px;
  background-position: 0px -85px;
}

#nav li.item4 a:hover {
  background:url(../images/kyronn.png) 0 0 no-repeat;
  width:220px;
  height:70px;
  background-position: 0px -105px;
}


#nav li.item5 a:hover {
  background:url(../images/BMP.png) 0 0 no-repeat;
  width:200px;
  height:70px;
  background-position: 0px -90px;
}
#nav li.item6 a:hover {
  background:url(../images/marketing.png) 0 0 no-repeat;
  width:243px;
  height:70px;
  background-position: 0px -105px;
}

#nav li.item7 a:hover {
  background:url(../images/nav_contact_roll_active.png) 0 0 no-repeat;
}


#nav li a {
	display: block;
	padding: 5px 5px;
	padding-bottom:5px;
	text-decoration:none; 
	height:30px;
	color:black;
	
	
}
	
	#nav li ul {
	display: none; 
	width: 390px; 
	color:black;
	
	
}
	
	#nav li:hover ul {
	display: block;
	position: absolute;
	margin: 0;
	padding: 0;
	color:black;
	
	
}
	
#nav li:hover li {
	float: none;

}

#nav li a:hover {
	color:black;
	
	
}

#content {
background:url(../images/home/DSC_9904.JPG);
width:71%;
height:100%;
float: right;
margin-left:14%;



	
	
}


#contenttext {

width:50%;
margin:auto;
margin-top:6.250em;
background:black;
height:100%;	
}

#footer {
color:white;
clear:both;
	
}



Was This Post Helpful? 0
  • +
  • -

#6 tidyui  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 1
  • View blog
  • Posts: 7
  • Joined: 13-May 11

Re: How to create a layout with a fixed and fluid column?

Posted 21 June 2011 - 12:19 AM

Hi again, the difference in your code, from my example is that you have your entire grid fluid. Both your "leftcontainer" and your "content" have a width in percentage and are floating. In this case you shouldn't use the margin-trick i supplied. My solution only applies if you want one fixed and one fluid column. To make both columns work with your solution, consider the following values:

#sidecontainer {
    margin-left:2%;
    float:left;
    width:12%;
}

#content {
    width:84%;
    height:100%;
    float: right;
}



The width of 84% is 100% - 12% (leftcol width) - 2% (leftcol margin) - 2% (margin between leftcol & rightcol).

You should also know that your statement "height:100%" has absolutely no effect on the divs.

Regarding fluid images and fluid background images there's a great article on it at "A list apart" at:

http://www.alistapar...s/fluid-images/

This post has been edited by tidyui: 21 June 2011 - 12:20 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1