Page 1 of 1

CSS clear property [56K warn - 11k image in thread][solved]

Posted: Tue Nov 07, 2006 2:29 pm
by Luke
Alright, I have a two-column layout on one of my pages. The left column is float: left and the right content is just margin-left: 200px (the width of the left column). Now there is a div in the right column. There is an image in that div that is floated left. Then there is content that is supposed to clear: left that image... but it clears the entire left column. I have it in a containing div... why is it doing that. I realize that was a horrible description, so I drew it up for you guys...

Image

Posted: Tue Nov 07, 2006 3:11 pm
by hawleyjr
Untested:

Code: Select all

<div id="containter">
	<div id="left_col" style="width: 200px;float:left">
	
	</div>
	<div id="right_col" style="width: 600px">
		<div id="blue" style="padding:2px;padding-top:50px">
			<div id="blue_row1">
				<div id="yellow" style="float:left;width: 300px">
				</div>
				<div id="green" style="width: 300px">
				</div>
			</div>
			<div id="blue_row2" style="clear:left">
				<div id="red" style=" width: 600px">
				</div>
			</div>
		</div>
	</div>
</div>
Modified a little:

Code: Select all

<div id="containter" style="width:820px;border: 1px solid green;position:absolute;">
	<div id="left_col" style="width: 200px;float:left;border: 1px solid gray;">
		Left
	</div>
	<div id="right_col" style="width: 610px;float:left;padding-left: 5px;">
		<div id="blue" style="padding:2px;padding-top:10px;">
			<div id="blue_row1">
				<div id="yellow" style="float:left;width: 300px;border: 1px solid yellow;height: 200px;">
					Yellow
				</div>
				<div id="green" style="width: 290px;border: 1px solid green;float: left;">
					Green
				</div>
			</div>
			<div id="blue_row2" style="clear:left;padding-top: 10px;">
				<div id="red" style=" width: 600px;border: 1px solid red">
					Red
				</div>
			</div>
		</div>
	</div>
</div>

Posted: Tue Nov 07, 2006 3:23 pm
by nickvd
This wont help you, but I remember reading somewhere that the clear property will clear ALL floated elements that come before the cleared element in the source tree.. If i could remember the page that i read that on, it had a solution to your problem...

Would you be able to slap together an image of how you want it to look?

Posted: Tue Nov 07, 2006 3:34 pm
by Luke
hawleyjr - is that possible without the width? I'd like for the width of the red box to be automatic.
nickvd wrote:Would you be able to slap together an image of how you want it to look?
The image I posted is how I want it to look.

Posted: Tue Nov 07, 2006 3:36 pm
by hawleyjr
The Ninja Space Goat wrote:hawleyjr - is that possible without the width? I'd like for the width of the red box to be automatic.
yeah, just remove the width :)

Posted: Tue Nov 07, 2006 3:40 pm
by Luke
I just noticed you named the container containter... I do that almost every time on accident as well... I wonder why that's such a common mistake. funny.

