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

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

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

Post 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
Last edited by Luke on Tue Nov 07, 2006 4:23 pm, edited 1 time in total.
User avatar
hawleyjr
BeerMod
Posts: 2170
Joined: Tue Jan 13, 2004 4:58 pm
Location: Jax FL & Spokane WA USA

Post 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>
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post 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?
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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.
User avatar
hawleyjr
BeerMod
Posts: 2170
Joined: Tue Jan 13, 2004 4:58 pm
Location: Jax FL & Spokane WA USA

Post 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 :)
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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 :(
User avatar
hawleyjr
BeerMod
Posts: 2170
Joined: Tue Jan 13, 2004 4:58 pm
Location: Jax FL & Spokane WA USA

Post by hawleyjr »

Can you post what you've done?
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

~Ninja, where's your original code? Have you played around with negative margins before?
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

try putting your image inside your green div and float it.
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post 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>
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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!
Post Reply