I am currently in the process of designing a website using the flexible box model. My main challenge right now is trying to align text to the right of an image, and then below it. I've attempted using float:right/left along with align="left/right", but these options seem to cause the image to disappear. Could this issue be related to the flexible box model? Below is the source code I have been working on, which includes an article example borrowed from the World of Tanks website.
<div id="content">
<section id="section">
<div id="title">
<h1>This is the Title</h1>
</div>
<div id="info-p">
<div id="photo">
<img id="img" src="400x300.png">
</div>
<article id="info">
<p>
[Text from World of Tanks article goes here]
</p>
</article>
</section>
</div>
Some of the article content appears to be separated from the code for some reason. Here is the corresponding CSS:
#section{
font: 14px Trebuchet MS;
}
#title{
text-align:left;
display:-webkit-box;
-webkit-box-pack:left;
padding:5px;
margin:10px;
}
#info-p{
display:-webkit-box;
-webkit-box-pack:left;
padding:5px;
margin:10px;
}
#photo{
}
#info{
display:-webkit-box;
-webkit-box-pack:left;
-webkit-box-flex:1;
padding:5px;
margin:10px;
max-width:800px;
}
Thank you for any assistance provided. Apologies for the messy formatting – this is my first time posting here.