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!!
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 (
).
Comments
Post a Comment