Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by MUZ140122 Emmanuel Kavhuru
MUZ140122 Emmanuel Kavhuru
5,605 Points

HTML, how do l format my code in 3 columns to be displayed in one row on the same page?

Here are the three headings to be displayed in the same row;

<h3>Mining Industry</h3> <div id="display"> <h4>Zatphic Mine</h4> <p>561 Bermingham Rd, Chegutu, Zimbabwe.</p> <p>Contact Mobile: 0773 772 200 </p> <p>Tel:053 3944</p> <p>email: youngkav@gmail.com</p> <p>Website: http//www.zatphic.co.zw</p>

<h4>Products</h4> <p>Gold</p> <p>Silver</p> <p>Platinum</p>

<h4>Location</h4> <script src="http://maps.googleapis.com/maps/api/js"></script> <script> function initialize() { var mapProp = { center:new google.maps.LatLng(-18.129456, 30.154317), zoom:9, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); } google.maps.event.addDomListener(window, 'load', initialize); </script> <div id="googleMap" style="width:500px;height:150px;"></div>

Thus: Mining, Products and Location

Saskia Lund
Saskia Lund
5,673 Points

Could you maybe show us your code?

And show us the desired layout, too?

MUZ140122 Emmanuel Kavhuru
MUZ140122 Emmanuel Kavhuru
5,605 Points

<h3>Mining Industry</h3

    <h4>Zatphic Mine</h4
    <p>561 Bermingham Rd, Chegutu, Zimbabwe.</p
    <p>Contact Mobile: 0773 772 200 </p
    <p>Tel:053 3944</p
    <p>email: youngkav@gmail.com</p
    <p>Website: http//www.zatphic.co.zw</p

    <h4>Products</h4
    <p>Gold</p
    <p>Silver</p
    <p>Platinum</p

    <h4>Location</h4
    <script src="http://maps.googleapis.com/maps/api/js"></script>
    <script>
      function initialize() {
        var mapProp = {
         center:new google.maps.LatLng(-18.129456, 30.154317),
         zoom:9,
         mapTypeId:google.maps.MapTypeId.ROADMAP
         };
        var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
      }
     google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    <div id="googleMap" style="width:500px;height:150px;"></div

I have removed the closing tags so that the code will be displayed. desired display is;

Mining Industry Products Location

Saskia Lund
Saskia Lund
5,673 Points

Ok you want three columns each titled differently? Are those columns supposed to be same width?

1 Answer

Saskia Lund
Saskia Lund
5,673 Points

Check out how I created a three columns layout from your code.

http://codepen.io/SaskiaLund/pen/MwrdGp

MUZ140122 Emmanuel Kavhuru
MUZ140122 Emmanuel Kavhuru
5,605 Points

This is awesome Saskia !! Thanks a lot hey. Enjoy your day.