What I am trying to do:
The first DIV (left column) has a set width, and includes a small image and a date.
The second DIV (right column) will display text which may vary in length.
When either the the screen size is not big enough (or resized), or when the length of text wraps reaches the far right border wall, then I want the text to wrap in the second container.
What is happening:
When the text wraps, the DIV for the right column, then moves underneath the DIV for the left column.
Here is an example of what is happening. (I have tried to simplify the code as it is actually contained within a PHP loop and it is populated in multiple rows dependent upon data retrieved from a database query.)
Could someone please offer me a solution to this issue.
<html>
<head>
<title>Border testing</title>
<style>
.main_container {
max-width: 600px;
box-sizing: content-box;
display: block;
border: 2px solid red;
}
.left_box {
width: 125px;
box-sizing: border-box;
display: inline-block;
border: 2px solid blue;
}
.left_box_text {
font-size: 1.0em;
font-weight: normal;
font-style: italic;
font-family: Calibri, Arial, Helvetica, sans-serif;
text-align: left;
float: left;
vertical-align: top;
}
.left_box_text img {
width: 25px;
height: 25px;
margin-right: 4px;
float: left;
}
.right_box {
box-sizing: border-box;
display: inline-block;
overflow: auto; /*try word wrap if this doesn work*/
border: 2px solid green;
font-size: 1.0em;
font-weight: bold;
font-style: normal;
font-family: Calibri, Arial, Helvetica, sans-serif;
text-align: left;
width: auto;
vertical-align: top;
}
</style>
</head>
<body>
<div class = "main_container">
<div class = "left_box">
<div class = "left_box_text">
<img src = "" alt="img">
2019-01-01
</div>
</div>
<div class = "right_box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Faucibus in ornare quam viverra orci sagittis eu volutpat. Egestas erat imperdiet sed euismod nisi. Eu sem integer vitae justo. Convallis posuere morbi leo urna. Felis bibendum ut tristique et egestas quis ipsum suspendisse. Luctus accumsan tortor posuere ac ut consequat semper viverra nam. Laoreet sit amet cursus sit amet dictum sit.
</div>
</div>
</body>
</html>
Note: I have tried using position: absolute on the right column, however then it pops out of the container.
Display:inline-block is a shrink to fit algorithm which means it is as large as its content needs it to be. A line of fluid text will therefore eventually stretch the element to be 100% wide. Although we could get around this using calc to offset the 100% width it is not the right element for the job in this case.
As I mentioned in the other thread flexbox is the perfect tool for this and it becomes quite simple.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
body{font-family: Calibri, Arial, Helvetica, sans-serif;}
.main_container {
max-width: 600px;
margin:auto;
border: 2px solid red;
display:flex;
}
.left_box {
flex:1 0 125px;
box-sizing: border-box;
border: 2px solid blue;
}
.left_box_text {
font-size: 1.0em;
font-style: italic;
margin:0;
display:flex;
}
.left_box_text img {
width: 25px;
height: 25px;
margin-right: 4px;
float: left;
}
.right_box {
border: 2px solid green;
font-size: 1.0em;
font-weight: bold;
}
.right_box p{margin:0 0 1em;}
</style>
</head>
<body>
<div class="main_container">
<div class="left_box">
<figure class="left_box_text"><img src="images/fixed-01.jpg" alt="img" width="25" height="25"><figcaption>2019-01-01</figcaption> </figure>
</div>
<div class="right_box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Faucibus in ornare quam viverra orci sagittis eu volutpat. Egestas erat imperdiet sed euismod nisi. Eu sem integer vitae justo. Convallis posuere morbi leo urna. Felis bibendum ut tristique et egestas quis ipsum suspendisse. Luctus accumsan tortor posuere ac ut consequat semper viverra nam. Laoreet sit amet cursus sit amet dictum sit.</p>
</div>
</div
</body>
</html>
However it can be done with old school methods and support back to IE8 quite easily using the display:table and table-cell properties.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
body{font-family: Calibri, Arial, Helvetica, sans-serif;}
.main_container {
max-width: 600px;
width:100%;
margin:auto;
border: 2px solid red;
display:table;
}
.left_box {
display:table-cell;
vertical-align:top;
width:125px;
box-sizing: border-box;
border: 2px solid blue;
}
.left_box_text {
font-size: 1.0em;
font-style: italic;
margin:0;
}
.left_box_text img {
width: 25px;
height: 25px;
margin-right: 4px;
float: left;
}
.right_box {
display:table-cell;
vertical-align:top;
border: 2px solid green;
font-size: 1.0em;
font-weight: bold;
}
.right_box p{margin:0 0 1em;}
</style>
</head>
<body>
<div class="main_container">
<div class="left_box">
<figure class="left_box_text"><img src="images/fixed-01.jpg" alt="img" width="25" height="25"><figcaption>2019-01-01</figcaption> </figure>
</div>
<div class="right_box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Faucibus in ornare quam viverra orci sagittis eu volutpat. Egestas erat imperdiet sed euismod nisi. Eu sem integer vitae justo. Convallis posuere morbi leo urna. Felis bibendum ut tristique et egestas quis ipsum suspendisse. Luctus accumsan tortor posuere ac ut consequat semper viverra nam. Laoreet sit amet cursus sit amet dictum sit.</p>
</div>
</div
</body>
</html>
Of course there are many other ways to do this as well so here is no one right answer. CSS can do the same thing in many different ways but which method you choose depends on the task in hand and then what happens next.
As I mentioned in your other thread please use the w3c validator as your class = āā structures are invalid and there should be no spaces.
Also try and use the correct html elements for the job and a paragraph of text should be in a āpā tag and not a div. Images with captions should use the figure and figcaption constructs where possible. Your html should be a readable document that makes semantic sense even without css applied.
