user3103102
user3103102

Reputation: 91

can't get my divs to display inline

I want to create 2 columns of links but i can't get the second div (right-column) to move next to the first div (left-column). also id rather not create a stylesheet for this small page.

<div class="container" style="height: 700px;">
<div class="left-column" style="float: left; padding-left: 150px; display: inline-block;">
 <h3 style="padding-top: 20px;">Getronics</h3>
  <ul style="text-decoration: underline;">
   <li><a href="#">Home</a></li>
   <li><a href="#">About Us</a></li>
  <ul style="margin-left: 50px; text-decoration: underline;">
    <li><a href="#">Meet the executive team</a></li>
    <li><a href="#">History</a></li>
    <li><a href="#">Getronics Workspace Alliance</a></li>
    <li><a href="#">ISO/ITIL Accreditions</a></li>
    <li><a href="#">Green Agenda</a></li>
  </ul>
  </ul>
 <ul style="text-decoration: underline; ">
  <li><a href="#">Location & Contact Us</a></li>
  <li><a href="#">Working For Us</a></li>
 </ul>   
</ul>
<h3>Our Customers</h3>
<ul style="text-decoration: underline; margin-left: 50px;">
  <li><a href="#">Case Studies by Sector</a></li>
  <li><a href="#">Case Studies by Solution</a></li>
  <li><a href="#">Video Case Studies</a></li>
  <li><a href="#">Case Study App</a></li>
</ul>
<ul>      
 <li style="text-decoration: underline;"><a href="#">Our Partners</a></li>
</ul>
<h3>Knowledge Share</h3>
<ul style="text-decoration: underline; margin-left: 50px;"> 
 <li><a href="#">Whitepapers</a></li>
 <li><a href="#">Getronics TV</a></li>
 <li><a href="#">Latest News</a></li>
 <li><a href="#">Infographics</a></li>
</ul>

<div class="right-column" style="float: left; display: inline-block;">
 <h3>Our Solution</h3>
<ul>
 <li><a href="#">Workspace</a></li>
</ul>
<ul>
 <li><a href="#">On Premise and WaaS</a></li>
 <li><a href="#">Deployment & System Migration</a></li>
 <li><a href="#">Managed Print</a></li>
 <li><a href="#">Mobile Workspace</a></li>
</ul>
</div>


</div>
</div>

thanks for any help i know I'm just missing something real simple

Upvotes: 0

Views: 76

Answers (1)

Mujtaba Fadhil
Mujtaba Fadhil

Reputation: 6116

You didn't close your <div class="left-column"> whith </div>

So, Simply just add

</div>

before

<div class="right-column" style="float: left; display: inline-block;">

Also avoid using CSS codes inline, try to write it in <style> tag or in a separate CSS file .

Hope this will help you ..

Upvotes: 3

Related Questions