CSS - Float/clear Problem In 2-col Liquid Layout

Hello,

I'm trying to float an image inside a content div that is inside a wrapper div that already has a float left (nav) div earlier in the html. I know that this means that the floated image div will not be cleared until after the already floating nav div, since this is the one that comes earlier in the html and is quite large. It leaves a large gap until it clears the nav div.

I have tried a couple of things, here is the page I'm working on and this is the css file

This hasn't been tested on Windows, so I have no idea how it looks.
It has been tested on the Mac: Safari, Opera, Netscape and Firefox display as described above, but IE Mac is way off whack.

The current setup of the page is this:

HTML: Code:

<div id="content">
	<div id="breadcrumb"><a href="http://www.huntacular.com/">Homepage</a></div>
	
	<div class="image1">
		<img class="left" src="./images/pic.png" alt="Mystery Image" width"260" height="150">
		<p class="red">Etiam vulputate rutrum dui. Cum sociis natoque penatibus et magnis dis 
		parturient montes, nascetur ridiculus mus.</p>
	</div>
	<div class="image2">
		<img class="right" src="./images/pic.png" alt="Mystery Image" width"260" height="150">
		<p class="orange">Donec accumsan. Pellentesque ac est vitae sapien scelerisque auctor. Nunc pede 
		diam, interdum vel, dictum ut, egestas eget, metus. Maecenas eget sapien.</p>
	</div>
		
	<div class="another3">
		<img class="left" src="./images/pic.png" alt="Mystery Image" width"260" height="150">
		<p class="blue">Etiam vulputate rutrum dui. Cum sociis natoque penatibus et magnis dis parturient 
		montes, nascetur ridiculus mus. Sed vulputate. Nulla ac leo sollicitudin mauris fringilla 
		consectetuer.</p>
	</div>

CSS: Code:

img.left {
	float: left;
	border: solid 1px black;
	padding: 10px;
	margin-right:10px;
	margin: bottom: 10px;
}

img.right {
	float: right;
	border: solid 1px black;
	padding: 10px;
	margin-left:10px;
}

.image1 {
	border: red 1px solid;
	padding : 0px;
}
.image2 {
	border: orange 1px solid;
	padding : 0px;
}
.image3 {
	border: blue 1px solid;
	padding : 0px;
}
/* Trying to sort the float problem - this sends IE Mac nuts, not checked on IE Win */
.another:after {
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
}
.another {display: inline-table;}

/* Hides from IE5/Mac \*/
* html .another {height: 1px;}
.another {display: block;}
/* End hide from IE5/Mac */

/* .clearer {
	clear: both;
} */

p.red {
	color: red;
}
p.orange {
	color: orange;
}
p.blue {
	color: blue;
}

Is there a work around? I thought I'd found one in the third attempt - the one with blue text, but I'm not sure if I've implemented it correctly. Also, IE Mac isn't doing any of these correctly either (well, nearly the second one, but I haven't tested this stuff on Windows either.

Is there a solution?

I have a pretty typical three column layout with col1 floating left, col2 in the middle and col3 floating right. The HTML calls the divs in order of col1,col3,col2 and everything generally works fine with the exception of using a div in the middle column (col2) with a style that has clear:both in it. The clear:both clears all items in the sidebar columns and not just in the middle column (which is what I want). The problem can be seen at the below URLs.

wwwDOTjessiekpowellDOTcom/2009/08/kristin-cavallari-filming-on-malibu-beach-for-the-hills/

and wwwDOTjessiekpowellDOTcom/2009/10/alessandra-ambrosio-bikini-photo-shoot/

As you will see the second set of images from the gallery is displayed after a huge gap of white space after it has cleared the last div in the right sidebar. What I want is to just clear the first row of images in the middle column. This does not just affect images but anything with a div style=clear:both

Any suggestions will be appreciated as I've exhausted my skills on this one.

Hello all, first time poster here...

I was working on a new site for an RP environment I gm using a table based layout. I ran into some problems and got fed up with it, So now for all the great reasons out there I decided to better learn CSS overnight and make the layout based on div tags and all that good stuff instead.

After piling all my information into the page I've been having some funky stuff happen to the layout; the right most column moves down below the other two if the window takes up less than the 1000px width I've allotted. Does anyone know why and a way to fix this? Please feel free to rip on my usage of png-s or anything else you'd like to also

Here's a temp link to the page on my site: louisjustmanDOTcom/prinz/newMOTD.html

...and a direct to my css file too: louisjustmanDOTcom/prinz/css/master.css

Thanks a lot in advance!

EDIT: Wow; all that time and it was a stupid mistake... extra closing div tag where i didn't need one.

At the moment I have a css layout nearly done.
It works fine in IE and Firefox except for that the left navbar does not push the footer down. Instead it jumps out the parent div.

The 2nd (maincontent) and 3rd (right column) do push the footer down. This wouldn't be such a problem if the navbar would contain static content, but it is dynamic and database driven.
A simple solution would be to move the navigate thing to the right bar, but sadly I'm not allowed to do that.

Layout CSS code
Code:

#body {
 position:relative;
 margin:0 auto;
 width:94%;
 min-width:50em;
 max-width:70em;
 border: 15px solid #ffffff;
}
#header {
/* border: 1px solid #000000;*/
 height: 185px;
 background-color:#ffffff;
 background-image: url(../images/design/test3.jpg);
}
#outer_wrapper {

 background: #ffffff url(../images/design/background_3.gif) repeat-y left;

 border-top:none;
 border-bottom:none;
}
#wrapper {

 background: url(../images/design/background_2.gif) repeat-y right;
}

