My goal is to display two <div>
s side-by-side with the content from both <div>
s aligned at the top. I do not want long text in the second <div>
to wrap underneath the first one.
Finally, I do not want to set the width of the second <div>
because I need the markup to work in different widths.
Sample markup is below and at http://jsfiddle.net/rhEyM/.
CSS
.left-div {
float: left;
width: 100px;
height: 20px;
margin-right: 8px;
background-color: linen;
}
.right-div {
float: left;
margin-left: 108px;
background-color: skyblue;
}
HTML
<div class="left-div">
</div>
<div class="right-div">
My requirements are <b>[A]</b> Content in the two divs should line
up at the top, <b>[B]</b> Long text in right-div should not wrap
underneath left-div, and <b>[C]</b> I do not want to specify a
width of right-div. I don't want to set the width of right-div
because this markup needs to work within different widths.
</div>
Try to Use Flex as that is the new standard of html5.
http://jsfiddle.net/maxspan/1b431hxm/
<div id="row1">
<div id="column1">I am column one</div>
<div id="column2">I am column two</div>
</div>
#row1{
display:flex;
flex-direction:row;
justify-content: space-around;
}
#column1{
display:flex;
flex-direction:column;
}
#column2{
display:flex;
flex-direction:column;
}