html - css layout issue with aligning my boxes -


i'm trying create css template here using div tags.

what i'm trying shown in image:

http://i42.tinypic.com/9blvnp.png

however im having issues. can box 1 work well, , when put box 2,3 , 4 in position go want them.

however box 5, goes in right position forces box 4 start same height it. shown in image:

http://i41.tinypic.com/344zgnc.png

my code is:

i couldn't find html live demo copying , pasting 1 should work

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>leopold planning </title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>untited document</title> <style type="text/css"> * {     margin: 0 auto; } body {     background-image:url(background.png);     background-color:#1f54bd;     background-repeat:repeat-x;     background-attachment:fixed;     margin-top:0px;     text-align: center;     font-family:lucinda bright;     font-size: 14px; } .contain {     width:1000px;     margin: 0 auto;  } .info {     width: 500px;     background-color: white;     float: right;     margin-top: 10px;     padding: 5px;     margin-right: 300px; } .info1 {     width: 990px;     background-color: white;     float: right;     margin-top: 10px;     padding: 5px;  } .contact {     width: 200px;     background-color: white;     float: right;     margin-top: 10px;     padding: 5px; }   #navigation  { font-size:1.2em;  width:180px; margin-left: 0px; margin-top: 10px; float:left; overflow: hidden; } #navigation ul { margin:0px;  padding:0px; } #navigation li  { list-style: none; }   ul.top-level  { background:#ffffff } ul.top-level li {  border-bottom: #c0c0c0 solid;  border-width: 1px; }  #navigation {  color: #d4a017;  cursor: pointer;  display:block;   line-height: 25px;  text-indent: 0px;  text-decoration:none;  width:100%; } #navigation a:hover{  color: #fff;  text-decoration:none; }  #navigation li:hover {  background: #2554c7;  position: relative; }  .contact_info {     width:180px;     background-color: white;     float: left;     margin-top: 5px;     overflow: hidden; } .mainbody {     width: 500px;     background-color: white;     float:left;     margin-top: 10px;     margin-left: 10px;     overflow: hidden;     padding: 5px; } .phone {     width: 280px;     background-color: white;     float: right;     margin-top: 10px;     margin-left: 10px;     overflow: hidden;     padding: 5px; }             </style>  </head>  <body>  <!-- banner removed  -->    <!-- container --> <div class="contain">  <!-- welcome message -->      <div class="info1">     <h2> welcome leopold planning</h2>     <p>thank visiting leopold planning, hope find looking , willing help!</p>     </div>  <!-- navigation -->     <div id="navigation">                 <ul class="top-level">                  <li><a id="displaytext2" href="javascript:app();"><b>planning application</b></a></li>                 <li><a id="displaytext3" href="javascript:cert();"><b>certificate of lawfulness applications</b></a></li>                 <li><a id="displaytext1" href="javascript:appeal();"><b>planning appeals</b></a></li>                         <li><a id="displaytext" href="javascript:statement();"><b>planning statements</b></a></li>                         <li><a href="#"><b>site appraisals/stalled sites</b></a></li>                                </ul>     </div>  <!-- main body -->     <div class="mainbody">      <!-- top navigation -->     <div id="navigation1">         going have 3 links here     </div>     </div>     <!-- main content -->     <div class="mainbody">     sadas        </div>  <!-- phone -->     <div class="phone">     <h3>phone back</h3>     <table align="center">     <form action="" method="post">     <tr><td align="left">name:<font color="red">*</font></td><td> <input type="text" name="name_p" /></td></tr>     <tr><td align="left">number:<font color="red">*</font></td><td> <input type="text" name="number_p" /></td></tr>     <tr><td colspan="2"><input type="submit" name="p_submit" /></td></tr>     </form>     </table>     </div> <!-- contact -->  <!-- twitter -->        </div>     </div> </div> </div> </body> </html>

in html, put code of phone div before mainbody div


Comments

Post a Comment

Popular posts from this blog

linux - xterm copying to CLIPBOARD using copy-selection causes automatic updating of CLIPBOARD upon mouse selection -

i've tried various ways coerce xterm (versions 285 , 292) copy selection clipboard clipboard whenever press ctrl-shift-c. promising way far has been, in ~/.xresources, put this: xterm*vt100.translations: #override \ ctrl shift <keypress> c: copy-selection(clipboard) \n\ ctrl shift <keypress> v: insert-selection(clipboard) ctrl-shift-v works perfectly, copying has nuance... if restart xterm, highlighting text puts things in primary clipboard; expected, proper, default behavior. if hit ctrl-shift-c, copies current selection clipboard clipboard. the bug, however, if highlight text after first time pressed ctrl-shift-c, you'll see highlighting copies both primary and clipboard. cannot figure out how stop xterm updating clipboard upon selection... , doesn't make sense me in first place. i said, @ specific point in time, copy selection clipboard... yet starts updating automatically upon selection after doing once... anyone have workaround...
Read more

c++ - qgraphicsview horizontal scrolling always has a vertical delta -

Image
i've subclassed qgraphicsview custom canvas used in cad application. i've reimplemented qgraphicsview::wheelevent check keyboard modifiers control key and, if control key pressed, zoom. i'm trying implement horizontal scroll when user holds shift , uses wheel. the problem i'm having horizontal scrolling always scrolls 0.279. not huge problem, hugely annoying , points else being wrong. so, here questions: is right way implement horizontal scrolling? if not, is? how eliminate delta of 0.279? thanks in advance. code , sample output below void myview::zoom(int delta) { double factor = pow(1.2, delta/abs(delta)); this->scale(factor, factor); } void myview::scrollhorizontal(int level) { qpointf center = maptoscene(viewport()->rect().center()); qdebug() << "center: " << center.x() << ", " << center.y(); centeron(qpointf(center.x() - level, center.y())); } void myview::wheelevent(qwheeleve...
Read more