www.webdeveloper.com
Results 1 to 5 of 5

Thread: Div Full Width

  1. #1
    Join Date
    Feb 2011
    Posts
    3

    Div Full Width

    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;
    }

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,460
    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

  3. #3
    Join Date
    Feb 2011
    Posts
    3
    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!

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,460
    No problem, you're very welcome.

  5. #5
    Join Date
    Jan 2008
    Location
    Florida
    Posts
    1,227
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles