Add vertical-align: top;
to your .left style
Fluid layout not fluid and one block drops down
-
04-10-2022 - |
Вопрос
http://jsfiddle.net/TomasRR/WuNL3/1/
Code works perfectly when there is no p's and h's in the divs. Once I put some text everything goes out of order.
<div class="cont">
<div class="left">
</div>
<div class="right">
</div>
</div> <!-- .cont -->
css
body {
width:100%;
margin:0;
padding:0;
}
.cont {
white-space:nowrap;
width:100%;
}
.left {
border:1px solid red;
width:50%;
height:200px;
display: inline-block;
}
.right {
border:1px solid black;
width:50%;
height:200px;
display: inline-block;
}
@media only screen and (max-width: 800px) {
.left, .right {
width: 400px;
}
}
when the text is added with p's and h's the html looks like that
<div class="cont">
<div class="left">
<h1>Programming and fuss</h1>
<h2><em>by Tomas R. </em></h2>
<p>MY TOP 3 PAGES:</p>
<a href="http://www.twitter.com/" target="_blank" title="it is twitter" />TWITTER</a>
<a href="http://www.wikipedia.org" target="_blank">WIKIPEDIA</a>
<a href="http://www.vice.com" target="_blank">VICE</a>
</div>
<div class="right">
<p>"An ounce of practice is generally worth more than a ton of theory." <span>E. F. Schumacher.</span></p
</div>
It's better to look at fiddle... What I want ? I want blocks to stay in one line kind of, not to drop down.
Решение
Не связан с StackOverflow