Results 1 to 6 of 6

Thread: 3 divs side by side

  1. #1

    Thread Starter
    Fanatic Member
    Join Date
    Jun 2008
    Posts
    1,023

    3 divs side by side

    i know how to put 3 divs side by side but i got a problem with placing them..

    i need the center div to resize, how is this possible?

    and how to make them have a height of 100%? i can't really figure that out, i can't find it possible to do without using tables, which i don't want because i want to do it with divs...

    i haven't done more then the float part and adding the divs to my site:

    css
    Code:
      div#contentContainer {
      height:100%;
      min-width:1000px;
      min-height:570px;
      }
    
      div#left {
      float:left;
      width:220px;
      }
      
      div#middle {
      float:left;
      min-width:560px; //must not be shorter then 560px
      }
      div#right {
      float:right;
      width:220px;
      }
    html
    Code:
    		<div id="contentContainer">
    		<div id="left">left</div>
    		<div id="middle">middle</div>
    		<div id="right">right</div>
    		<div style="clear:both;"></div>
    		</div>

  2. #2
    Frenzied Member
    Join Date
    Apr 2009
    Location
    CA, USA
    Posts
    1,516

    Re: 3 divs side by side

    Float both side columns, don't float the center column and don't give it an explicit width (min-width is okay), but give it right and left margins equal to the fixed widths of your side columns. Like so:
    Code:
    div#middle {
    /*removed float*/
    min-width:560px;
    margin:0 220px; /*defines left and right margin of 220px, no top/bottom margin */
    }
    ...and your markup needs to change slightly to accomodate this:
    Code:
    <div id="contentContainer">
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="middle">middle</div>
    <div style="clear:both;"></div>
    </div>
    As for making their height "100&#37;", this was discussed briefly by kows and myself in another thread... wheeeere was that?...

  3. #3

    Thread Starter
    Fanatic Member
    Join Date
    Jun 2008
    Posts
    1,023

    Re: 3 divs side by side

    xD i know why you ask me where that is, because i should search for that post, right? xD
    i will search and try this later because i'm currently working on another part of the site right now.

  4. #4
    Frenzied Member
    Join Date
    Apr 2009
    Location
    CA, USA
    Posts
    1,516

    Re: 3 divs side by side

    Actually it was a rhetorical question while I went to find it myself. Tis over here.

  5. #5

    Thread Starter
    Fanatic Member
    Join Date
    Jun 2008
    Posts
    1,023

    Re: 3 divs side by side

    that won't work because there will be a footer under the divs which shouldn't go 1000px down, it should be sticky to the bottom, and thats why i need it to be 100&#37; in height...

  6. #6

    Thread Starter
    Fanatic Member
    Join Date
    Jun 2008
    Posts
    1,023

    Re: 3 divs side by side

    i found a solution, i didn't need all 3 divs to be 100&#37; in height so 1 is enough, that is possible if you set 100% in
    Code:
    body, html {height:100%}

Posting Permissions

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



Click Here to Expand Forum to Full Width