html - Vertically align stubborn paragraphs -


i have been trying 'about us' section vertically align paragraph below it. reason, when try resize viewing area or @ smaller screen, , on 2 different lines, , if keep making area smaller 'about us' drop down below , left of entire paragraph.

my first question pondering how make 'about us' text stays on 1 line, rather folding in 2 or more lines. second how can make scalable without dropping 'about us' text below paragraph?

attached code in jsfiddle.

thanks guys!!

http://jsfiddle.net/2l9qu/

here troubling html:

                <div class="maincontentcontainer">                 <div class="maincontent1">                         <h1>                             </h1>                  </div></div> 

here accompanying css:

.maincontentcontainer {     width: 85% } .maincontent1 h1 {     font-family:verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;     color:#00245d;     text-align: left;     float: left;     width: 80%;     min-width: 10%; } .maincontent1 {     color: #000;     text-align: left;     max-width: 960px;     min-width: 100px;     width: 35%; } .maincontent2 {     color: #000;     text-align: left;     max-width: 960px;     width: 50%;     margin-left: -6%;     display: inline-block; } 

your markup rather messy, i've tried simpler approach "cleaned up" markup (see http://jsfiddle.net/danielecocca/9ejnt/).

  • html

    <div class="table">     <div class="table-row">         <ul class="table-cell">             <!-- left side pane contents here -->         </ul>         <div class="table-cell">             <!-- right side pane contents here -->         </div>     </div> </div> 
  • css

    .table {     display: table; }  .table-row {     display: table-row; }  .table-cell {     display: table-cell; } 

this uses couple of container div elements, 1 styled display: table , other display: table-row, , left side , right side pane style display: table-cell. little bit of tweaking, should match needs (no real table element used, displayed table, resizes fine).

to avoid breaking on multiple lines, second suggested serlite: can use white-space: nowrap, treats spaces if non-breaking space entities (&nbsp;).


Comments

Popular posts from this blog

plot - Remove Objects from Legend When You Have Also Used Fit, Matlab -

java - Why does my date parsing return a weird date? -

Need help in packaging app using TideSDK on Windows -