Where am I going wrong? ;-(

HTML & CSS
1

I thought I had made a ‘liquid’ layout, but When I narrow the browser window, the Content dives under the left hand column.

Here is the page …

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<title>myindex.html</title>
<style type=“text/css”>
<!–
#header {
background-color: #EDF8CB;
height: 80px;
width: 100%;
}
#logo {
background-color: #FFF;
float: left;
height: 80px;
}
#bannerfloatright {
background-color: #D4BFFF;
float: right;
height: 80px;
width: 60%;
}
#menu {
background-color: #E10000;
height: 30px;
width: 100%;
border: thin solid #000;
}
#body {
background-color: #FFF;
width: auto;
}
#bar_left {
background-color: #FCF;
padding: 10px;
float: left;
width: 160px;
}
#bar_right {
padding: 10px;
float: right;
width: 15%;
background-color: #FCF;
}
Content {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000;
background-color: #FFF;
padding: 10px;
float: left;
width: 60%;
}
#footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
background-color: #A0FEC6;
text-align: center;
clear: both;
height: 20px;
width: 100%;
font-style: italic;
}
#container {
background-color: #FFF;
width: 100%;
}
#wrapper {
float: left;
}

</style>
</head>
<body>
<div id=“container”>
<!–header wrapper –>
<div id=“header”>
<div id=“logo”>logo Goes Here</div>
<div id=“bannerfloatright”>Content for id “bannerfloatright” Goes Here</div>
</div>
<!–header wrapper end–>
<div id=“menu”>Content for id “menu” Goes Here</div>
<!–body wrapper –>
<div id=“body”>
<!–bar_left –>
<div id=“bar_left”>Content for id “bar_left” Goes Here
<ul>
<li>Working through a top-down, bottom-up approach</li>
<li>The vitality of conceptual synergies is of supreme importance</li>
</ul>
</div>
<!–end bar_left –>
<!–wrapper –>
<div id=“wrepper”>
<!–bar_right –>
<div id=“bar_right”>Content for id “bar_right” Goes Here
<p>Eu fugiat nulla pariatur. Quis nostrud exercitation sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat qui officia deserunt ullamco laboris nisi. Ut aliquip ex ea commodo consequat.</p>
<p>Ut aliquip ex ea commodo consequat. Excepteur sint occaecat mollit anim id est laborum. Duis aute irure dolor ut labore et dolore magna aliqua. Velit esse cillum dolore sunt in culpa quis nostrud exercitation.</p>
</div>
<!–end bar_right –>
<!–content –>
<div id=“content”>Content for id “content” Goes Here
<p>Maximization of shareholder wealth through separation of ownership from management the strategic vision - if indeed there be one - is required to identify by adopting project appraisal through incremental cash flow analysis. Working through a top-down, bottom-up approach, to experience a profound paradigm shift, taking full cognizance of organizational learning parameters and principles. Organizations capable of double-loop learning, whether the organization’s core competences are fully in line, given market realities. The balanced scorecard, like the executive dashboard, is an essential tool in a collaborative, forward-thinking venture brought together through the merging of like minds.</p>
<p>An important ingredient of business process reengineering presentation of the process flow should culminate in idea generation, highly motivated participants contributing to a valued-added outcome. Building flexibility through spreading knowledge and self-organization, an investment program where cash flows exactly match shareholders’ preferred time patterns of consumption the components and priorities for the change program. That will indubitably lay the firm foundations for any leading company through the adoption of a proactive stance, the astute manager can adopt a position at the vanguard. The three cs - customers, competition and change - have created a new world for business from binary cause and effect to complex patterns, the strategic vision - if indeed there be one - is required to identify.</p>
</div>
<!–end content –>
</div>
<!–end wrapper –>
</div>
<!–body wrapper end–>
<!–footer –>
<div id=“footer”>Copyright ©2010 blah blah blah…</div>
<!–footer end–>
</div>
</body>
</html>

2

I didn’t test to see if there was anything else wrong with your code but in your HTML you have this

<div id="wrepper">

Make that “wrapper” :slight_smile:

PS-If it still isn’t working a link would be preferable for debugging :slight_smile:

3

Just a quick mock up that prevents the drop. It seemed to me you also had some needless containers (#wrapper, #body…). See if this gets you further:


#header {
background-color: #EDF8CB;
height: 80px;
width: 100&#37;;
}

