Fluid 3 column width problem

CrazeD · November 29, 2009

I hate full-width fluid designs, but the client insists...so... I guess I have to. Grr.

Ok so, for some reason I can't make this very simple problem work. I have a full-width 3 column layout. Static left and right blocks, with a fluid middle block. The middle block is 3 pieces, a left corner, the middle part that stretches, and a right corner.

My problem is that I can't make the middle be 100%, because then it drops between the side blocks and between the left and right corners.

Here is a picture to illustrate: http://i13.photobucket.com/albums/a283/crazed_rider/fluidproblem.jpg

CSS:

/* kill defaults */
html, body, ul, dl, li, h1, h2, h3, h4, img { margin: 0; padding: 0; }

ul { list-style: none; }

img { border: 0; }
/* ============= */

html { height:100%; }

body {
background:#272727;
}

#container {
width:100%;
background:#272727;
height:auto !important;
height:100%;
min-height:100%;
overflow:auto;
}


#banner-wrapper {
background:url(images/banner_middle.gif) repeat-x;
width:100%;
height:118px;
}

#banner-left {
background:url(images/banner_left.gif) no-repeat;
width:246px;
height:118px;
float:left;
}

#banner-right {
background:url(images/banner_right.gif) no-repeat;
width:279px;
height:118px;
float:right;
}

#borderleft, #borderright {
width:24px;
background:url(images/borderleft.gif) repeat-y right;
position:absolute;
height:auto !important;
height:100%;
min-height:100%;	
}

#borderright {
background:url(images/borderright.gif) repeat-y left;
right:0px;
}

#mid-wrapper {
margin:5px 30px 5px 30px;
}

#left-column {
width:184px;
height:100%;
min-height:100%;
float:left;
}

#middle-column {
height:100%;
min-height:100%;
float:left;
width:100%;
}

#right-column {
width:100%;
height:100%;
min-height:100%;
float:left;
}

.block-left-header {
background:url(images/block_left_header.gif) no-repeat;
width:184px;
height:48px;
}

.block-left-body {
background:url(images/block_left_body.gif) repeat-y;
width:184px;
min-height:158px;
}

.block-left-footer {
background:url(images/block_left_footer.gif) no-repeat;
width:184px;
height:50px;
}

.block-middle-header-lc {
background:url(images/block_middle_header_lc.gif) no-repeat;
width:25px;
height:48px;
float:left;
}

.block-middle-header-c {
background:url(images/block_middle_header_c.gif) repeat-x;
width:100%;
min-width:100%;
height:48px;
float:left;
}

.block-middle-header-rc {
background:url(images/block_middle_header_rc.gif) no-repeat;
width:25px;
height:48px;
float:left;
}

HTML:

<!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" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>[band of Misfits]</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div id="banner-wrapper">
  <div id="banner-left"></div>
  <div id="banner-right"></div>
</div>
<div id="container">
  <div id="borderleft"></div>
  <div id="borderright"></div>

  <div id="mid-wrapper">
    <div id="left-column">
      <div class="block-left-header"></div>
  <div class="block-left-body"></div>
  <div class="block-left-footer"></div>
</div>

<div id="middle-column">
  <div class="block-middle-header-lc"></div>
  <div class="block-middle-header-c"></div>
  <div class="block-middle-header-rc"></div>
</div>
  </div>
</div>
</body>
</html>

Please help, I gotta get this done ASAP.

Thanks.

FaT3oYCG · November 29, 2009

from the looks of it simply putting margin-left:24px; on the left part and margin-right:24px; and leaving the width at 100% should work.

FaT3oYCG · November 29, 2009

if this didnt solve your problem then an easier solution would be to post a link to the site so we can test things there with an external tester such as firebug.

i have also seen the problem acomplishe dby placing divs inside eachother and aligning the images correctly and then placing content and title divs in those.

CrazeD · November 29, 2009

Well I managed to get the middle header to fit beside the left block. However, I cannot get the right corner or right block to go to the right of the header. It drops below it.

Picture: http://i13.photobucket.com/albums/a283/crazed_rider/fluidproblem2.jpg

CSS:

/* kill defaults */
html, body, ul, dl, li, h1, h2, h3, h4, img { margin: 0; padding: 0; }

ul { list-style: none; }

img { border: 0; }
/* ============= */

html { height:100%; }

body {
background:#272727;
}

#container {
width:100%;
background:#272727;
height:auto !important;
height:100%;
min-height:100%;
overflow:auto;
}


#banner-wrapper {
background:url(images/banner_middle.gif) repeat-x;
width:100%;
height:118px;
}

