Float a div to the right of another div - html

Question

I am having trouble getting my image to be on the right side of the information that I am trying to display. My CSS skills are lacking and becoming more and more apparent, so the help is very appreciated.
Here is my HTML
<div id="facility_general_info">
<div id="facility_info">
<h3>Facility Information</h3>
<div id="facility_data">
<ul>
<li><b>Facility Number</b><p>...</p></li>
<li><b>Facility Name</b><p>...</p></li>
<li><b>Address</b><p>...</p></li>
<li><b>City</b><p>...</p></li>
<li><b>Province</b><p>...</p></li>
<li><b>Postal Code</b><p>...</p></li>
<li><b>Roof Area</b><p>...</p></li>
<li><b>Roof Area Inspected</b><p>...</p></li>
<li><b>Last Inspected</b><p>...</p></li>
<li><b>Inspected By</b><p>...</p></li>
<ul>
</div>
<!--facility front image-->
<div id="facility_image">
<div id="fac_image_wrapper">
<img src="http://i.imgur.com/rQ5G8sZ.jpg?2" width="250"/>
</div>
<br />
</div>
</div>
</div>
I am trying to get #facility_image to "float" to the right side of #facility_data.
Here is my CSS
#facility_general_info {
padding: 5px;
float: left;
width: 750px;
line-height: 110%;
}
#facility_info ul {
margin-left: -40px;
list-style-type: none;
}
#facility_info h3 {
color: #0d55b7;
border-bottom: 2px solid #0d55b7;
}
#facility_info {
margin-left: 50px;
width: 750px;
float:left;
}
#facility_data{
width: 375px;
margin: 0 !important;
}
/*facility image*/
#facility_image {
margin-top: 100px;
margin-left: 400px;
width: 350px;
padding: 5px;
float: left;
}
#fac_image_wrapper p {
width: 250px;
}
#fac_image_wrapper{
text-align: center;
}
Here is a JSfiddle.
How can I float my image to the right hand side of the data I am trying to display?

Answer 1

You are setting a huge margin to the image div that is putting it way down the screen.
Let the #facility_data take 60% of the container div and float left, and let the image take the other 37% and remove the margin. You also need to give some margin right for #facility_data to keep some space between the 2 divisions :
#facility_image {
/*margin-top: 100px; <<<<< huge margin
margin-left: 400px;<<<<< huge margin*/
width: 37%;
padding: 5px;
float: left;
}
#facility_data
{
width:60%;
margin-right:2%;
float:left;
}
Working example :
#facility_general_info {
padding: 5px;
float: left;
width: 750px;
line-height: 110%;
}
#facility_info ul {
margin-left: -40px;
list-style-type: none;
}
#facility_info h3 {
color: #0d55b7;
border-bottom: 2px solid #0d55b7;
}
#facility_info {
margin-left: 50px;
width: 750px;
float:left;
}
#facility_data{
width: 375px;
margin: 0 !important;
}
/*facility image*/
#facility_image {
width: 37%;
padding: 5px;
float: left;
}
#facility_data
{
width:60%;
margin-right:2%;
float:left;
}
#fac_image_wrapper p {
width: 250px;
}
#fac_image_wrapper{
text-align: center;
}
<div id="facility_general_info">
<div id="facility_info">
<h3>Facility Information</h3>
<div id="facility_data">
<ul>
<li><b>Facility Number</b><p>...</p></li>
<li><b>Facility Name</b><p>...</p></li>
<li><b>Address</b><p>...</p></li>
<li><b>City</b><p>...</p></li>
<li><b>Province</b><p>...</p></li>
<li><b>Postal Code</b><p>...</p></li>
<li><b>Roof Area</b><p>...</p></li>
<li><b>Roof Area Inspected</b><p>...</p></li>
<li><b>Last Inspected</b><p>...</p></li>
<li><b>Inspected By</b><p>...</p></li>
<ul>
</div>
<!--facility front image-->
<div id="facility_image">
<div id="fac_image_wrapper">
<img src="http://i.imgur.com/rQ5G8sZ.jpg?2" width="250"/>
</div>
<br />
</div>
</div>
</div>

Answer 2

Use display: inline-block to place the image horizontally with the data. Remove the margin set for the image since the image is already inside the parent container. Give a float: left for both the elements as the data comes first in the DOM, the image will go to the right.
#facility_general_info {
padding: 5px;
float: left;
width: 750px;
line-height: 110%;
}
#facility_info ul {
margin-left: -40px;
list-style-type: none;
}
#facility_info h3 {
color: #0d55b7;
border-bottom: 2px solid #0d55b7;
}
#facility_info {
margin-left: 50px;
width: 750px;
float: left; /* Add */
}
#facility_data {
width: 375px;
margin: 0 !important;
display: inline-block; /* Add */
float: left; /* Add */
}
/*facility image*/
#facility_image {
width: 350px;
padding: 5px;
float: left;
}
#fac_image_wrapper p {
width: 250px;
}
#fac_image_wrapper {
text-align: center;
}
<div id="facility_general_info">
<div id="facility_info">
<h3>Facility Information</h3>
<div id="facility_data">
<ul>
<li><b>Facility Number</b>
<p>...</p>
</li>
<li><b>Facility Name</b>
<p>...</p>
</li>
<li><b>Address</b>
<p>...</p>
</li>
<li><b>City</b>
<p>...</p>
</li>
<li><b>Province</b>
<p>...</p>
</li>
<li><b>Postal Code</b>
<p>...</p>
</li>
<li><b>Roof Area</b>
<p>...</p>
</li>
<li><b>Roof Area Inspected</b>
<p>...</p>
</li>
<li><b>Last Inspected</b>
<p>...</p>
</li>
<li><b>Inspected By</b>
<p>...</p>
</li>
<ul>
</div>
<!--facility front image-->
<div id="facility_image">
<div id="fac_image_wrapper">
<img src="http://i.imgur.com/rQ5G8sZ.jpg?2" width="250" />
</div>
<br />
</div>
</div>
</div>

Answer 3

you have lacked float
#facility_data {
float: left;
}
#facility_image {
margin-top: 0;
margin-left: 0;
}
although not the best technique, you can learn to use FlexBox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 4

I've tidied up your JSFiddle, removing some of the unecessary HTML elements and also fixing an error in the HTML, which was the second <ul>. It should have been </ul>to close the list.
In the jsfiddle, we can see the following reduced css as an example:
.facility_info {
width: 800px;
}
.facility-list {
float:left;
width: 400px;
}
.facility-image {
width: 350px;
float: right;
}
.facility_info is wide enough to accomodate both the defined child widths and also the browser default <ul> styling which adds a margin.
Then the two children are floated left and right respectively. The selectors are added directly to the <ul> and <img /> tags as you don't need wrappers (though you could wrap these children and apply the css to the wrapper).
I've used classes rather than ids, this is better in the long run as it makes it easier to maintain css on a project. IDs add styles in a way that is hard to over-ride, can't be re-used and are unnecessary for styling.
Apart from this, you were also suffering a bit from the default css properties added to html elements by browsers. Loading a reset.css file will help with this. A reset css declaration loads some defaults at the top of the css file that set various values to 0 to over-ride the default properties set by the browser. It gives you a more consistent and less confusing base to start styling from