Posted: Tue Nov 07, 2006 3:56 pm
by Luke
nothing seems to work. hawleyjr... your solution worked great until I filled the green box with a bunch of text (which is what will be going in there) and without a set width, it always clears to down below the image :(

Posted: Tue Nov 07, 2006 3:59 pm
by hawleyjr
Can you post what you've done?

Posted: Tue Nov 07, 2006 3:59 pm
by Chris Corbyn
~Ninja, where's your original code? Have you played around with negative margins before?

Posted: Tue Nov 07, 2006 4:01 pm
by Burrito
try putting your image inside your green div and float it.

Posted: Tue Nov 07, 2006 4:02 pm
by Burrito
something like this:

Code: Select all

<div id="containter" style="width:820px;border: 1px solid green;position:absolute;">
   <div id="left_col" style="width: 200px;float:left;border: 1px solid gray;">
      Left
   </div>
   <div id="right_col" style="width: 610px;float:left;padding-left: 5px;">
      <div id="blue" style="padding:2px;padding-top:10px;">
         <div id="blue_row1">
            
            <div id="green" style="border: 1px solid green;float: left;">
			<div id="yellow" style="float:left;width: 300px;border: 1px solid yellow;height: 200px;">
               Yellow
            </div>
               blah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blah
            </div>
         </div>
         <div id="blue_row2" style="clear:left;padding-top: 10px;">
            <div id="red" style=" width: 600px;border: 1px solid red">
               Red
            </div>
         </div>
      </div>
   </div>
</div>

Posted: Tue Nov 07, 2006 4:04 pm
by Luke
I'd like to just post the url to the page, but I'd get in trouble. Hang on let me make a mock-up with style="" so it's easier to see what's going on...

EDIT: actually, here... this is the page - it's being created by an ecommerce template, so there is no indenting... which makes things that much more irritatingly difficult.

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Bags</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="style/main.web.css">
</head>
<body>
<div class="width">
<div class="minwidth">
<div class="container">
<div id="container">
<div id="header">
<div id="title"><span>Bags</span></div>
<div id="navigation"><ul><li><a href="/c/WK">Work</a></li><li><a href="/c/PL">Play</a></li><li><a href="/c/TR">Travel</a></li><li><a href="/c/SC">School</a></li><li><a href="/c/DG">Digital</a></li><li><a href="/c/OEM">Brands</a></li></ul></div>

</div>
<div id="content">
<div id="state_bar">
<form method="post" action="#">
<input type="hidden" name="Store_Code" value="BS">
<input type="hidden" name="Screen" value="SRCH">
<div id="search_box" class="float_right"><input type="text" name="search" class="text search" /> <a class="rollover"><input type="image" src="images/buttons/search_darkbg.gif" alt="Search" class="search" /></a></div>
</form>
</div>
<div id="color_bar_top"><div class="color_one"></div><div class="color_two"></div><div class="color_three"></div></div>
<div id="categories">
<ul>
<li class="cat"><a href="/c/WK" class="cat">Work</a></li>
<li class="cat"><a href="/c/PL" class="cat">Play</a></li>
<li class="cat"><a href="/c/WM" class="cat">Women's</a></li>
<li class="cat"><a href="/c/MN" class="cat">Men's</a></li>
<li class="cat"><a href="/c/YO" class="cat">Youth</a></li>
<li class="cat"><a href="/c/OEM" class="cat">Brands</a></li>
<li class="cat1"><a href="/brand/ACO" class="cat1">Ambico</a></li>
<li class="cat1"><a href="/brand/AMB" class="cat1">AmeriBag</a></li>
<li class="cat1"><a href="/brand/AMT" class="cat1">American Tourister</a></li>
<li class="cat1"><a href="/brand/APC" class="cat1">Ampac</a></li>
<li class="cat1"><a href="/brand/ALT" class="cat1">Atlantic</a></li>
<li class="cat1"><a href="/brand/ALA" class="cat1">Atlantic Audio</a></li>
</ul>
</div>
<div id="inner_content">
<div id="shopping_bar">
<a href="/page/LOGN">Login</a> |
<a href="/page/BASK">View Cart</a> |
<a href="/page/OINF">Checkout</a>
</div>
<div class="clear_right"></div>

<div class="float_left" style="width: auto;">

<!-- LAYOUT STARTS HERE //-->

<div class="cochin_bold">Title</div>
<div id="brand_category"> 
 <div class="description">
  <img src="images/home.jpg" alt="alternate text" class="float_left" style="padding-right: 10px" width="575" height="200">
  <p>Mauris est nulla, laoreet ac, vehicula a, consectetuer vel, erat. Morbi nonummy turpis nec mi. Nam volutpat accumsan sem. Donec sagittis tempus ligula. Aenean viverra dui vel nisi. Duis ultricies sapien in elit. Nullam auctor congue pede. Integer ultrices, massa a cursus ultrices, magna massa rhoncus lorem, adipiscing aliquam orci tellus sit amet ante. Ut porta libero laoreet justo. Nam tristique felis at neque. Curabitur tellus massa, mollis id, accumsan eu, tempus eu, felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut accumsan.
  </p>
 </div>
 <div class="clear_left" style="background-color: yellow;">asdff da df</div>
 </div>
</div>

<!-- LAYOUT ENDS HERE //-->

<div class="clear"></div>
</div>
</div>
<div id="color_bar_bottom"><div class="color_one"></div><div class="color_two"></div><div class="color_three"></div></div>
</div>
<div id="footer">
<div id="footer_links">
<ul>
<li><a href="">Home</a></li>
<li><a href="/c/WK">Work</a></li>
<li><a href="/c/PL">Play</a></li>
<li><a href="/c/TR">Travel</a></li>

<li><a href="/c/SC">School</a></li>
<li><a href="/c/MB">Mobile</a></li>
<li><a href="/c/OEM">Brands</a></li>
</ul>
</div>
<div id="legal">Legal text</div>
</div>
</div>
</div>
</div>
</body>
</html>

relevant css:

Code: Select all

#container{
	width: 100%;
	background-color: #999;
}
.box{
	border: 1px solid #999;
	margin: 0 auto 20px auto;
	padding: 20px;
	width: 500px;
	background-color: #efefef;
	color: #666;
}