#banner-left {
background:url(images/banner_left.gif) no-repeat;
width:246px;
height:118px;
float:left;
}

#banner-right {
background:url(images/banner_right.gif) no-repeat;
width:279px;
height:118px;
float:right;
}

#borderleft, #borderright {
width:24px;
background:url(images/borderleft.gif) repeat-y right;
position:absolute;
height:auto !important;
height:100%;
min-height:100%;	
}

#borderright {
background:url(images/borderright.gif) repeat-y left;
right:0px;
}

#mid-wrapper {
margin:5px 30px 5px 30px;
}

#left-column {
width:184px;
height:100%;
min-height:100%;
float:left;
}

#middle-column {
height:100%;
min-height:100%;
width:100%;
}

#right-column {
width:184px;
height:100%;
min-height:100%;
float:right;
}

.block-left-header {
background:url(images/block_left_header.gif) no-repeat;
width:184px;
height:48px;
}

.block-left-body {
background:url(images/block_left_body.gif) repeat-y;
width:184px;
min-height:158px;
}

.block-left-footer {
background:url(images/block_left_footer.gif) no-repeat;
width:184px;
height:50px;
}

.block-middle-header-lc {
background:url(images/block_middle_header_lc.gif) no-repeat;
width:25px;
height:48px;
float:left;	
}

.block-middle-header-c {
background:url(images/block_middle_header_c.gif) repeat-x;
width:100%;
min-width:100%;
height:48px;
}

.block-middle-header-rc {
background:url(images/block_middle_header_rc.gif) no-repeat;
width:25px;
height:48px;
float:right;
}

.block-right-header {
background:url(images/block_right_header.gif) no-repeat;
width:184px;
height:48px;
}

.block-right-body {
background:url(images/block_right_body.gif) repeat-y;
width:184px;
min-height:158px;
}

.block-right-footer {
background:url(images/block_right_footer.gif) no-repeat;
width:184px;
height:50px;
}

HTML:

<!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" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>[band of Misfits]</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div id="banner-wrapper">
  <div id="banner-left"></div>
  <div id="banner-right"></div>
</div>
<div id="container">
  <div id="borderleft"></div>
  <div id="borderright"></div>

  <div id="mid-wrapper">
    <div id="left-column">
      <div class="block-left-header"></div>
  <div class="block-left-body"></div>
  <div class="block-left-footer"></div>
</div>

<div id="middle-column">
  <div class="block-middle-header-lc"></div>
  <div class="block-middle-header-c"></div>
  <div class="block-middle-header-rc"></div>
</div>

<div id="right-column">
  <div class="block-right-header"></div>
  <div class="block-right-body"></div>
  <div class="block-right-footer"></div>
</div>
  </div>
</div>
</body>
</html>

Thanks.

CrazeD · December 3, 2009

Bump.

Please help, I need to get this done soon.

FaT3oYCG · December 3, 2009

if you post the images then i will make an example for you, but a link to the page would be just as good, which ever way you want to do it.

CrazeD · December 4, 2009

Demo: http://crazedizzled.com/demo/bom/index.php

Files: http://crazedizzled.com/demo/bom/bom.rar

Thanks.

rajivgonsalves · December 4, 2009

put the middle div below the right div in the html, hope it helps

CrazeD · December 4, 2009

Ah, I forgot about that trick. That worked.

However, I still have an issue. If I have content that stretches the middle div downward, after it clears the two side blocks it expands all the way. How do I fix this?

Screenshot: http://i13.photobucket.com/albums/a283/crazed_rider/fluidproblem3.jpg

Demo: http://crazedizzled.com/demo/bom/index.php

Files: http://crazedizzled.com/demo/bom/bom.rar

Thanks.

EDIT: Forgot code...

CSS:

/* kill defaults */
html, body, ul, dl, li, h1, h2, h3, h4, img { margin: 0; padding: 0; }

ul { list-style: none; }

img { border: 0; }
/* ============= */

html { height:100%; }

body {
background:#272727;
}

#container {
width:100%;
background:#272727;
height:auto !important;
height:100%;
min-height:100%;
overflow:auto;
}


#banner-wrapper {
background:url(images/banner_middle.gif) repeat-x;
width:100%;
height:118px;
}

#banner-left {
background:url(images/banner_left.gif) no-repeat;
width:246px;
height:118px;
float:left;
}

#banner-right {
background:url(images/banner_right.gif) no-repeat;
width:279px;
height:118px;
float:right;
}

