user6539484 user6539484 - 5 months ago 7
CSS Question

Locating image and text information

Iv'e been trying to locate an image in a center of a page, and to locate two text sections in it's sides (left and right). The right text section is locating under the image and I cant locate it in the same line.

here is my HTML code:

<pre>
<html>
<head>
<link rel="stylesheet" href="EXC.css">
<script type="text/javascript" src="EXC.js"></script>
</head>
<body>
<div id="ronimg">
<img src="achivs.png"/>
<br>
<a href="EXC.html"><button class="button" style="vertical-align:middle"><span> GOBACK </span></button></a>
</div>
<div id="ronalfor">
THIS IS THE FIRST EXAMPLE


</div>

<div id="another">
THIS IS THE SECOND EXAMPLE

</div>
</body>
</html>
</pre>


This is the css code:

<pre>
#ronimg
{
margin-top: 30px;
float: right;
margin-right: 600;
clear: none;
}
#ronalfor
{
color: #43acf8;
font-style: oblique;
margin-top: 30px;
border: 5px inset #b1b53e;
float:left;
width: 500px

}

#another
{
clear: both;
color: #43acf8;
font-style: oblique;
margin-top: 30px;
border: 5px inset #b1b53e;
float:right;
width: 500px
}
</pre>

Answer

Flexbox to the rescue. I added a flexbox container around your HTML, implicitly making the children of the container into flex children. Then I use the order property to arrange the children the way you want (image in the middle with text sections flanking it).

.flex-container {
  display: flex;
  margin-top: 30px;  
}

#ronimg img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

#ronimg {
  order: 1; /* image in the middle */
}

#ronalfor,
#another {
  border: 5px inset #b1b53e;
  font-style: oblique;
  color: #43acf8;
  flex-basis: 200px; /* sets a minimum width for these elements */
}

#ronalfor {
  order: 0; /* section on the left */
}

#another {
  order: 2; /* section on the right */
}
<div class="flex-container">

  <div id="ronimg">
    <img src="http://placekitten.com/200/200" />
    <br>
    <a href="EXC.html">
      <button class="button" style="vertical-align:middle"><span> GOBACK  </span></button>
    </a>
  </div>

  <div id="ronalfor">
    THIS IS THE FIRST EXAMPLE
  </div>

  <div id="another">
    THIS IS THE SECOND EXAMPLE
  </div>

</div>

jsfiddle demo

Comments