Div Full Width

**mark305** · 02-05-2011 08:57 AM

Hi. I have 1 parent div tag.

Inside that I have 3 div tags next to each other (with float:left), the left and right tags require a fixed width, and I want the middle div tag to expand to the max of the parent div tag minus the left and right tags.

Can anyone help me do this because if I set the middle tag width:100%; then it will push the left and right tags above and below the middle div tag.

Here is an example of my HTML:

Code:

	<div id="full_top">
		<div id="banner_left">Left</div>
		<div id="banner_middle">Middle</div>
		<div id="banner_right">Right</div>
	</div>

and here is the CSS:

Code:

#full_top {
	background-color:red;
	min-height:140px;
	width:80%;
	min-width:700px;
	max-width:800px;
	margin-left:auto;
	margin-right:auto;
}

#banner_left {
	background-color:skyblue;
	float:left;
	min-height:140px;
	width:130px;
}

#banner_middle {
	background-color:orange;
	float:left;
	min-height:140px;
	width:100%;
}

#banner_right {
	background-color:turquoise;
	float:left;
	min-height:140px;
	width:40px;
}

**coothead** · 02-05-2011 12:00 PM

Hi there mark305,

and a warm welcome to these forums.

Try it like this...

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
#full_top {
    width:80%;
    min-width:700px;
    max-width:800px;
    min-height:140px;
    margin:auto;
    background-color:#f00;
 }
#banner_right {
    float:right;
    width:40px;
    min-height:140px;
    background-color:#40e0d0;
 }
#banner_left {
    float:left;
    width:130px;
    min-height:140px;
    background-color:#87ceeb;
 }
#banner_middle {
    min-height:140px;
    margin:0 40px 0 130px;
    background-color:#ffa500;
 }
</style>

</head>
<body>

<div id="full_top">
 <div id="banner_right">R</div>
 <div id="banner_left">L</div>
 <div id="banner_middle">M</div>
</div>

</body>
</html>

coothead

**mark305** · 02-06-2011 09:28 AM

Thanks mate that helped a lot!

I didn't realize the middle div would come after the right one like:

Code:

 <div id="banner_right">R</div>
 <div id="banner_left">L</div>
 <div id="banner_middle">M</div>

instead of:

Code:

 <div id="banner_right">R</div>
 <div id="banner_middle">M</div>
 <div id="banner_left">L</div>

Thank you!

**coothead** · 02-06-2011 09:34 AM

No problem, you're very welcome.

**yamaharuss** · 02-07-2011 10:06 AM

If the middle tag contains your most important content as far as SEO goes, you may want to use a little more creativity to put that content higher in your code and display the middle div first.

This also keeps your div heights fluid.

Code:

/* column container */
	.colmask {
		position:relative;	/* This fixes the IE7 overflow hidden bug */
		clear:both;
		float:left;
		width:100%;			/* width of whole page */
		overflow:hidden;		/* This chops off any overhanging divs */
	}
	/* common column settings */
	.colright,
	.colmid,
	.colleft {
		float:left;
		width:100%;			/* width of page */
		position:relative;
	}
	.col1,
	.col2,
	.col3 {
		float:left;
		position:relative;
		padding:0 0 1em 0;	/* no left and right padding on columns, we just make them narrower instead 
						only padding top and bottom is included here, make it whatever value you need */
		overflow:hidden;
	}
	/* 3 Column settings */
	.threecol {
		background:#eee;		/* right column background
colour */
	}
	.threecol .colmid {
		right:25%;			/* width of the right column
*/
		background:#fff;		/* center column background
colour */
	}
	.threecol .colleft {
		right:50%;			/* width of the middle
column */
		background:#f4f4f4;	/* left column background colour */
	}
	.threecol .col1 {
		width:46%;			/* width of center column content (column width minus padding on either side) */
		left:102%;			/* 100% plus left padding of center column */
	}
	.threecol .col2 {
		width:21%;			/* Width of left column
content (column width minus padding on either side) */
		left:31%;			/* width of (right column)
plus (center column left and right padding) plus (left column left padding) */
	}
	.threecol .col3 {
		width:21%;			/* Width of right column content (column width minus padding on either side) */
		left:85%;			/* Please make note of the brackets here:
						(100% - left column width)
plus (center column left and right padding) plus (left column left and right
padding) plus (right column left padding) */
	}


***********************************************
HTML CODE
***********************************************


<div class="colmask threecol">
	<div class="colmid">
		<div class="colleft">
			<div class="col1">
This is the center column
			</div>
			<div class="col2">
This is the left column
			</div>
			<div class="col3">
This is the right column
			</div>
		</div>
	</div>
</div>

Thread: Div Full Width

Thread Tools

Display

Div Full Width

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions