Home/ Questions/Q 7569549
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T15:11:37+00:00

I have been running into some issues with a JS script and have isolated

  • 0

I have been running into some issues with a JS script and have isolated the problems.
My divs are completely messed up.
The layout I am looking for is :

wrapper    -    whole page.
        header

left menu 1     right content (stretches to / past left menu item 3)
left menu 2 
left menu 3
      footer

I would like the menu items to be contained in a div which is the same height as the right content div.

This is the code I have :

<html>
<head>
<title>Bliss</title>
<link rel="stylesheet" type="text/css" href="styling1.css" />
</head>

<body>

<div id="wholewrap">
<div id="header">header</div>

<div id="middlewrap">

<div id="menuwrap">
<div id="1" class="floatleftnw">1</div>
<div id="1" class="floatleftnw">2</div>
<div id="1" class="floatleftnw">3</div>
</div><!-- end of menu-->

<div id="right" style="float:right; display:inline;">right</div>
</div><!-- end of middlewrap-->
<div id="footer">
footer
</div >

</div><!-- end of whole wrap-->
</body></html>

and the css I have (as per styling1.css) is :

@charset "utf-8";
/* CSS Document */

html, body {
    margin: 0px;
    padding: 0px;
}
body {
    font-family: Verdana, Arial, sans-serif;
    font-size: 11px;
    text-align: center;
    line-height: 1.8em;
    background:#fff;
}



#wholewrap {
    width:1000px;
    margin-left:auto;
    margin-right:auto;
}

#right {
    margin-left:220px;
    width:740px;
    margin-bottom:40px;
    float:right;
    display:inline;

}

.floatleftnw {
    float:left;
}



#middlewrap {
    height:800px;
    width:1000px;

}


#menuwrap {
    height:800px;
    width:200px;
    display:inline;
    border:1px solid blue;

}

.clearer {
    font-size: 0px;
    height: 0px;
    width: 100%;
    display: block;
    clear: both;
}

Can anyone see where I am going wrong? When I rewrote this layout (last hour or 2) I opened my div and made sure I closed it straight away and even commented it. The code is not showing any errors in DreamWeaver, however when I view in firebug, the divs are not functioning as supposed, I.e the menuwrap should have a blue border around it. Right should be inline with the left menus (I can get the border around the menuwrap, however as soon as I add inline to right’s properties, it all gets destroyed.)

Thank you

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    change a bit in ur css as well as in html

    css

    #menuwrap {
    background-color: #D3C5C5;
    float: left;
    height: 100%;
    width: 30%;
}
#right {
   height: 100%;
   width: 70%;
   float:left;
   display:block;
   background-color: #fDc3C5;
}

.floatleftnw {
   float:left;
   clear:both;
}

    HTMl ( dont mix inline css and external css )

    <div id="wholewrap">
<div id="header">header</div>

<div id="middlewrap">

<div id="menuwrap">
<div id="1" class="floatleftnw">1</div>
<div id="1" class="floatleftnw">2</div>
<div id="1" class="floatleftnw">3</div>
</div><!-- end of menu-->

<div id="right">right</div>
</div><!-- end of middlewrap-->
<div id="footer">
footer
</div >

</div><!-- end of whole wrap-->

    Working DEMO

    • 0