Clear 3 out of 4 floats

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • KeredDrahcir
    Contributor
    • Nov 2009
    • 426
    #1

    Clear 3 out of 4 floats

    I'm using floating division to create a 4 column layout. I'm floating the first column to the left to cotain the menu. Then I've got a second div which contains the last three divs. However I want to put a footer under those three but not the menu div but if I use a clear it puts it under the menu div. Is there a way to put it under just the three.
    Code:
    +-------------------------------------------------------+
|+-----------------------------------------------------+|
||                BANNER                               ||
|+-----------------------------------------------------+|
|                                                       |
|+---------+ +-----------------------------------------+|
|| LEFT    | | +----------+ +-----------+ +----------+ ||
||         | | |          | |           | |          | ||
||         | | |          | |           | |          | ||
||         | | |          | |           | |          | ||
||         | | |          | |           | |          | ||
||         | | |          | |           | |          | ||
||         | | |          | |           | |          | ||
||         | | |          | |           | |          | ||
||         | | |          | |           | |          | ||
||         | | +----------+ +-----------+ +----------+ ||
||         | |                                         ||
||         | | +-------------------------------------+ ||
||         | | |               FOOTER                | ||
||         | | +-------------------------------------+ ||
|+---------+ +-----------------------------------------+|
+-------------------------------------------------------+
    I hope the above makes it clear.
    Tags: None
    • Rabbit
      Recognized Expert MVP
      • Jan 2007
      • 12517
      #2
      Are you sure the style is set up correctly?
      Code:
      <html>
	<head>
		<style>
			.cont {float: left; height: 400px;}
			.in {float: left; height: 400px;}
			.red {background-color: red; width:100px;}
			.blue {background-color: blue; width:300px;}
			.yellow {background-color: yellow; width:100px;}
			.green {background-color: green; width:100px;}
			.purple {background-color: purple; width:100px;}
			#footer {clear:both; width: 300px; height: 100px; background-color: orange;}
		</style>
	</head>
	
	<body>
		<div class="cont red"></div>
		
		<div class="blue">
			<div class="in yellow"></div>
			<div class="in green"></div>
			<div class="in purple"></div>
			<div id="footer" class="blue"></div
		</div>
	</body>
</html>

        Comment

        • Death Slaught
          Top Contributor
          • Aug 2007
          • 1137
          #3
          Hey KeredDrahcir! It's been a while. :)

          You're looking for something like this, right?

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

	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<style type="text/css">
		
			* { margin: 0; padding: 0;}
			#wrapper { width: 1000px; height: 724px; border: 1px solid #000; margin: 0 auto;}
			
			#header { height: 100px; padding: 10px; border: 1px solid yellow;}
			#header h1 { border: 1px solid blue;}
			
			#sidebar { width: 300px; height: 600px; border: 1px solid green; float: left;}
			
			#main { width: 696px; height: 600px; border: 1px solid red; text-align: center; float: left;}
			#main .col { width: 155px; height: 460px; border: 1px solid purple; text-align: left; margin: 10px; display: inline-block;}
			#main #footer { width: 694px; height: 100px; border: 1px solid brown; text-align: left;}
			
		
		</style>
	</head>
	
	<body>
	
	<div id="wrapper">
	
		<div id="header">
			<h1>Banner</h1>
		</div>
		
		<div id="sidebar">
			<h1>Left</h1>
		</div>
		
		<div id="main">
		
			<div class="col"></div>
			<div class="col"></div>
			<div class="col"></div>
			
			<div id="footer">
				<h1>Footer</h1>
			</div>
		</div>
	
	</div>
	
	</body>
	
</html>
          Obviously this is a fixed design. The only real issue is that it uses display: inline-block;, which screws with the design in IE7. To fix that you just need to use:

          Code:
          #main .col { width: 155px; height: 460px; border: 1px solid purple; text-align: left; margin: 10px; display: inline-block; zoom: 1; *display: inline;}

          Regards
          Death

            Comment

            Previous template Next
            Working...