#borderleft, #borderright {
width:24px;
background:url(images/borderleft.gif) repeat-y right;
position:absolute;
height:auto !important;
height:100%;
min-height:100%;	
}

#borderright {
background:url(images/borderright.gif) repeat-y left;
right:0px;
}

#mid-wrapper {
margin:5px 30px 5px 30px;
}

#left-column {
width:184px;
height:100%;
min-height:100%;
float:left;
}

#middle-column {
height:100%;
min-height:100%;
width:100%;
}

#right-column {
width:184px;
height:100%;
min-height:100%;
float:right;
}

.block-left-header {
background:url(images/block_left_header.gif) no-repeat;
width:184px;
height:48px;
}

.block-left-body {
background:url(images/block_left_body.gif) repeat-y;
width:184px;
min-height:158px;
}

.block-left-footer {
background:url(images/block_left_footer.gif) no-repeat;
width:184px;
height:50px;
}

.block-middle-header-lc {
background:url(images/block_middle_header_lc.gif) no-repeat;
width:25px;
height:48px;
float:left;	
}

.block-middle-header-c {
background:url(images/block_middle_header_c.gif) repeat-x;
width:100%;
min-width:100%;
height:48px;
}

.block-middle-header-rc {
background:url(images/block_middle_header_rc.gif) no-repeat;
width:25px;
height:48px;
float:right;
}

.block-middle-body-l {
background:url(images/block_middle_body_l.gif) no-repeat;
width:25px;
min-height:158px;
float:left;
}

.block-middle-body-c {
background:#323232;
width:100%;
min-height:158px;
}

.block-middle-body-r {
background:url(images/block_middle_body_r.gif) no-repeat;
width:25px;
min-height:158px;
float:right;
}

.block-middle-footer-lc {
background:url(images/block_middle_footer_lc.gif) no-repeat;
width:25px;
height:50px;
float:left;
}

.block-middle-footer-c {
background:url(images/block_middle_footer_c.gif) repeat-x;
width:100%;
height:50px;
}

.block-middle-footer-rc {
background:url(images/block_middle_footer_rc.gif) repeat-x;
width:25px;
height:50px;
float:right;
}

.block-right-header {
background:url(images/block_right_header.gif) no-repeat;
width:184px;
height:48px;
}

.block-right-body {
background:url(images/block_right_body.gif) repeat-y;
width:184px;
min-height:158px;
}

.block-right-footer {
background:url(images/block_right_footer.gif) no-repeat;
width:184px;
height:50px;
}

.content {
color:#fff;
font-family:"Lucida Sans",Verdana,Arial,Serif;
font-size:10pt;
}

HTML:

<!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" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>[band of Misfits]</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div id="banner-wrapper">
  <div id="banner-left"></div>
  <div id="banner-right"></div>
</div>
<div id="container">
  <div id="borderleft"></div>
  <div id="borderright"></div>

  <div id="mid-wrapper">
    <div id="left-column">
      <div class="block-left-header"></div>
  <div class="block-left-body"></div>
  <div class="block-left-footer"></div>
</div>	

<div id="right-column">
  <div class="block-right-header"></div>
  <div class="block-right-body"></div>
  <div class="block-right-footer"></div>
</div>

<div id="middle-column">
  <div class="block-middle-header-lc"></div>
  <div class="block-middle-header-rc"></div>
  <div class="block-middle-header-c"></div>
  <div class="block-middle-body-l"></div>
  <div class="block-middle-body-r"></div>
  <div class="block-middle-body-c">
    <div class="content">
	  <div style="height:500px;border:1px solid #fff;width:300px;">asdf</div>
	</div>
  </div>
  <div class="block-middle-footer-lc"></div>
  <div class="block-middle-footer-rc"></div>	  
  <div class="block-middle-footer-c"></div>
</div>
  </div>
</div>
</body>
</html>

rajivgonsalves · December 4, 2009

try this

.block-middle-body-c {
   background:#323232;
   width:65%;
   min-height:158px;
   display:inline-block;
   }

haku · December 4, 2009

The Perfect 3 Column Liquid Layout

CrazeD · December 4, 2009

try this

.block-middle-body-c {
   background:#323232;
   width:65%;
   min-height:158px;
   display:inline-block;
   }

That didn't work. It just dropped the content entirely below the blocks, but it still remained full width.

rajivgonsalves · December 4, 2009

if it drop the content below means it did you'll have to work with the width percentage of that div to get it up

CrazeD · December 4, 2009

But I want that div to stay 100% between the blocks.

rajivgonsalves · December 4, 2009

it will that is the percentage of the screen between, 100% will be the full width, did you see the link provided by haku ?

CrazeD · December 4, 2009

Yeah, but I haven't had a chance to dig into it yet. I was hoping this would be an easy fix and I'd be all set, hehe.

FaT3oYCG · December 4, 2009

if you follow the guide / layout that haku provided and then place the content that you already have into that layout then it should work. I would code this for you but:

1. I'm not getting paid.

2. It sounds like you are.

3. I don't have enough time.

4. It isnt as clean as I thought it would be, some of your styles are not using the best methods etc.

CrazeD · December 4, 2009

if you follow the guide / layout that haku provided and then place the content that you already have into that layout then it should work. I would code this for you but:

1. I'm not getting paid.

2. It sounds like you are.

3. I don't have enough time.

4. It isnt as clean as I thought it would be, some of your styles are not using the best methods etc.

Nope, not getting paid... this is for friends.

But that's okay, I didn't expect anyone to code it for me. If it wasn't a full width layout I'd be all set... I was never much good at full width.

haku · December 5, 2009

Why reinvent the wheel? The link I gave you works great.

CrazeD · December 5, 2009

Using the holy grail thing, I can't make the left and right columns be 100%. They only span to the size of the content. This makes an issue because my border doesn't span the whole height.

haku · December 5, 2009

You can use the faux columns method to solve that problem.

dbrimlow · December 5, 2009

While Haku's solutions are correct to learn how to do it right, professionally and semantically, there is a very quick practical solution, by Stu Nicholls, that lets you create left/right fixed, center liquid, "equal height" looking columns.

http://www.cssplay.co.uk/layouts/flexible-3column-fix-flex-fix.html

The trick to the "equal height" looking columns, using background color, is giving the 3 columns ridiculously long "padding-bottom:32767px; margin-bottom:-32767px;", then putting them all within a wrapper that has "overflow:hidden".

The sliding-door technique is still best if using graphics.

This will let you start to at least get done what you need.

HOWEVER! It is not semantically correct. The right column comes before the center column in the markup (as you mentioned). This can cause confusion with screen readers and no professional would feel comfortable doing it.

CrazeD · December 5, 2009

Using haku's link, where do I put this huge padding and margin? I put it on "col2" and it did nothing.

CrazeD · December 6, 2009

Okay, I'm starting to get really pissed off.

http://i13.photobucket.com/albums/a283/crazed_rider/fluidproblem4.jpg

Why is this happening?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Stu Nicholls | CSSplay | Flexible equal height 3 columns </title>
<meta name="Author" content="Stu Nicholls" />
<meta name="Keywords" content="style, cascading, sheets, Experiments, code, CSSplay, Stu, Nicholls, demonstrations, menus, layouts, flexible, multi-column, equal height" />
<meta name="Description" content="CSS only flexible widths with equal height columns" />
<meta http-equiv="imagetoolbar" content="no" />


<style type="text/css">

/* kill defaults */
html, body, ul, dl, li, h1, h2, h3, h4, img { margin: 0; padding: 0; }

ul { list-style: none; }

img { border: 0; }
/* ============= */


body {font-size:76%; font-family:"trebuchet MS", verdana, arial, sans-serif; background:#f0f0f0; word-wrap:break-word;}

#header {background:#a31e39;}

#outer1 {float:left; width:184px; padding:5px 10px 20px 25px; background:#272727;}
#outer3 {float:right; width:184px; padding:5px 25px 20px 10px; background:#272727;}
#outer2 {background:#272727; padding:5px 10px 10px 20px; }


#outer1, #outer2, #outer3 {padding-bottom:32767px; margin-bottom:-32767px;}

#wrapper {overflow:hidden; background:#272727;}


#footer {clear:both; background:#455c5a;}

.content {padding:10px;}
h1 {font-size:20px; margin:0; padding:10px 0; color:#fff;}
h3 {font-size:18px; margin:0; padding:8px 0;}
p {font-size:12px; line-height:1.5em; margin:0; padding:5px 0;}
#footer p,
#header p {color:#fff;}
#footer a {color:#fff;}
#footer a:hover {text-decoration:none;}
#borderleft, #borderright {
width:24px;
background:url(images/borderleft.gif) repeat-y right;
position:absolute;
height:auto !important;
min-height:100%;
}

#borderright {
background:url(images/borderright.gif) repeat-y left;
right:0px;
}

#banner-wrapper {
background:url(images/banner_middle.gif) repeat-x;
width:100%;
height:118px;
}

#banner-left {
background:url(images/banner_left.gif) no-repeat;
width:246px;
height:118px;
float:left;
}

#banner-right {
background:url(images/banner_right.gif) no-repeat;
width:279px;
height:118px;
float:right;
}

.block-left-header {
background:url(images/block_left_header.gif) no-repeat;
width:184px;
height:48px;
}

.block-left-body {
background:url(images/block_left_body.gif) repeat-y;
width:184px;
min-height:158px;
}

.block-left-footer {
background:url(images/block_left_footer.gif) no-repeat;
width:184px;
height:50px;
}

.block-middle-header-lc {
background:url(images/block_middle_header_lc.gif) no-repeat;
width:25px;
height:48px;
float:left;	
}

.block-middle-header-c {
background:url(images/block_middle_header_c.gif) repeat-x;
height:48px;
}

.block-middle-header-rc {
background:url(images/block_middle_header_rc.gif) no-repeat;
width:25px;
height:48px;
float:right;
}

.block-middle-body-l {
background:url(images/block_middle_body_l.gif) no-repeat;
width:25px;
min-height:158px;
float:left;
}

.block-middle-body-c {
background:#323232;
min-height:158px;
}

.block-middle-body-r {
background:url(images/block_middle_body_r.gif) no-repeat;
width:25px;
min-height:158px;
float:right;
}

.block-middle-footer-lc {
background:url(images/block_middle_footer_lc.gif) no-repeat;
width:25px;
height:50px;
float:left;
}

.block-middle-footer-c {
background:url(images/block_middle_footer_c.gif) left repeat-x;	
height:50px;
}

.block-middle-footer-rc {
background:url(images/block_middle_footer_rc.gif) repeat-x;
width:25px;
height:50px;
float:right;
}

.block-right-header {
background:url(images/block_right_header.gif) no-repeat;
width:184px;
height:48px;
}

.block-right-body {
background:url(images/block_right_body.gif) repeat-y;
width:184px;
min-height:158px;
}

.block-right-footer {
background:url(images/block_right_footer.gif) no-repeat;
width:184px;
height:50px;
}

</style>

<!--[if lte IE 7]>
<style type="text/css">
body {word-wrap:break-word;}
#outer2 {float:left; display:inline; margin-left:10px; margin-right:10px;}

#wrapper {display:inline-block;}
</style>
<![endif]-->

</head>

<body><div id="borderleft"></div>
<div id="borderright"></div>
	<div id="banner-wrapper">
	  <div id="banner-left"></div>
	  <div id="banner-right"></div>
	</div>

	<div id="wrapper">
		<div id="outer1">
		  <div class="block-left-header"></div>
		  <div class="block-left-body"></div>
		  <div class="block-left-footer"></div>

		</div>

		<div id="outer3">
				<div class="block-right-header"></div>
  <div class="block-right-body"></div>
  <div class="block-right-footer"></div>
		</div> <!-- end outer3 -->

		<div id="outer2">
		<div class="block-middle-header-lc"></div>
        <div class="block-middle-header-rc"></div>
        <div class="block-middle-header-c"></div>
        <div class="block-middle-body-l"></div>
        <div class="block-middle-body-r"></div>
        <div class="block-middle-body-c">
        <div class="content">
		blah<br />blah<br />blahblah<br />blah<br />blahblah<br />blah<br />blahblah<br />blah<br />blahblah<br />blah<br />blahblah<br />blah<br />
	    </div>

        </div>
        <div class="block-middle-footer-lc"></div>
        <div class="block-middle-footer-rc"></div>	  
        <div class="block-middle-footer-c"></div>
		</div> <!-- end outer2 -->


	</div><!-- end #wrapper -->

	<div id="footer">
		<div class="content">
			<p>Copyright ©2009 stu nicholls - cssplay.co.uk | <a href="http://www.cssplay.co.uk/comments/comments.php?comment_id=Flexible%203Cols"  accesskey="C" title="Comments for this Layout">comments on these layouts</a></p>
			<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
				<div>
					<input type="hidden" name="cmd" value="_s-xclick" />
					<input type="hidden" name="hosted_button_id" value="2928152" />

					<input type="image" src="http://www.cssplay.co.uk/graphic/paypal.png" name="submit" alt="" />
					<img alt="" src="https://www.paypal.com/en_GB/i/scr/pixel.gif" width="1" height="1" />
				</div>
			</form>
		</div>
	</div> <!-- end footer -->

</body>
</html>

haku · December 6, 2009

Why is what happening? I see a few potential problems with what you have, but you didn't tell us which one you were speaking of.

Sign In

Fluid 3 column width problem

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information