#container {
 width: 100%;
 float: left;
 margin-right: -200px;
 background: #ffffff url(../images/design/background_2.gif) repeat-y right;
/*border:1px solid #000000;*/
}
#content {
 margin-right: 200px;
 /*background: url(../images/design/background_3.gif) repeat-y left;*/

}
#main {
/*border:1px solid #000000;*/
 margin-left: 150px;
/*  background-color:#bbbbbb;*/
}
#left {
 position: absolute;
 top:189px;
 width: 140px;
/* height: 100%;*/
 float: left;
 text-align: left;
/* border-left: 2px solid #bbbbbb;*/
 font:normal normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#sidebar {
 width: 200px;
 float: right;
  clear:right;
}
#footer {
/* border: 1px solid #000000;*/
 background: #304773;
 height: 30px;

}

.last {
 margin-bottom: 0;
}
.clearing {
 height: 0;
 clear: both;
}

Div structu
Code:

  <div id="body">
    <div id="header"><h1>Welkom bij Overeem de Haas</h1>
    </div>
    <div id="outer_wrapper">

      <div id="wrapper">
        <div id="container">
          <div id="content">
          
            <div id="main">
            </div>

            <div id="left">
                 <? include ("../include/navigatie.inc"); ?>
            </div>

            
          </div>
        </div>
        <div id="sidebar">
            <? include ("../include/uitloggen.inc");?>
            <? include ("../include/winkelmand.inc"); ?>
        </div>
        <div class="clearing">&nbsp;</div>
      </div>

    </div>

    <div id="footer"><p class="content"></p></div>
  </div>

navigatie.inc code
Code:

    <div id="navigatie">
            <ul>
               <li class="menu">Navigatie menu</li>
               <li><a href="index.php">Home pagina</a></li>
               <li><a href="#">Wat is Overeem?</a></li>
               <? ...
                 echo "<li><a href=\"#\">Contact</a></li>";
                 echo "</ul>";
                 echo "</div>";
               ?>

Live example

Can anyone (dev)shed some light on this?
I just can't get it to work without messing up the 3rd column.

Hello css gurus. I'm trying to fit a flash movie with 100% height in a liquid layout but i cant get rid of scroll bars.

i have tied to explain the problem in this image:

http://i(dot)imgur(dot)com/PhvSZ.gif
(sorry new members are not allowed to post with links)

in that image you can see its fine in case (1) but in case (2) when i add a header div on top, flash movie doesnt fill available space.

Can anyone tell me how can i fix it with a heading div on top?

Thanks.

I would like to create a 2-column layout with a content area on the left and a "sidebar" area on the right.

Pretty standard, right? Now the trick: on some pages, the sidebar will be absent, and I want the content area to then overflow the whole page width.

I tried the following:
Code:

<div style="background-color: red; float: left;">content area text</div>
<div style="background-color: blue; width: 200px; float: right;">sidebar text</div>

When div #2 is excluded, div #1 of course expands to take up the whole page width. So that works. The problem is that when they're both present, and div #1 has a lot of text, it just pushes div #2 down a line.