/* The following hack thanks to Stu Nicholls over at http://www.cssplay.co.uk
/* for all browsers that understand min-width */
.width {width:100%; min-width:770px;}

/* the bodge for IE6 browsers */
* html .minwidth {border-left:770px solid #fff; position:relative; float:left; z-index:1;}
* html .container {margin-left:-770px; position:relative; float:left; z-index:2;}

#header{
	height: 69px;
	background: url(../images/layout/bg_top_gradient.jpg) repeat-x left top;
}

#title{
	width: 310px;
	height: 69px;
	background: url(../images/layout/title.png) no-repeat 0px 15px;
	float: left;
}
#title span{
	display: none;
}

#navigation{
	width: 460px;
	height: 69px;
	float: right;
	background: url(../images/layout/price_tag.gif) no-repeat right top;
}

#navigation ul{
	list-style-type: none;
	height: 69px;
	background: url(../images/layout/a_bag_for.jpg) no-repeat left top;
}

#navigation ul li{
	display: inline;
}

#navigation ul li a{
	display: block;
	width: 60px;
	height: 25px;
	float: left;
	background: url(../images/layout/sprite_nav_button.jpg) left top;
	color: #fff;
	font-size: .75em;
	font-weight: bold;
	text-decoration: none;
	line-height: 25px;
	text-align: center;
	margin-left: 2px;
	margin-top: 45px;
}

#navigation ul li a:hover{
	background-position: 0 -25px;
	color: #222;
}

#categories{
	width: 170px;
	float: left;
}

#container{
	background-color: #fff;
	color: inherit;
}

#state_bar{
	height: 28px;
	background-color: #bbb;
	margin-top: 3px;
}

#search_box{
	padding: 3px 10px 0 0;
	float: right;
}
/* Hide from IE6 */
html>body #search_box{
	padding-top: 5px;
}

#shopping_bar{
	float: right;
	line-height: 20px;
	padding: 5px;
}

#color_bar_top,
#color_bar_bottom{
	height: 9px;
	width: 100%;
	background-color: #669933;
}

#content{
	min-height: 275px;
	width: 100%;
	border-top: 1px solid #333;
	font-size: .75em;
}
/* Hides from IE5-mac \*/
* html #content {height: 275px;} /* Only show to IE-Win */
/* End hide from IE5-mac */

#inner_content{
	padding-left: 170px;
	background: url(../images/layout/faux_main.jpg) repeat-y left top;
}
#inner_content p{
	padding: 5px 5px 2px 5px;
}

#footer{
	height: 69px;
	background: url(../images/layout/bg_bottom_gradient.jpg) repeat-x left top;
	border-top: 1px solid #666;
	clear: both;
}

/* Brands Page Styling */

#brand_category{
	margin: 10px;
}
#brand_category img{
	padding: 0 10px 10px 0;
}
.description{
	padding: 5px 10px 10px 10px;
}
Thanks for taking a look - anybody who is generous enough to sift through all this for me. I'm at a loss.

Posted: Tue Nov 07, 2006 4:23 pm
by Luke
YAY! I just had to make the inner-container a width less than 100% and it stopped clearing the left column. Thanks for all your help guys!