PDA

View Full Version : A Coding Problem


Nimrod EX
01 Apr 2009, 07:01 PM
Well, I'm working with dreamweaver, and it has detected 2 problems with my code.

"Floating non-float bug"



If a non-floated element with a specified width directly follows a left-floated element with a specified width, the non-floated container will appear to the right of the floated element instead of allowing the floated element to overlap it.

Affects: Internet Explorer 6.0, 7.0; Internet Explorer for Macintosh 5.2
Likelihood: Likely

and

"Float drop problem"



If a container (including the browser window itself) is not wide enough to accommodate both a float with a specified width and any content with a specified width that follows it, the content after the float will drop below the float rather than wrapping around it.

Affects: Internet Explorer 6.0, 7.0
Likelihood: Likely



It underlines only 1 line of text, the one I called "content_wrapper" (the Div tag linking to a certain CSS file), so I'll just post the CSS thingies that have something to do with the content_wrapper:




#wrapper {

width: 961px;
margin: 0px auto 0px;
padding: 0px;
}


#sidebar {
background:#d6d6d6;
float:left;
width:180px;
border-style:solid;
border-width:1px;
padding:5px;
}

#content_wrapper {
width: 953px;
margin: 0px auto 0px;
padding-left:7px;
padding-top:7px;
padding-bottom:20px;
}



#content_center {
float:right;
width:740px;
border-style:solid;
border-width:1px;
padding:5px;
}



Could somebody please tell me whats wrong? XD

(I'm not posting my HTML because I didn't put any text in there or anything, I'm just working on the layout right now.
Wickham
02 Apr 2009, 03:40 AM
It's difficult to comment without the html markup to know what div is nested inside which other div, and the order.

However, this page shows some common problems and solutions with div order and styles:-
http://www.wickham43.net/threecolumns.php

Edit: I've guessed a layout you might have:-


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<meta name="keywords" content="Wickham">
<meta name="description" content="Test items">
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1">

<title>Test</title>

<style type="text/css">
#wrapper {background:pink;
width: 961px;
margin: 0px auto 0px;
padding: 0px;
}

#sidebar {
background:#d6d6d6;
float:left;
width:180px;
border-style:solid;
border-width:1px;
padding:5px;
}

#content_wrapper {background:#eee;
width: 953px;
margin: 0 auto;/*0px auto 0px;*/
/*padding-left:7px;*/
padding-top:7px;
padding-bottom:20px;
}

#content_center {background:lime;
float:right;
width:740px;
border-style:solid;
border-width:1px;
padding:5px;
}
</style>

</head>

<body>
<div id="wrapper">
<div id="content_wrapper">
<div id="sidebar">Sidebar</div>
<div id="content_center">Content center</div>
</div>
</div>
</body>
</html>


Notice that the overall width of #content_wrapper was 953+7 = 960 but #wrapper is 961px so yo had 1px spare and it would have had padding on the left but not on the right so I centered the div with margin: 0 auto; which means top and bottom 0 and side margins equal and flexible.

It helps to add temporary background-colors to see the size of divs.

IE shows the same layout as Firefox.