I am looking to create a layout where two pieces of text are displayed side by side in columns using CSS. The left-hand column will have variable length text, while the right-hand column will have fixed length text.
The desired layout should show the two columns floating next to each other like this:
[Variable Text] [Fixed text]
If the variable text is long, I want it to wrap around to the next line. For example:
Here is a very long Hello World
piece of variable
text which wraps
Currently, my code works when the variable text is short, but unwanted white spaces appear when the variable text wraps around. For instance:
Here is a very long Hello World
piece of variable
text which wraps
This is the code that I have implemented:
#wrapper {
margin-right: 100px;
}
#left-col {
float: left;
max-width: 100%;
background-color: #CCF;
}
#right-col {
float: left;
width: 100px;
margin-right: -100px;
background-color: #FFA;
}
#cleared {
clear: both;
}<div id="wrapper">
<div id="left-col">Here is a very long piece of text which wraps</div>
<div id="right-col">Hello World</div>
<div id="cleared"></div>
</div>