html - Building a 3 column div? -
i'm trying build 3 column div , center of them inside wrapper div.left
, div.right
wont stay @ top when div.middle
has text in & when replace display: inline-block
float: left
stop centering, center , stay @ top?
the html:
<div class="left"> </div> <div class="middle"> example <p> example <p> example <p> example <p> example <p> example <p> example <p> </div> <div class="right"> </div> </div> </body>
the css:
.wrapper { margin-left: auto; margin-right: auto; width: 100%; text-align: center; } img { width: 200px; height: 200px;} div.left, div.right { margin: 3px; border: 1px solid #0000ff; display: inline-block; width: 18%; padding: 1px; background: red; } div.middle { margin: 3px; border: 1px solid #0000ff; display: inline-block; width: 60%; padding: 1px; background: red; }
try using vertical-align
div.left, div.right { margin: 3px; border: 1px solid #0000ff; display: inline-block; width: 18%; padding: 1px; background: red; vertical-align: top; /* see here */ }
Comments
Post a Comment