My left div is disrupting my center div and I don’t know why. If I give my left div a height, it leaves my center div alone.
Why is that?
http://www.lincolnsrealdeals.com/temp111_debuger_bu_unloaded_120620.php
Ideally. I’d like my left div to be as high as my center div, but I have to get past this issue first.
It’s not really clear what layout you are aiming for there. Could you maybe post a screen shot of the desired layout?
The image is the left div and the colored rectangles are in the center div. if I delete the height of the left div or increase the height of the left div, the center dive gets disrupted.
Why is that?
If you don’t want the left div to disrupt the right div, remove all of the <div style=“clear:both;margin-bottom:6px;”></div> instances in the right div. It looks like your clearing the float every time you use it. After you remove those instances, you can remove the height off your left div. Hope that helps.
Hi,
If you float a column to the left then a static right column will flow to the side but any cleared elements in the static column will try and clear the left float.
Although you should remove all those empty divs with clear:both applied (as mentioned above) you may still need to clear each float (depending on the width available) which can be done by adding clear: both to the floated element anyway without using extra markup. However, you still need to contain the clearing effect to the right column only and this can be done by adding overflow:hidden to the parent div to create a new block formatting context.
Here:
<div style="width:741px; margin: 0 auto;background:white;[B]overflow:hidden[/B]">
<div class="exla">
You should also remove all those inline styles and use classes instead as debugging is a nightmare with so many inline styles.
You will very rarely need to use a clearing div these days:
<div style="clear:both;margin-bottom:6px;"></div>
Either clear each float or if you need to contain floats then use either the oveflow:hidden method or the clearfix method if visible overflow is required.
I added clear:both; and removed the height, in the left div, and nothing happened.
Then, I added overflow:hidden; (as you suggested) to center div and I got much more of what I need except now there’s a white column between my image and my center div, that I can’t identify with firebug.
This link displays what I need except the image needs to be almost touching the center div. http://www.lincolnsrealdeals.com/temp111_debuger_bu_unloaded_120620.php
How should I be using clear:both; based on this link to make my left div almost touch my center div?
[FONT=Verdana]Your problem lies here:
<div style="width:741px; [COLOR="#FF0000"]margin[/COLOR]: 0 [COLOR="#FF0000"]auto[/COLOR];background:white;overflow:hidden;">iv style="width:741px; margin: 0 auto;background:white;overflow:hidden;">
That margin:auto is centering the div in the remaining space in the viewport.[/FONT]
Thanks Technobear. One of the most important things I’d like to think I’ve learned from coding is the value of an open mind, but I still get blindsided. I got so committed to that div over the years, that I couldn’t see it as part of the problem. That wasn’t just a reality check. It’s a reminder to always challenge the assumptions.
Anyway, I’m still fuzzy about clear. Paul O’B gave me an article, but I really don’t understand the issue as well as I want to.
Please restate the reason for clear: or suggest a link that describes the problem. O’B’s link dealt more with the solution.
[FONT=Verdana]I think Paul was referring to floats generally, rather than in this particular instance.
If you had a containing div 600px wide, and divs inside that of 250px, floated alternately left and right, then the second div would have room to sit alongside the first. In that instance, you’d need to apply a clear to prevent this.
In your case, your containing div is 741px wide, and your inner divs are 570px wide. There isn’t room for two of them to sit side-by-side, so you don’t need to worry about clearing.
Does that help?[/FONT]
“clear” is pretty simple and it just means that an element will “clear” the floated content above it in the html. This means that it must start under the bottom margin of the floated element and not above it. (Clear:left applies to floated elements to the left of the cleared element and float:right refers to floated elements to the right of the cleared element). Without “clear” applied an element will always try and rise up alongside a float defined earlier in the html assuming that there is room for the content to fit.
In your example there is actually no room for content in the right column to slide up because the elements are too wide but some older browsers would occasionally try and squeeze them on the end. Therefore if you want to make sure that something that follows a float clears the float then add clear:both to it.
Don’t confuse “clearing floats” with “containing floats” as they are different things. Containing floats is a mechanism to ensure that floated content is contained within a parent div. Floats are removed from the flow so a parent div that holds only floated children will in fact hold nothing and have zero height. Therefore any background-colour on the parent will not show. In order for the background of a parent to stretch around a float you need to contain the float which can be done by creating a block formatting context which is commonly done by applying overflow:hidden (and zoom:1.0 for ie7 and under). Or alternatively by using the clearfix method already mentioned.
The CSS FAQ (see my sig) had a section on floats worth reading.
The problem with your original method is explained in this old demo.
As mentioned earlier your code is a nightmare to work with and your html could be reduced by 95% approx.
e.g. Just like this:
<div class="sidebar"><img style="margin:0px;" src="http://www.lincolnsrealdeals.com/lincoln-nebraska-street.JPG" alt="some_text"/></div>
<div class="wrap">
<div class="box exla"></div>
<div class="boxr exr"></div>
<div class="box exl"></div>
<div class="boxr exr2"></div>
<div class="box exl2"></div>
<div class="boxr exr3"></div>
<div class="box exl3"></div>
<div class="boxr exr4"></div>
<div class="box exl3"></div>
<div class="boxr exr5"></div>
</div>
All the inline styles should be removed to the css as follows:
Full code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="hello" />
<title>here</title>
<style type="text/css">
body { font-family:Arial, Helvetica, sans-serif }
.wrap {
width:741px;
margin:0;
background:white;
overflow:hidden;
}
.sidebar {
float:left;
width:290px;
background:pink;
overflow:hidden;
}
.box, .boxr {
width:570px;
height:160px;
clear:both;
margin:0 0 6px;
float:left;
border:3px solid gray;
}
.boxr { float:right }
.exla { margin-top:160px }
.exla {
background-color:LightCyan;
background: -moz-linear-gradient(top, LightCyan, Cyan);/* for firefox 3.6+ */
background: -webkit-gradient(linear, left top, left bottom, from(LightCyan ), to(Cyan)); /* for webkit browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= LightCyan, endColorstr= Cyan); /* for IE */
}
.exr {
background-color:LightCoral;
background: -moz-linear-gradient(top, LightCoral, OrangeRed );/* for firefox 3.6+ */
background: -webkit-gradient(linear, left top, left bottom, from(LightCoral ), to(OrangeRed )); /* for webkit browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= LightCoral, endColorstr= OrangeRed ); /* for IE */
}
.exl {
background-color:PaleVioletRed;
background: -moz-linear-gradient(top, PaleVioletRed, Red );/* for firefox 3.6+ */
background: -webkit-gradient(linear, left top, left bottom, from(PaleVioletRed ), to(Red )); /* for webkit browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= PaleVioletRed, endColorstr= Red ); /* for IE */
}
.exr2 {
background-color:Cyan;
background: -moz-linear-gradient(top, Cyan, CornflowerBlue);/* for firefox 3.6+ */
background: -webkit-gradient(linear, left top, left bottom, from(Cyan ), to(CornflowerBlue)); /* for webkit browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= Cyan, endColorstr= CornflowerBlue); /* for IE */
}
.exl2 {
background-color:LightBlue;
background: -moz-linear-gradient(top, LightBlue, Blue );/* for firefox 3.6+ */
background: -webkit-gradient(linear, left top, left bottom, from(LightBlue ), to(Blue )); /* for webkit browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= LightBlue, endColorstr= Blue ); /* for IE */
}
.exr3 {
background-color:LightGreen;
background: -moz-linear-gradient(top, LightGreen, LawnGreen );/* for firefox 3.6+ */
background: -webkit-gradient(linear, left top, left bottom, from(LightGreen ), to(LawnGreen )); /* for webkit browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= LightGreen, endColorstr= LawnGreen ); /* for IE */
}
.exl3 {
background-color:YellowGreen;
background: -moz-linear-gradient(top, YellowGreen, Yellow);/* for firefox 3.6+ */
background: -webkit-gradient(linear, left top, left bottom, from(YellowGreen ), to(Yellow)); /* for webkit browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= YellowGreen, endColorstr= Yellow); /* for IE */;
}
.exr4 {
background-color:LightSteelBlue;
background: -moz-linear-gradient(top, LightSteelBlue, Blue);/* for firefox 3.6+ */
background: -webkit-gradient(linear, left top, left bottom, from(LightSteelBlue ), to(Blue)); /* for webkit browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= LightSteelBlue, endColorstr= Blue); /* for IE */
}
.exl3 {
background-color:LightSalmon;
background: -moz-linear-gradient(top, LightSalmon, LightCoral );/* for firefox 3.6+ */
background: -webkit-gradient(linear, left top, left bottom, from(LightSalmon ), to(LightCoral )); /* for webkit browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= LightSalmon, endColorstr= LightCoral ); /* for IE */
}
.exr5 {
background-color:LawnGreen;
background: -moz-linear-gradient(top, LawnGreen, Green);/* for firefox 3.6+ */
background: -webkit-gradient(linear, left top, left bottom, from(LawnGreen ), to(Green)); /* for webkit browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= LawnGreen, endColorstr= Green); /* for IE */
}
</style>
</head>
<body>
<div class="sidebar"><img style="margin:0px;" src="http://www.lincolnsrealdeals.com/lincoln-nebraska-street.JPG" alt="some_text"/></div>
<div class="wrap">
<div class="box exla"></div>
<div class="boxr exr"></div>
<div class="box exl"></div>
<div class="boxr exr2"></div>
<div class="box exl2"></div>
<div class="boxr exr3"></div>
<div class="box exl3"></div>
<div class="boxr exr4"></div>
<div class="box exl3"></div>
<div class="boxr exr5"></div>
</div>
</body>
</html>
Thanks Paul O’B for a great explanation and to technoBear, jwpizzy, and ralph.m