Note: The reason div #2 will sometimes not be present is that Drupal is generating the page, and plain leaves out div #2 if there's no content in it. It's not just empty -- it's not even included in the page.

Can anyone help me accomplish this? I've looked at a lot of liquid layouts, but none seem to do quite this.

This page works fine in Firefox, but in IE, the float makes the content move off the page to the left. I figured out that without a background-color applied to the .textBox style (which is the DIV that contains the text and image I am floating) it works. However, I really would like the .textBox to have a background color. Anybody knows what to do?

Here is the page:
http://www.jbbdesign.com/wip/index4.html

many thanks,
Julia

In this header www.johnschureman.com

I have an image, an h1 and a subtitle div.

Code:

<div id="header">
<img src="../images/jschu-crop150h.jpg">
<h1><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>" >:<?php bloginfo('name'); ?></a></h1>
	<div id="subtitle">
		<!-- Here's the tagline  -->
		<?php bloginfo('description'); ?>
	</div>
</div>

I cannot figure out in my css how to make the subtitle appear below the h1.

Code:

#header {
	margin:0; 
	padding:0;
	height:170px;
	padding: 0px;	
	margin-top: 3px;
/*	padding-top:110px;
	padding-bottom:10px;
	padding-right:20px;
	padding-left:5px;*/
	border-bottom: 1px solid #bab1b1;
	background: #404040;
}
#header img {
	float:left;
	display:inline; 
	margin: 0 auto;	
	padding: 10px 10px;
	border:none;
	}
#header h1{
	display: inline;
	float:right;
	padding:0px;
	margin: 0px;
	padding-top:100px;
	margin-bottom:3px;
	margin-right: 5px;
	font-size: 2.4em;
	letter-spacing:0.1em;
}

#subtitle {
	text-align:right;
	font-family:"Century Gothic", "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
	margin-bottom:3px;
	margin-right: 5px;
	font-size: 0.9em;
	text-transform:uppercase;
	color:#bbb;
}

Hope this is enough info. I've been playing with clear, position, etc. Help? Thanks in advance.

- Willi

I can't figure out how to clear the float for the columns with the text column 1 and 2. If the other columns dont have a lot of text then the footer defaults to just under the image so where that 1+2 start.

Any ideas plase?

Code:

<div id="container">
  
    <div id="home_col_1">
        <img src="images/holder_slideshow.png" alt="" width="446" height="365" />
        <div id="home_col_1_1">
            column 1<br />
            column 1<br />
            column 1<br />
            column 1<br />
            column 1
      </div>
        <div id="home_col_1_2">
            <p> column 2</p>
            <p>column 2</p>
            <p>column 2</p>
            <p>column 2</p>
            <p>column 2</p>
            
      </div>
    </div>
    
  <div id="home_col_2">
    <p>column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3</p>
  </div>
    
  <div id="home_quicksearch">
        Search Box Here
  </div>
    
    <div id="home_col_3">
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
  </div>
    
  <div id="home_col_4">
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
  </div> 
  
<div class="clear_floats"></div>     
</div>

Code:

#container				{	width: 986px; margin:0 auto; }

#home_col_1				{	width:446px; height:365px; float:left;	 }
#home_col_1_1			{	width:207px; float:left; padding:0 10px 0 0; border-right:#CECECE 1px solid; margin-top:10px;	 }
#home_col_1_2			{	width:207px; float:left; padding:0 10px 0 10px; border-right:#CECECE 1px solid; margin-top:10px;		 }
#home_col_2				{	width:171px; float:left; padding:10px 10px 0 10px; border-right:#CECECE 1px solid; }
#home_col_3				{	width:165px; float:left; padding:0 10px; border-right:#CECECE 1px solid; }
#home_col_4				{	width:142px; float:left; padding:0 10px; }

#home_quicksearch		{ 	width:328px; padding:10px 10px 10px 0; float:left; border-bottom:#CECECE 1px solid; margin:0 0 10px 10px; 					
							background-color:#FFFFFF; }



#footer 				{ width: 966px; margin:0 auto; padding:10px; margin-top:10px; border-top:#CECECE 1px solid; }

Does anyone know why the clear: left isn't working on firefox 1.0 on this page.

Generic Page with floating divs and then clearing them for a new line.
http://section31.us/temp/float_boxes.html

Am I doing something wrong or is this a bug?

Hi all,

I'm trying to get this mock up's structure finished STAT so that I can move on to the graphical, stylistic, and textual elements that need to be done, but I'm running into issues with IE... (surprised?)

