This is the code snippet and fiddle I am working with: http://jsfiddle.net/hehUt/2/
<div class="one"></div>
<div class="two">text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here heretext here text here text here text here text here text here text here text here text here text here re text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here heretext here text here text here text here text here text here text here text here text here text here
</div>
.one {
background-color: red;
height: 75px;
width: 75px;
float: left;
}
.two {
margin-left: 75px;
}
I have managed to make the two divs sit next to each other in a flexible layout that utilizes all available space without text wrapping issues. The current setup works fine.
My concern arises when the width of div.one changes, as this would require adjusting the margin for div.two accordingly. Is there a more efficient way to handle this situation? For instance, if div.one's width is dynamically set by content coming from a CMS, leading to varying widths, is there a CSS solution that can adapt without needing manual margin adjustments for div.two? Your suggestions are appreciated. Thanks