css3 - side columns and text in the middle using inline style -
i have html code , inline style applied it, 2 columns text links , vertical images on each side. in middle put post text , content.
if post big, text takes whole page width after there no enough images on side columns keep text in middle.
i want keep text in middle of these columns.
<div style="float: right; text-align: center;"> <p><strong>version.v </strong></p> <p><strong> 999 </strong></p> <p><strong>august 7, 2013</strong></p> <p> <a href="#">news</a> </p> <p><a href="#">updated news</a></p> <p> <a href="#">old news</a></p> <p><a href="#">posts</a></p> <p><a href="#">daily news</a></p> <p> </p> <p> </p> <p><a href="#"><img title="here" alt="here" src="picture.gif" width="150" height="97" /></a></p> </div> <div style="float: left; padding-right: 1px; text-align: center;"> <p><strong>version.v </strong></p> <p><strong> 999 </strong></p> <p><strong>august 7, 2013</strong></p> <p> <a href="#">news</a> </p> <p><a href="#">updated news</a></p> <p> <a href="#">old news</a></p> <p><a href="#">posts</a></p> <p><a href="#">daily news</a></p> <p> </p> <p> </p> <p><a href="#"><img title="here" alt="here" src="picture.gif" width="150" height="97" /></a></p> </div> <div> <p>lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry’s standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop publishing software aldus pagemaker including versions of lorem ipsum. lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry’s standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop publishing software aldus pagemaker including versions of lorem ipsum. lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry’s standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop publishing software aldus pagemaker including versions of lorem ipsum. lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry’s standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop publishing software aldus pagemaker including versions of lorem ipsum. lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry’s standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop publishing software aldus pagemaker including versions of lorem ipsum.</p> <p> </p> <p> </p> <p>lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry’s standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop publishing software aldus pagemaker including versions of lorem ipsum.<br> <span id="more-208"> </span><br> lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry’s standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop publishing software aldus pagemaker including versions of lorem ipsum. lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry’s standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop publishing software aldus pagemaker including versions of lorem ipsum.</p> <p>lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry’s standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop publishing software aldus pagemaker including versions of lorem ipsum.</p> <p>lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry’s standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop publishing software aldus pagemaker including versions of lorem ipsum.</p> </div> </body> </html> text in middle
longer goes down, aligned left edge of page, want in box in middle of columns.
add class p tag holds main content so
<p class="content">[main content here]</p> css
.content { width:100%; padding: 0 150px; box-sizing:border-box; } 
Comments
Post a Comment