
CSS clear property [56K warn - 11k image in thread][solved]
Moderator: General Moderators
CSS clear property [56K warn - 11k image in thread][solved]
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...


Last edited by Luke on Tue Nov 07, 2006 4:23 pm, edited 1 time in total.
Untested:
Modified a little:
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>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:
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?
Would you be able to slap together an image of how you want it to look?
- Chris Corbyn
- Breakbeat Nuttzer
- Posts: 13098
- Joined: Wed Mar 24, 2004 7:57 am
- Location: Melbourne, Australia
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>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.
relevant css:
Thanks for taking a look - anybody who is generous enough to sift through all this for me. I'm at a loss.
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>
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;
}