#logo {
background-color: #FFF;
float: left;
height: 80px;
}

#bannerfloatright {
background-color: #D4BFFF;
float: right;
height: 80px;
width: 60%;
}

#menu {
background-color: #E10000;
height: 30px;
width: 100%;
border: thin solid #000;
}

#bar_left {
background-color: #FCF;
padding: 10px;
float: left;
width: 160px;
}

#bar_right {
padding: 10px;
float: right;
width: 15%;
background-color: #FCF;
}

#content {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000;
background-color: #FFF;
padding: 10px;
margin-left:180px;
margin-right:20px;
}

#footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
background-color: #A0FEC6;
text-align: center;
clear: both;
height: 20px;
width: 100%;
font-style: italic;
}

#container {
background-color: #FFF;
width: 100%;
overflow:hidden;
min-width:600px;
}



<body>
<div id="container">
<div id="header">
<div id="logo">logo Goes Here</div>
<div id="bannerfloatright">Content for id "bannerfloatright" Goes Here</div>
</div>
<div id="menu">Content for id "menu" Goes Here</div>


<div id="bar_left">Content for id "bar_left" Goes Here
<ul>
<li>Working through a top-down, bottom-up approach</li>
<li>The vitality of conceptual synergies is of supreme importance</li>
</ul>
</div>

<div id="bar_right">Content for id "bar_right" Goes Here
<p>Eu fugiat nulla pariatur. Quis nostrud exercitation sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat qui officia deserunt ullamco laboris nisi. Ut aliquip ex ea commodo consequat.</p>
<p>Ut aliquip ex ea commodo consequat. Excepteur sint occaecat mollit anim id est laborum. Duis aute irure dolor ut labore et dolore magna aliqua. Velit esse cillum dolore sunt in culpa quis nostrud exercitation.</p>
</div>
<div id="content">Content for id "content" Goes Here
<p>Maximization of shareholder wealth through separation of ownership from management the strategic vision - if indeed there be one - is required to identify by adopting project appraisal through incremental cash flow analysis. Working through a top-down, bottom-up approach, to experience a profound paradigm shift, taking full cognizance of organizational learning parameters and principles. Organizations capable of double-loop learning, whether the organization's core competences are fully in line, given market realities. The balanced scorecard, like the executive dashboard, is an essential tool in a collaborative, forward-thinking venture brought together through the merging of like minds.</p>
<p>An important ingredient of business process reengineering presentation of the process flow should culminate in idea generation, highly motivated participants contributing to a valued-added outcome. Building flexibility through spreading knowledge and self-organization, an investment program where cash flows exactly match shareholders' preferred time patterns of consumption the components and priorities for the change program. That will indubitably lay the firm foundations for any leading company through the adoption of a proactive stance, the astute manager can adopt a position at the vanguard. The three cs - customers, competition and change - have created a new world for business from binary cause and effect to complex patterns, the strategic vision - if indeed there be one - is required to identify.</p>
</div>

<div id="footer">Copyright &copy;2010 blah blah blah...</div>
</div>
</body>

IE might need some extra tweaks but this should get you ahead. There might also be other solutions and i’m sure some one will post them.

Any problems, questions… just ask

4

Hi, Ie6 needs min-width helped in there, so either use an expression’

* html #container { 
   width: expression( document.body.clientWidth < 601 ? "600px" : "auto" );
}

Or use a few extra elements as shown here (quiz 3). The expressions can be resource intensive so if you do want to not use an expression you should defiantely look into the extra markup :slight_smile:

5

Yeah, forgot to mention that IE6 doesn’t do min-width. I used to have those xpression for it but it slows things down. Now i use the solution from the quiz … much better. And to get around the IE6 border problem, the OP could be better off using paddings as shown in that quiz. Saves an extra element :slight_smile:

6

Yes it does though IE6’s limit is 960 on borders and he is doing 600 so he can use either :). You only need a 2nd element with a border if it exceeds 960

7

If the OP will be keeping the 600 :wink: Future reference never hurts lol

8

Agreed :slight_smile:

9

Thanks for the help folks, I will try the advice/instructions out this evening.

That’s what happens when …
a. new to this stuff
b. tired
c. changed the code 20 times to try to get it working :nono::nono: :eek:
d. etc., etc., :injured: :goof:

:slight_smile:

10

We all went down that road :slight_smile: