Jump to content

Fluid 3 column width problem


CrazeD

Recommended Posts

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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>

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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>

Link to post
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.