The goal is to get it to render as it does in FF and Safari. The issue right now is that, while the #body div is where I want it, it is not accepting the 85px bottom margin I am trying to code.

Any help?

(keep in mind I had to throw it in quirks mode to get it all to render like this)

SITE is at:

w w w [DOT] w h o l l y l i f e [DOT] o r g [SLASH] d r u m 2 [SLASH]

Thanks,

Michael

Hello

on this page, the author shows a 3 Column Liquid Layout based on CSS percentage use.

http://matthewjamestaylor.com/blog/perfect-3-column.htm

The column layout is 2,1,3 (center page comes first in the html code).

He states "The columns can also be configured to any other order if required."

How to do the column configured as 1,2,3? (left, middle, right)?

i'm trying to write a liquit layout based in layers and css and have the next code:

Code:

<style type='text/css'>
<!--
body{font-family:Verdana, Arial, Helvetica, sans-serif; margin:5px 5px 5px 5px; position:relative;}
#header{border:1px solid #000000; width:100%; height:60px; position:absolute; top:0px; left:0px; min-width:600px;}
#menu{border:1px solid #000000; position:absolute; top:60px; left:0px; width:15%; min-width:150px;}
#content{border:1px solid #000000; position:absolute; top:60px; left:15%; width:85%; min-width:450px;}
-->
</style>

and in the body:
Code:

<body>
<div id='header'>header</div>
<div id='menu'>menu links</div>
<div id='content'>contents</div>

the little problem here is thata due to the percentages used to determine the left position of the contents layer it overlaps with the menu layer when i resize the window
but i've seen a lot of pages that do not behave this way... what am i missing????

Hello,
To make my columns have equal lengths in fixed layouts, I have employed the Faux technique successfully.

What would be the best technique for liquid layouts?
I know of a js that suppose to equal the columns, and someone told there is a CSS method also. Can you still use the Faux?

Any suggestions?

Hey all, up until recently I have used the various styles and hacks using :after or clear:both; to rectify and force divs to clear. However knowing that these methods won't validate and aren't strictly proper, I've decided to ditch all those methods and try to sort floated divs out correctly.

Here is the culprit;
Code:

<div style="height:144px; margin-bottom:10px;">
								
	<div style="height:110px; padding:0px 0px 5px 0px;">
		<div style="width:80px; height:110px; float:left;">
			<div><!-- DYNAMIC IMAGE --></div>
		</div>
	
		<div style="width:655px; height:110px; float:left;">
			<div style="padding:5px 0px 2px 10px;"><!-- DYNAMIC TEXT --></div>
			<div style="padding:5px 0px 2px 10px;"><!-- DYNAMIC TEXT --></div>
			<div style="padding:5px 0px 2px 10px;"><!-- DYNAMIC TEXT --></div>
			<div style="padding:5px 0px 2px 10px;"><!-- DYNAMIC DESCRIPTION --></div>
		</div>
	</div>
	
	<div style="height:29px; background-color:#D8D8D8;">
		<div style="padding:7px 0px 0px 10px; margin:0px 5px 0px 0px; float:left;"><!-- DYNAMIC TEXT --></div>
		<div style="padding:7px 0px 0px 10px; float:left;"><!-- DYNAMIC TEXT --></div>
		<div style="padding:3px; float:right;"><!-- DYNAMIC TEXT --></div>
	</div>
	
</div>

The problem is with the contents of <!-- DYNAMIC DESCRIPTION -->. This is user entered through a HTML editor in their admin console. This can have line breaks etc. and therein is where my problem lies.

I have restricted the showing of the "Description" text to 175 chars. Meaning, and providing the user enters more than 175 chars before a line break, it would rarely go on to a new line when displayed in the above page. However if a user added multiple line breaks the content would still display overlaying the bottom, and final div.

Now I understand I could remove line breaks etc before rendering, but I would like not to have to do that, I would rather the "Description" div stretch to accomodate the text however it presents itself than run the risk of one day having "leaking" overlaying content.

I tried the width:100%; overflow:auto; but this results in scrollbars. I don't want to use hidden either because again it rendered badly.

I've also used clear:both; on the final div with no joy.

Is there anything that can be done? I'm sure there is, maybe I just can't see the wood for the trees at the moment.

Any suggestions would be hugely appreciated. Thanks in advance.